どうも、まさとらん（@0310lan）です！
今回は、ブラウザ上に2Dゲームを開発できる環境を提供してくれる無料のWebサービスをご紹介します。
ゲームを作るのに必要なキャラクターの作成や効果音などの音作りから、ステージの作成やゲームロジックのプログラミング・ファイルへの書き出しまですべて統合されているのが大きな特徴です。
ゲームを作ってみたいと考えている人は、ぜひ参考にしてみてください！
【 Bitmelo 】
■「Bitmelo」の使い方
それでは実際に使いながら、どのようなサービスなのかを見ていきましょう！
「Bitmelo」は面倒なユーザー登録などは一切不要で、以下のURLにアクセスするだけですぐにブラウザ上にゲーム開発環境が起動します。
＜BitmeloURL＞
https://bitmelo.com
「Bitmelo」はゲーム開発に必要となる以下の要素をすべて自由に作れるのが大きな特徴でしょう。
- キャラクターなどの作成
- ステージの構成
- 効果音などの音を作成
- ゲームロジックの開発
- ファイルの書き出し
…など
しかも、誰でも簡単に扱えるようにシンプルなエディタで設計されています。大きく分けると、以下のように3つの画面で構成されているのが分かります。
それぞれの役割については次の通りです。
【メニュー】用途に応じたエディタの切り替え
【メインエディタ】ゲームのプレビューやプログラミング・編集画面など
【コンソール】コンソール出力やドキュメントなどの表示
基本的な作業の進め方ですが、【メニュー】から画面を切り替えながら【メインエディタ】の中で開発をしていくのが一般的でしょう。
【コンソール】については、デバッグ作業やAPIドキュメントを参考にするなど補助的な使い方がメインになります。
また、「Bitmelo」はブラウザ上で動作するWebアプリとして提供されていますが、2019年11月時点でWindows向けのデスクトップ版ソフトウェアとしてもダウンロードが可能です。
＜参考リンク＞
■キャラクターやステージを作ってみよう！
まずは、簡単なゲームを作るためにキャラクターの作成から始めてみましょう。
【メニュー】から【Tile Editor】を選択すると、ドット絵のペイントエディタが表示されます。
一般的なペイントアプリと同じように、好きなカラーを選択して「16 ✕ 16」のマス目にお絵描きをしていくことが可能です。
デフォルトの設定では、全部で64個のドット絵を保存できるようになっています。
保存領域にはキャラクターだけでなく、ステージを構成するドット絵も含まれる点に注意しましょう。
ただし、設定しだいでは最大で256個まで保存が可能で、1個から256個まで自由に設定できるので用途に応じて変更するとよいでしょう。
次に、【メニュー】から【Tilemap Editor】を選択してゲームのステージを作っていきます。
ステージの作り方は簡単で、さきほど【Tile Editor】で作成したドット絵を選んでステージ上に配置していくだけです。複数の異なるステージを作成して保存・管理できるので、ステージ数の多いゲームにも対応できるでしょう。
もちろんステージの幅・高さのサイズ変更も可能で、最大で1024マスまで設定することができます。そのため、横に長く作ればスクロール型のアクションゲームも簡単に作れるわけです。
■効果音を作ってみよう！
キャラクターとステージ作りができたら、次はゲームに使う効果音を作ってみましょう。
【メニュー】から【Sound Editor】を選択すると、シンセサイザーを搭載した音楽作成エディタが表示されます！
一般的な、サイン波・三角波・のこぎり波・矩形波という4つの波形をベースにしており、キャラクターの歩く音や爆発音などさまざまな音作りを楽しめるように設計されています。（※最大で256個の音を保存可能）
メインの音作りですが、【Volume】【Pitch】【Arpeggio】という3つのパラメータを自由に調整することで簡単に実現できます。
音の強弱・高さ・音階などを好きなタイミングで調整していきながら、ベースになっている波形を変えることで無限の音作りができるわけです。
さらに、PCキーボードに対応した鍵盤も搭載されているので、音階を奏でるのも簡単にできます。
これらの機能を駆使することで、ゲームに使う効果音だけでなく簡単なBGMなども同じように作ることができるでしょう。
■JavaScriptでプログラミングしてみよう！
ここからは、ゲームのロジックを開発するための基本的なプログラミング手法について見ていきましょう。
利用する言語はおなじみのJavaScriptです。さらに、「Bitmelo」は専用のオブジェクトやメソッドなどが提供されており、効率よくゲーム開発ができるようになっているのが特徴です。
なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください！
まずは【メニュー】から【Code】を選択してプログラミングをするためのエディタを表示しましょう。
エディタはシンタックスハイライトやエラー検出機能などが搭載された扱いやすいもので、画面右側のコンソール画面には提供されているメソッドなどのドキュメントを閲覧できます。すぐに使えるコードスニペットも参照できるのは便利でしょう。
実際のプログラミング手法ですが、基本的には2つの処理を次のように書くことから始めます。
//初期化処理 engine.onInit = () => { }; //ループ処理 engine.onUpdate = () => { };
「Bitmelo」では【engine】というグローバルオブジェクトが生成されており、そこからさまざまなプロパティやメソッドが提供されています。
上記のように、ゲームが起動する前に実行するべき初期化処理は【onInit】に記述し、ゲームのロジックなどのループ処理は【onUpdate】に記述していくわけです。
そこで、まずはゲームの舞台となるステージを表示するために【drawMap()】というメソッドを次のように設定します。
engine.onUpdate = () => { //ステージの表示 engine.screen.drawMap(0,0,-1,-1,0,0,0); };
drawMap()に設定するべき値は次のようになります。
drawMap(X, Y, width, height, screenX, screenY, MapIndex)
X・Y座標を指定する箇所が2つあるのですが、これはステージと画面を異なるサイズに設定できるためです。（基本的にはどちらも同じ値にしておけばよいでしょう）
幅と高さについては-1を設定することで取得可能なので簡単です。
注意するべきポイントは【MapIndex】の値になります。
これは何かというと、【Tilemap Editor】で作成したステージを保存したときのIndex番号になります。
つまり、このIndex番号を変えることで複数のステージを切り替えられるというわけですね。
これでステージが表示できたので、今度はキャラクターを表示してみましょう！
そこで、まずは【player】というオブジェクトを次のように作っておきます。
const player = { x: 90, y: 30, speed: 1, flip: 0 }
中身はキャラクターの位置、スピード、向き（flip）のデータになります。これをゲームロジック内で変更しながら操作できるようにしてみましょう。
キャラクターを表示するには【drawTile()】というメソッドを使います。
engine.screen.drawTile(1,player.x,player.y,player.flip);
drawTile()に設定するべき値は次のようになります。
drawTile(TileID, X, Y, flip)
X/Y座標とflipについては、さきほど作成したplayerオブジェクトをそのまま当てはめればよいですね。
第1引数の【TileID】というのは何かと言うと【Tile Editor】でキャラクターを作成したときに保存したID番号になります。
左下の1マス目がID番号「1」になります。（画面下にも「gid: 1」という表記があります）
このID番号を任意のタイミングで変更すれば、キャラクターをアニメーションさせるのも簡単に実現できるわけです。
最後に、キャラクターをPCのキーボードから操作できるようにしてみましょう！
「Bitmelo」を使うとキーボードからの入力も簡単に取得できます。入力系のメソッドはすべて【engine.input】というオブジェクトから提供されています。
たとえば、キーボードの左矢印キーを押したかどうかは【engine.input.left.pressed】で取得可能で、右矢印キーの場合は【engine.input.right.pressed】を使うという感じです。
実際のプログラムにすると次のようになります！
if(engine.input.left.pressed) { player.x -= player.speed; player.flip = 1; } else if(engine.input.right.pressed) { player.x += player.speed; player.flip = 0; } if(engine.input.down.pressed) { player.y -= player.speed; } else if(engine.input.up.pressed) { player.y += player.speed; }
それぞれの矢印キーが押されたときに、キャラクターのX/Y座標を変更することで移動させることができるわけです。また、X座標を変更するときにplayer.flipを変えれば向きも変えられますね。
ちなみに、作成した効果音を再生する方法として2つのメソッドをご紹介しておきます。
//1回だけ再生 engine.audio.playSound() //ループ再生 engine.audio.playInfiniteSound()
【playSound()】は1回だけ音を再生するのでゲームの効果音に最適です。【playInfiniteSound()】は逆に何回も音をループ再生するメソッドになります。使い方しだいではゲームのBGMなどにも使えるでしょう。
ここまで作成したサンプルコードは以下のリンクからすべて閲覧できますので、ぜひ参考にしてみてください！
■ゲームを書き出してみよう！
「Bitmelo」で作成したゲームはJSON形式のファイルに書き出すか、HTMLファイルとして出力することができるので合わせてご紹介しておきます。
方法は簡単で【メニュー】から【Project】を選択します。
この画面では、プロジェクト名・画面のスクリーンサイズ・フレームレート…など、さまざまな基本設定をおこなえます。
そして、画面下部にある出力機能を使うことでゲームの書き出しが可能になります。
【Export Project Data】はJSON形式でファイルに書き出す機能になります。
【Export HTML Game】がHTMLファイルとしてゲームを書き出す機能になるので、あとはこのHTMLファイルをブラウザで開けばゲームをどこでも楽しめるようになります。
さらに、NetlifyやGithub Pagesなどを活用することで、ネット上へ手軽に公開することも可能なのでシェアしやすくなるでしょう。
■まとめ
今回は、ブラウザ上でレトロな2Dゲームを開発できる統合環境を提供するサービスをご紹介しました。
1つのサービスが提供するエディタだけで、キャラクター・効果音・プログラム・書き出しまで完結できるのは非常に使いやすいと感じました。ゲーム自体のロジックも簡単なので、プログラミング初心者にもオススメできると思います。
何かゲームを作ってみたいなぁ…と漠然と思っていた方も含めて、ご興味ある方はぜひオリジナルゲーム作りに挑戦してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
