古籏一浩のJavaScriptラボ ― 第90回

enchant.jsとジャイロセンサーで作るスマホゲーム (3/5)

ゲーム画面の設定

　（1）のゲーム画面から設定します。ゲーム画面は以下のようにして定義します。

var game = new Game(240, 320);

　Game()の第1引数は横幅、第2引数は縦幅のピクセル数で、今回はiPhoneでもプレイできるように横240×縦320pxに設定しました。これでgameオブジェクトが生成され、さまざまなメソッド（機能）が利用できるようになります。

　フレームレート（画面の書き換え頻度）を設定します。通常のテレビは60フレーム（1/60秒）が一般的ですが、スマートフォンの速度やゲームによっては描画処理が間に合わない場合もありますので、30フレーム程度で十分でしょう。フレームレートはfpsプロパティで以下のように設定します。

game.fps = 30;

　続いて（2）の画像データの読み込みです。ゲームで使用するパドルとボールの画像をpreload()メソッドを使って読み込みます。

game.preload("images/pad.png","images/ball.png");

　ゲーム画面の背景色を設定します。RPGやシミュレーションゲームなどでは複数のゲーム画面が必要ですが、スカッシュやブロック崩しのようなシンプルなゲームであれば1つで十分です。enchant.jsではベースとなるゲーム画面（シーン）がrootScene（ルートシーン）として用意されていますので、スカッシュ／ブロック崩しではこのルートシーンだけを利用します。ルートシーンの背景色は以下のようにして設定します。

game.rootScene.backgroundColor = "blue";

　ゲームの設定はページの読み込みが完了した後、つまりwindowのloadイベントが発生した後に処理する必要があります。ここまでをまとめると以下のようになります。game.scoreはスコアを入れるプロパティです。

var game = new Game(240, 320);  // 240×320画面(Canvas)を作成
game.fps = 30;  // フレームレートの設定。30fpsに設定
game.preload("images/pad.png","images/ball.png"); // 画像データをあらかじめ読み込ませる
game.rootScene.backgroundColor = "blue";    // ゲームの背景色を青色に設定
game.score = 0;   // スコアを入れる変数を用意する

ラベルの設定

　スコアなどの文字を表示するものをenchant.jsでは「ラベル」として扱います。ラベルは以下のようにして生成でき、引数にはデフォルトで表示する文字を指定します。

var scoreLabel = new Label("SCORE : 0");

　文字のフォントとサイズは一括して指定します。設定できる値はスタイルシートのfontプロパティと同じで、たとえば以下のようにすると書体はTahoma、文字サイズは16ピクセルになります。

scoreLabel.font = "16px Tahoma";

　文字の色はcolorプロパティにカラー名やカラーコードで指定します。スタイルシートと同じように指定できます。

scoreLabel.color = "white";

　ラベルを表示する位置を指定します。表示位置はx, yプロパティで設定します。座標系は一般的なパソコンと同じで左上が原点で、右下に行くにしたがって座標値が大きくなります。

scoreLabel.x = 10;  // X座標
scoreLabel.y = 5; // Y座標

　ラベルを生成しただけではゲーム画面には表示されませんので、addChild()メソッドを使ってルートシーンにラベルを追加します。

game.rootScene.addChild(scoreLabel);

　ラベルの設定をまとめると以下の用になります。

// スコアを表示するラベルを作成
var scoreLabel = new Label("SCORE : 0");
scoreLabel.font = "16px Tahoma";
scoreLabel.color = "white";
scoreLabel.x = 10;  // X座標
scoreLabel.y = 5; // Y座標
game.rootScene.addChild(scoreLabel);

スプライトの設定

　スプライトとは、ゲームキャラクターを高速に画面に描画するための機能で、古くからゲームセンターに設置されているアーケードゲームなどで利用されてきた考え方です。背景とブロック、キャラクターなどの画像を部品として分けて作成し、指定した位置に重ね合わせて表示します。

　enchant.jsでは以下のようにスプライトを作成します。引数にはスプライトの横のピクセル数、縦のピクセル数を指定します。

var ball = new Sprite(16, 16);

　スプライトで表示する画像は以下のようにスプライトのimageプロパティにgame.assets[]で指定します。画像はpreload()メソッドであらかじめ読み込ませておく必要があります。

ball.image = game.assets["images/ball.png"];

　スプライトの表示位置はx, yプロパティで設定します。スカッシュではボールの移動量も必要なので、以下のようにdx, dyプロパティに移動量を設定します。

ball.x = 0;   // X座標
ball.y = 0;   // Y座標
ball.dx = 3;    // X方向の移動量
ball.dy = 5;    // Y方向の移動量

　スプライトの設定が終わったらラベルと同様にaddChild()メソッドを使ってシーンに登場させます。スカッシュでボールを打ち返すパドルも同様にスプライトとして定義します。ここまでをまとめると以下のようになります。

// ボールの設定
var ball = new Sprite(16, 16);
ball.image = game.assets["images/ball.png"];
ball.x = 0;   // X座標
ball.y = 0;   // Y座標
ball.dx = 3;    // X方向の移動量
ball.dy = 5;    // Y方向の移動量
game.rootScene.addChild(ball);
// パドルの設定
var pad = new Sprite(32, 16);
pad.image = game.assets["images/pad.png"];
pad.x = game.width/2; // X座標
pad.y = game.height - 40; // Y座標
game.rootScene.addChild(pad);