このページの本文へ

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

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

2012年07月19日 11時40分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

ゲーム画面の設定

 (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);
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング