【12：くまげー】enchant.jsを使った落下物回避ゲーム
プロジェクトNo.12：くまげー
enchant.jsというHTML5とJavaScriptベースのゲームエンジンで簡単なゲームを作ってみました。
実は私自身、ゲームプログラミングはこれが初めて。
それでも便利な素材やメソッドがたくさん用意されていて、１日で作ることができました。
ゲームの仕様は、
画面タップで方向転換。リンゴを取るとスピードアップ。ダイヤを取るとスコアアップ。
一定スコアに達すると爆弾のスピードも上がります。
enchant.jsでの開発準備
まずは公式サイトのダウンロードボタンからフレームワークや素材をダウンロード。
http://enchantjs.com/ja/
中に入っているenchant.jsと画像フォルダを使って開発していきます。
ファイル構成は以下の通り。
HTML&CSS
HTMLはJSの呼び出しをするだけです。あと、スマホからも見れるようにviewport要素を入れてます。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>くまげー</title> <script src="./js/lib/enchant.js"></script> <script src="./js/main.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel='stylesheet' href='style.css' type='text/css'> </head> <body style="background: #000;"> <!-- ここにゲームが表示されます。 --> </body> </html>
CSSもブラウザによる余白を削除しているだけです。（少ないのでhtmlに書いても良いかも）
CSS
@charset "utf-8"; html, body{ margin: 0; padding: 0; }
ゲームプログラム（main.js）
さて、ここからが本題。
全て細かく解説していくとキリがないので、開発の流れをざっくりと。
初期設定
この辺は数値など以外、ほぼ決まり文句です。
JavaScript
enchant(); // 初期化 window.onload = function() { var game = new Game(320, 400); // ゲーム本体を準備すると同時に、表示される領域の大きさを設定しています。 game.fps = 24; // frames（フレーム）per（毎）second（秒）：ゲームの進行スピードを設定しています。 game.preload('./img/bg1.png','./img/chara1.png','./img/icon0.png','./img/start.png','./img/gameover.png'); // ゲームに使う素材をあらかじめ読み込んでおきます。 game.onload = function() { // ゲームの準備が整ったらメインの処理を実行します。 game.start(); // ゲームをスタートさせます };
まずは、enchant.jsを使いますよーという初期化やら表示サイズ、FPS、画像のプレロードの設定なんかをしておきます。
そして、game.onload = function() { 以下に実際のゲーム内容を記述していきます。
シーンの作成
シーンって何の事だ？と思うかもしれませんが、よく言う「タイトルシーン」、「ゲームシーン」、「ゲームオーバーシーン」の事です。
1つだけのシーンで作るなら、元々のgame.rootSceneというのが用意されているので、それを使えば良いのですが、
もし複数のシーンを作る場合にはScene();というオブジェクトをNewして生成してあげれば良いです。
サンプルでは３つのシーンを用意しています。
JavaScript
// タイトルシーンを作り、返す関数です。 var createStartScene = function() { var scene = new Scene(); // 省略 return scene; }; // ゲームシーンを作り、返す関数です。 var createGameScene = function() { var scene = new Scene(); // 省略 return scene; }; // ゲームオーバーシーンを作り、返す関数です。 var createGameoverScene = function(resultScore) { var scene = new Scene(); // 省略 return scene; };
キャラクターの表示
操作するキャラクターを表示する際は、簡単に言うと画像を読み込んで表示するのですが、
ここでは少し変わった（ゲームプログラミングでは主流？）方法で表示していています。
まずはSpriteというオブジェクトを作る必要があります。
※Spriteとは：和訳すると妖精、小鬼。。。ではなく、コンピュータ用語で「背景から独立して表示できる図形」の事を言うみたいです。
Sprite生成時に大きさを指定して、画像のどの部分を参照するかをframeで指定する。
・・・何を言ってるかわからないと思うので、一旦ソースコードと画像をご覧下さい。
JavaScript
var kuma = new Sprite(32, 32); // くまというスプライト(操作可能な画像)を準備すると同時に、スプライトの表示される領域の大きさを設定しています。 kuma.image = game.assets['./img/chara1.png']; // くまにあらかじめロードしておいた画像を適用します。 kuma.x = 100; // くまの横位置を設定します。 kuma.y = 300; // くまの縦位置を設定します。 scene.addChild(kuma); // ゲームのシーンにくまを表示させます。 kuma.frame = [0, 0, 1, 1, 2, 2]; // select sprite frame
chara1.png
つまり、32×32のくまが並んでる画像に対して、スプライトの大きさで区切っていき、
左上から0,1,2,3,4,(次の行)5,6,7,8,9…とframeを指定する事で画像を読み込むといったものになります。
kuma.frame = [0, 0, 1, 1, 2, 2];では2frameの間frame=0のくまを表示し、その後2frameの間frame=1のくま、その後
2frameの間frame=2のくま、その後2frameの間frame=0のくま・・・と繰り返す事でGIFのようなアニメーションを表現することができます。
どこに表示するかはフィールド要素のx、yを指定すればOKです。
最後にSpriteをシーンに追加すれば、キャラクターが画面に表示されます。
イベント
毎フレーム実行されるイベントや画面をタッチすると処理されるイベントが用意されているので、
その中に行いたい処理を記述します。
- 毎フレーム実行イベント
JavaScript
scene.addEventListener(Event.TOUCH_START, function(e) { // 処理(e.xとe.yでタッチした場所を特定できる) }
当たり判定
Sprite同士の当たり判定をしたい場合はintersect関数を使うと簡単です。
JavaScript
if(ob1.intersect(kuma_hit)){ // 当たった時の処理 }
また当たり判定を少しでも正確にするために、当たり判定用の1×1の透明なSpriteを作成して本体Spriteの中央に配置する事も有効かと思います。
参考サイトやサンプルなども充実しているので、プログラミングの学習にも良いですね。
今後もおもしろそうなライブラリやフレームワークがあれば触っていこうと思います。
参考サイト
まずはこれ！初歩の初歩を公式チュートリアルよりわかりやすく説明してくれてます。
別のenchant.js系の連載も参考になります。
まだ全部見れてないけど、困ったらここを参考にすれば大抵は大丈夫。
