どうも、まさとらん（@0310lan）です！
今回は、ブラウザベースのゲーム開発エディタを使って独自ゲームをインストールできる超小型のゲーム機「Meowbit」をご紹介します！
ビジュアルベースのブロックエディタで誰でも簡単にゲームが開発できるうえ、1クリックでJavaScriptによる本格的なプログラミングモードにも切り替えられます。ゲーム機には各種センサーやコネクタも搭載しているので、ちょっとしたIoT開発も可能です。
プログラミングやゲーム開発に興味のある人からガジェット好きな人も含めて、ぜひ参考にしてみてください！
なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。
■「Meowbit」とは？
まず最初に「Meowbit」の詳細について解説をしておきます。
名刺サイズの小型ボディにフルカラーディスプレイと各種センサーやボタンなどを搭載しており、micro:bitと互換性のある拡張コネクタも付いているのが特徴のゲーム機です。（※国内ではAmazonやスイッチサイエンスなどで購入可）
ブラウザ上でゲームを開発して「Meowbit」にインストールできるうえ、拡張コネクタを利用したロボット制御も可能です。
付属のケースはシリコーンの柔らかく肌触りのいい仕様になっており、いつでもはがして基板を取り出すことができます。
リチウム電池をコネクタに接続すれば、バッテリー駆動でゲームを楽しむことができます。（参考リンク）
リチウム電池はケースの裏側に収まるようになっているので便利です。
小型＆軽量なのでどこにでも持ち歩けます。
「Meowbit」の細かい仕様を以下に掲載しておきますので参考にしてみてください！
【 表面 】
【 裏面 】
■「MakeCode Arcade」の使い方
「Meowbit」でさまざまなゲームをインストールしたり、オリジナルの独自ゲームを開発したりするには、無料のWebサービスとして公開されている「MakeCode Arcade」を利用します。
【 MakeCode Arcade 】
これはMicrosoft社が提供する無料のオンラインコードエディタで、誰でも手軽に2Dゲームを開発できるうえ対応するゲーム機向けのファイルに書き出すことができます。
サイト上にはすでに数多くのミニゲームが公開されており、これらすべてを「Meowbit」にインストールして遊ぶことができます。
シューティング、アクション、RPG、グラフィックアート…など、多彩なジャンルのプログラムが公開されているので、まずはどんな作品が作れるのかを試してみるとよいでしょう。
また、オリジナルのゲームを開発する場合は最初に【新規作成ボタン】をクリックします。
するとゲームを開発するためのエディタが表示されます！
画面左側にゲーム機のプレビューが表示されるので、実機が無くてもこのエディタだけで開発からデバッグまでおこなえるようになっています。
基本的にはビジュアルプログラミングで開発できるようになっており、ゲーム開発に必要な機能が各種ブロックに割り当てられています。そのブロックを組み合わせていくだけで、さまざまなジャンルのゲームを手軽に開発できます。
タブを切り替えるだけでブロックエディタからJavaScriptエディタに切り替えることも可能なので、本格的なJavaScriptプログラムを楽しみたい人にも最適です。
また、ゲームを新規開発する場合は、初回のみ画面下のオプションからハードウェアを選択しておきましょう。
「MakeCode Arcade」に対応するゲーム機の一覧が表示されるので「Meowbit」を選択すればOKです！
■ミニゲームを作ってみよう！
それでは、実際に「MakeCode Arcade」を使って簡単なゲームを開発してみましょう！
今回は以下のようにシンプルな「迷路ゲーム」を作ってみます。
まずはプロジェクトを新規に作成して、ブロックエディタの【Sprites】→【set to】ブロックを配置しましょう。
【sprite】の部分が上図のようにグレー色になっているので、そこをクリックしてください。
グラフィックエディタが起動するので、画面上部のメニューから【Gallery】を選択して好きなキャラクターを選びましょう！（※自分で好きなキャラクターを描画することも可能）
すると、プレビュー画面に選択したキャラクターが表示されるはずです。
このキャラクターを操作して迷路ゲームを遊べるように作っていきましょう。
次に、【Scene】→【set tilemap to】ブロックを配置してグレー色の部分をクリックします。
ゲームのステージを構築できる「タイルマップエディタ」が表示されます！
このエディタを利用すると、あらかじめ用意されているさまざまな種類のタイルをペタペタと貼り付けていくだけで、自分の好きなステージを構築できるのです。
今回はデフォルトで表示されているタイルを使い、タイルマップ上にどんどん貼り付けていきましょう。
さらに、好きなオブジェクトを利用して迷路のように壁を作っていきます。
壁となる部分に対しては、画面左側のツールバーから【Draw walls】を選択して赤く塗りつぶしていきます。
この赤くなった部分は自動的に「壁」として認識されるようになります。あとでキャラクターを操作するときに、壁の部分は通行できないようになるわけです。
次に、【Scene】→【camera follow sprite】ブロックと、【Controller】→【move with buttons】ブロックを配置します。
【camera follow sprite】ブロックはキャラクターが移動したときにカメラも一緒に追従してくれる機能で、【move with buttons】ブロックは方向キーでキャラクターを操作できるようにしてくれます。
あとはゲーム開始時にキャラクターが出現する地点を決めておくとよいでしょう。
【Scene】→【place on top of】ボタンを配置してタイルマップ上でどの地点にキャラクターを表示するかを設定します。
上図のようにcol・rowをそれぞれ15に設定すると、左から15個目・上から15個目のタイル上にキャラクターが配置されます。
プレビュー画面で実際にキャラクターが操作できるかを試してみてください！
最後に迷路のゴールになる場所を決めましょう！
さきほどのタイルマップエディタを開いて、ゴールの目印になるタイルを任意の場所に配置しておきます。
この場所をゴールとして設定し、キャラクターがここまで到達できたらゲームを終了するようにしましょう。
そこで、当たり判定を付けるために【Scene】→【on of kind overlaps at】ブロックを配置してゴールに設定したタイルを選択します。
【Game】→【game over】ブロックを追加してオプション部分を【WIN】にしておきます。
ゲームを起動してゴールまでたどり着くと、ゲーム終了のメッセージが表示されるようになります。
これで「迷路ゲーム」は完成です！
あとはお好みで【Info】→【start countdown】ブロックを追加して制限時間を設定してもおもしろいでしょう。
制限時間が過ぎてしまうと自動的にゲームは終了するので、ゲームオーバー処理を自分で作らなくてもよいのは便利です。
このようにグラフィカルなエディタを利用しながら、必要なブロックを組み合わせていくだけで簡単なゲームを素早く開発できるわけです。
■ゲームをインストールする方法
作成したゲームを「Meowbit」にインストールする方法について見ていきましょう！
と言っても、方法は簡単で画面下にある【Download】ボタンをクリックするだけです。
すると拡張子が「.uf2」のファイルをダウンロードできます。あとはこのファイルを「Meowbit」にインストールすればよいわけです。
そこでPCとUSBで接続しましょう！
「Meowbit」の電源を入れるとUSBドライブのような感じで認識してくれます。
認識されたら、さきほど入手した「.uf2」ファイルをドラッグ＆ドロップで放り込むだけで自動的にインストールされます。
数秒ほど待つとすぐに遊べるようになります！
ゲームを改良したり変更したあとは、もう一度ファイルをダウンロードしてインストールすればOKです。簡単ですね！
■ブロックエディタの拡張機能について
「MakeCode Arcade」のブロックエディタは拡張機能が搭載されており、標準で提供されているブロック以外にもさまざまな機能を持ったブロックをインストールできます。
たとえば、アニメーション機能であったりサーボモータの制御やゲームコントローラーに特化したものなど、より高度な使い方ができるのは魅力的でしょう。
（※独自の拡張機能を作ることも可能です。詳細はこちら）
試しに、簡単な手順でキャラクターに動きを付けられる【animation】ブロックをインストールしてみましょう。
すると、ブロックエディタに【Animation】の項目が表示されて専用のブロックが追加できるようになります。
ギャラリーから歩いているモーションのキャラクターを選択してみましょう。
画面右側にキャラクターを複数選択できるようになっているので、1つずつ追加していきます。
「interval」は200に設定して「loop」をONにしておきましょう。
するとキャラクターは元気に動き出します！
このように拡張機能をうまく活用すると、さらにクオリティの高いゲーム開発を手軽におこなえるようになるので、ぜひみなさんも挑戦してみてください！
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回はブラウザから手軽に誰でもゲームを開発できる小型ゲーム機をご紹介しました！
ブロックエディタには、今回ご紹介した以外にもゲームに必要なエフェクト効果やサウンド機能など便利なブロックが多数提供されています。さらに、ゲーム機に搭載されている各種センサー類も扱えるのでちょっとしたIoT開発にもおすすめです。
ゲーム開発に興味のある方やプログラミングを学びたい人も含めて、ぜひみなさんもオリジナルのゲームを作ってみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
