どうも、まさとらん（@0310lan）です！
今回は、ブラウザ1つで多言語に対応したプログラミング環境を提供する「Replit」と、JavaScriptで手軽に2Dゲームを開発できるライブラリ「KaBoom.js」がコラボしたゲーム開発環境をご紹介します！
誰でもブラウザからアクセスすれば無料ですぐに使えるうえ、面倒な初期設定なども自動化されているので初心者から上級者まで幅広く活用できるサービスとなっています。
ゲーム開発にご興味ある方は、ぜひ参考にしてみてください！
なお、JavaScriptの基本は、paizaラーニングの「JavaScript体験編」や「JavaScript入門編」で学ぶことができます。
■「Kaboom editor」の使い方
それでは「KaBoom editor」をどのように使えばいいのか詳しく見ていきましょう！
まずは開発環境となる「Replit」にアクセスします。まだユーザー登録を済ませていない方は以下の記事で詳細を解説しているので参考にしてみてください。
「Replit」のダッシュボード画面が表示されたら、新規プロジェクトの作成をおこないます。
選択リストから「Kaboom (beta)」を選び、プロジェクト名を入力して「Create repl」ボタンをクリックしてください。
たったこれだけの操作ですが、「KaBoom.js」を利用したゲーム開発環境が完成です！
見た目は通常の「Replit」が提供するコードエディタのようですが、細かい部分でゲーム開発に役立つ機能がいくつか搭載されているのが特徴です。
■「Kaboom editor」の特徴的な機能について
ゲーム開発を始める前に、「Kaboom editor」が提供する便利な機能についてご紹介しておきます。
まずは、画面左のメニューに注目してください。
このメニューには「Scenes」「Sprites」「Sounds」など、「KaBoom.js」でゲームを開発するときに必要となるリソースやプログラムのファイルに素早くアクセスできます。
また、メニュー上部のアイコンをクリックすると、ゲーム全体の初期設定を手軽に変更できるオプションが表示されます。
起動時のゲームファイルを選択したり、背景色やライブラリのバージョンなどを編集できるようになっています。
【Sprites】の項目では、ゲームに使う手持ちの画像ファイルをアップロードできるのですが、「＋」アイコンをクリックして自作することも可能です。
画像の名前とサイズを決めたら、グラフィックエディタが起動するので自由にお絵描きしながら独自のキャラクターを作成できます。
保存すれば【Sprites】の項目に作成したキャラクターが表示されるようになります。
一緒に設定した名前はプログラムから呼び出す際に利用できます。
また、将来的には自作の音楽を作れるサウンドエディタも提供される予定なので、さらにユニークなゲーム作りができるようになるでしょう。
■「Flappy bird」風のミニゲームを作ってみよう！
それでは、せっかくキャラクターを自作したので簡単なミニゲームを作りながら、どのように「KaBoom.js」を使えばいいのか見ていきましょう。
作成するミニゲームは、「Flappy bird」のようにキャラクターをジャンプさせながら障害物を避けるシンプルなものです。
キーボードの「スペースキー」をタイミングよく押すだけのゲームですが、「KaBoom.js」が提供する基本的な機能を学習するのには最適でしょう。
それでは、最初にさきほど自作したキャラクターをゲーム画面に表示させてみましょう。
キャラクターなどの基本的なオブジェクトを設定するには、add()を使って以下のように記述します。
add([ sprite('player'), pos(60, 40) ]);
「sprite()」の引数には、キャラクターを作成するときに設定した名前を指定し、「pos()」で表示する座標を設定します。
「Run」ボタンをクリックして実行すると、キャラクターがゲーム画面に表示されます！
簡単ですね！
add()はさらに多彩な設定が可能で、たとえば「物理演算」「タグ」「カスタムプロパティ」などを続けて設定できます。
add([ sprite('player'), pos(60, 40), body(), // 物理演算の実行'player', // タグの設定{ jumpForce: 200, // カスタムプロパティの設定}]);
body()は、キャラクターに物理演算を搭載してジャンプや落下などの挙動を簡単に作ることができます。「タグ」というのは、文字列で設定するとプログラムのさまざまな場所から呼び出すことが可能で、複数のオブジェクトを一括管理するのにも便利です。
「カスタムプロパティ」は、キャラクターに独自の属性を付与してプログラムから制御するのに便利です。上記の場合だとジャンプするときの飛ぶ強さを「jumpForce」というプロパティを作って制御しようとしています。
そして、これらの「物理演算」「タグ」「カスタムプロパティ」を利用すると、「Flappy bird」のようなジャンプアクションを簡単に作れるのです。
キャラクターに何かをさせたい場合はaction()を使って次のように記述します。
action('player', (e) => { keyPress('space', () => { e.jump(e.jumpForce); }); });
action()の引数に指定した'player'はさきほど設定したタグの文字列ですね。さらに物理演算を搭載するとjump()メソッドが利用できるので、引数にカスタムプロパティの値を指定すれば飛ぶ強さを制御できます。
これだけで「スペースキー」を押すたびにキャラクターがジャンプを繰り返してくれます。
なんとなく「Flappy bird」のようなジャンプアクションになりましたね。
今度は障害物となるブロックを描画してみましょう。
ブロックの画像を自作してもいいのですが、単純な図形であればrect()を利用してプログラムから描くこともできます。
add()を使って次のように記述してみましょう！
//1つ目のブロック add([ rect(25, height() * 0.4), pos(100, 0), color(0, 1, 0), origin('topleft'), //原点の位置を設定'block']) //2つ目のブロック add([ rect(25, height() * 0.4), pos(250, height()), color(0, 1, 0), origin('botleft'), //原点の位置を設定'block'])
「rect(幅, 高さ)」を使えば簡単に図形を描画できます。実行すると以下のようにブロックが表示されます！
ブロックに設定している「origin()」に注目してください。引数に設定している値によってブロックの原点位置を変更できるのが特徴です。
今回の場合だと以下のようになります。
原点の位置を変更することで、障害物の表示位置を画面の上下に振り分けられるので簡単に制御できるわけです。
次に横スクロールのアクションに見せるため、ブロックを画面の右から左へ移動させなければいけません。このような場合にもaction()を利用して次のように記述します。
action('block', (e) => { e.move(-200, 0); })
action()の中にmove()を利用して移動量を設定するだけでブロックがスクロールするように見せられます。
あとはこのブロックを数秒間隔で定期的に表示させていけばいいですね。
このような場合はloop()を利用すると簡単です。引数に秒数を指定するだけで任意の間隔で処理が実行されるようになります。
以下の例はloop()を利用して2秒間隔でブロックを表示させています。また、IF文を利用してブロックを画面上部・下部に振り分けています。
let state = true; loop(2, () => {if (state) {// 上下交互にブロックを表示させる add([ rect(25, height() * 0.4), pos(width(), 0), color(0, 1, 0), origin('topleft'), 'block']) state = false; }else{ add([ rect(25, height() * 0.4), pos(width(), height()), color(0, 1, 0), origin('botleft'), 'block']) state = true; }});
今度は、キャラクターがブロックに接触したらゲームオーバーになるようにしてみましょう。
当たり判定はcollides()を利用すると簡単です。引数に対象となるオブジェクトをタグで指定するだけなので簡単です。以下の例は「キャラクター」と「ブロック」が接触した場合のコードになります。
collides('player','block', (p,b) => { go('gameover'); });
接触した際にgo()を使ってゲームオーバーの画面へ遷移するように指定しました。
「KaBoom.js」では、このようにシーンを簡単に変更できるので、さまざまな画面切り替えを手軽に実装できるようになっています。
現状ではゲームオーバーのシーンを作成していないので、新規のシーンを作成しておきましょう。
【Scenes】メニューの「＋」アイコンをクリックし、「gameover」と入力してエンターキーを押してください。
新しくゲームオーバーのシーンが作成されるので、今度はここにプログラムを記述していきます。
ゲームオーバーのシーンでは、単純に画面へ「Game Over」というテキストを表示するだけなので、add()を利用してテキストオブジェクトを追加します。
また、画面をマウスでクリックするとゲームが再開される機能も実装しておきましょう。
//テキストの表示 add([ text('Game Over', 24), pos(width() / 2, height() / 2), origin('center') ]); //画面をクリックしてゲーム再開 mouseClick(() => { go('main'); })
ここまで記述できればゲームは完成です！
作成したゲームはそのままURLをシェアするだけで、友人・知人にも遊んでもらうことができます。
あとはランダムにブロックの長さを変更するとゲームとしてのおもしろさがアップすると思います。これらも踏まえた今回のサンプルデモのソースコードは、以下のリンクからすべて閲覧できますので参考にしてみてください。
＜参考リンク＞
「KaBoom.js」では、他にもレイヤーの概念、スコアの実装、背景画像、サウンドの実装など、多彩な機能を手軽に扱えるように工夫されています。さらにご興味のある方は、以下のチュートリアルに挑戦してみることをオススメします！
＜参考リンク＞
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、「STEINS;GATE（シュタインズ・ゲート）」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回は「Replit」と「KaBoom.js」がコラボしたゲーム開発環境をご紹介しました。
ブラウザだけですぐにゲーム開発ができる利便性の高さと、面倒な初期設定やサーバの準備などが不要ですぐにプログラミングできるのが魅力だと思います。また、ゲームを実装するのに難しい計算などもほとんど必要ないのは初心者にとっても理解しやすいはずです。
ぜひみなさんもオリジナルゲームを開発して、友人・知人と一緒に遊んでみてはいかがでしょうか。
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら