Index

開発の基本

enchant.js は JavaScript のゲーム開発用ライブラリです。

enchant.js を用いて作られたゲームは任意の Web サイトに設置できます。 enchant.js を用いて作られたゲームは div 要素中に構成され、他の Web ページを構成する要素からは独立して動作します。

基本的な作成方法としては、記述したコード (およびそのアプリケーションに必要なデータファイル、 enchant.js を含むライブラリファイル) を1つのフォルダに格納します。ユーザーは、サーバにアップロードされたこのフォルダの index.html にアクセスすることでゲームを実行します。

ゲームを構成する要素

enchant.js でゲームを作るにはいくつかの要素を組み合わせます。基本的な要素は、以下のタイプがあります。

Game オブジェクト

Game オブジェクトは、ゲーム全体を管理し、動かすシステム、つまりゲームの基本的な機能を提供します。すべてのゲームは、 Game オブジェクトを中心に動作します。

各 Game オブジェクトには、デフォルトで1つの Scene オブジェクトが rootScene という名前で割り当てられます。

また、1つの Web ページに複数ゲームを作成することも可能ですが、その場合は Game オブジェクトもゲームの数だけ存在することになります。

Scene オブジェクト

Scene オブジェクトは、ひとまとまりになった視覚要素です。ゲームで用いる表示要素の多くを占める Node オブジェクトを束ねることができます。たとえば、スタート画面があるゲームにおいては、ゲームのスタート画面の Scene オブジェクトやプレイ画面の Scene オブジェクトが考えられます。

ゲームは、1つの Scene オブジェクトで構成することも、複数の Scene オブジェクトで構成することもできます。簡単なゲームであれば、 rootScene に要素を追加したり、消したりしていくことで画面遷移を行うことも可能です。

また、 Scene オブジェクトは階層上に重ねることができます(スタック管理されます)。たとえば、シューティングゲームのように、ゲーム画面中にスコア表示のあるゲームなどでは、実際のプレイ画面の Scene オブジェクトの上にスコア表示の Scene オブジェクトを重ねる、といった使い方が考えられます。

Node オブジェクト

Node オブジェクトは、ゲームを構成する視覚要素です。実際は Node オブジェクトを継承したオブジェクトが使わます(以下 Node 系オブジェクトとします)。 Node 系オブジェクトには以下のようなものがあります。

  • Sprite オブジェクト:図や画像を表示するオブジェクト
  • Label オブジェクト:文字を表示するオブジェクト
  • Map オブジェクト:ゲームマップを表示するオブジェクト

ゲームのライフサイクル

ゲームにはライフサイクルがあります。ゲームは、 enchant.js の初期化から始まり、その後いろいろなプロセスを経て進行していきます。実際は別のページに移ったり、ブラウザを閉じたりしたときがゲームの終わりですが、開発においては様々な終わり方があります。例えば、終了画面を出したり(スコアボードと一緒に)、メニューに戻ったり・・・。メニューに戻ったりする場合には終了しないことも多いでしょう。

つまり、 enchant.js を用いて作るゲームにおいて、終わりはさほど重要ではありません。よってここでは、初期化から、ゲーム中の一般的な状態遷移に関して説明します。

初期化

enchant.js を用いて作るゲームの初期化プロセスは次の形で進行します。

  1. enchant.js の初期化
  2. Game オブジェクトの作成
  3. Game オブジェクトの初期設定
    • 素材のプリロード設定
    • 動作初期時のゲームコードのセット
  4. ゲームの動作開始
  5. ゲームの動作、プリロード完了待ち
  6. 動作初期時のゲームコードの実行

このうち、素材のプリロードの設定は必要な場合のみになります。 これを実現する一般的なコードを以下に示します。

enchant();

var game = new Game(320, 320);
game.preload('preload1.gif', 'preload2.wav');
game.onload = function () {
  // ここに処理を書いていきます。
};
game.start();

1. enchant.js の初期化

1行目により、 enchant.js は初期化されます。これによって、そのページ中のどこであっても、 enchant.js のオブジェクトや関数が使えるようになります。

2. Game オブジェクトの作成

3行目により、 Game オブジェクトを作成します。 Game オブジェクトは前述の通り、ゲームの中心となる部分で、画面も行います。そのため、 Game オブジェクトを初期化するときに画面の解像度を指定します。このコードの場合、縦 320 px 、横 320 px のゲーム画面を持つ Game オブジェクトを生成することになります。

3. Game オブジェクトの初期設定

Game オブジェクトの初期設定を行います。ここでは4行目から7行目をそれに当てています。また、 Game オブジェクトの初期化に関しては、ここに記述したほかにも fps 設定等があります。

4. 素材のプリロードの設定

4行目により、素材のプリロードを設定します。詳細は 素材のプリロードを行うには を参照してください。

5. 動作初期時のゲームコードのセット

5から7行目で、ゲームが動作開始したときのゲームコードをセットします。一般にここではじめのシーンを作ったり、メニュー処理を作ったりします。

6. ゲームの動作開始 / ゲームの動作、プリロードの完了待ち

8行目により、ゲームの動作開始を行います。この行は動作開始指示のみを出して、実際に動作が開始するまでここで待っている訳ではなく、先に進んでしまいます。そこで、実際にゲームが動作したときは game.onload が呼び出されます。なので、8行目より後になにもコードを記述しなければ、いったんそこで処理は終了し、次は準備が完了し、ゲームが動作するまで待機することになります。

7. 動作初期時のゲームコードの実行

プリロード等が終了しゲームが開始すると、再び処理が再開されます。そのとき、処理は、5〜7行目の game.onload にセットされた部分が実行されます。一般にここに自分で作るゲームのコードを書いていく形になります。

また、ゲームが大きくなってきたときは、ここにゲームが動作しはじめたときのコードだけ、たとえばメニューだけ書いて、実際のゲームのコードは別のところにかいて、ここから呼び出したり呼び出せるようにしたりします。

状態遷移とイベント

enchant.js を用いて作るゲームにおいては、いくつかの状態が存在します。そして、それぞれの状態に応じて、イベントと呼ばれるものが発行されます。ゲームを作るには、それぞれのイベントが起こったときにどういう処理をするかを記述していくことになります。

以下に主要なイベントを列挙します

  • ENTER_FRAME :フレーム開始時に発生します
  • A_BUTTON_DOWN :A ボタンが押されたときに発生します
  • B_BUTTON_DOWN :B ボタンが押されたときに発生します
  • DOWN_BUTTON_DOWN カーソルキーの↓ボタンが押されたときに発生します
  • LEFT_BUTTON_DOWN カーソルキーの←ボタンが押されたときに発生します
  • RIGHT_BUTTON_DOWN カーソルキーの→ボタンが押されたときに発生します
  • UP_BUTTON_DOWN カーソルキーの↑ボタンが押されたときに発生します

その他詳細なイベント情報は enchant.js のドキュメント を確認してください。

逆引きリファレンス

注意事項

以下逆引きは、 enchant.js が初期化されていることを前提にすべて話を進めます。初期化は下記のテンプレートを参考にしてください。

また、「基本(描画)」においては、適当な scene が作成されていることを前提にサンプルが書いてある場合があります。ご了承ください。

逆引きに掲載されているクラスやメソッドでわからないことがあったときは、enchant.js のドキュメント を参照してください。

enchant.js のテンプレート

enchant();
window.onload = function () {
  var game = new Game(320, 320);
  game.onload = function () {
    // ここに処理を書いていきます。
  };
  game.start();
}

基本(描画)

Scene を作る/消すには

Scene を作成します。Scene は、

  1. 作成する
  2. Node を追加する
  3. pushScene する

の3ステップで使います。 pushScene すると、画面に Scene が表示されます。

var scene = new Scene();
game.pushScene(scene);
// node を追加する例
scene.addChild(sprite);

一度表示した Scene を消すには popScene を使います。

game.popScene(); 

画像を出すには

画像を出すには、Sprite を使います。

var sprite = new Sprite(64, 64); sprite.image = game.assets['chara0.gif']; scene.addChild(sprite); 

画像を出すためには、事前に画像をロードしておく必要があります。

window.onload = function () { enchant(); var game = new Game(320, 320); game.preload('chara0.gif'); game.onload = function() { var scene = new Scene(); var sprite = new Sprite(32, 32); sprite.image = game.assets['chara0.gif']; scene.addChild(sprite); game.pushScene(scene); }; game.start(); }; 

サンプル

関連項目

画像を消すには

Sceneの addChildメソッドで画像を表示できますが、逆に画面から消すためにはremoveChildメソッドを使います。

// 画面からspriteを消す game.rootScene.removeChild(sprite) 

文字を出すには

文字を出すには、 Label を使います。

var label = new Label("test"); scene.addChild(label)
 window.onload = function () { enchant(); var game = new Game(320, 320); game.onload = function () { var scene = new Scene(); var label = new Label("test"); scene.addChild(label); game.pushScene(scene); }; game.start(); }</pre>
<a>サンプル</a>

<h4 id="ref_3">音をならすには</h4>
音を鳴らすには、 Sound の play メソッドを使います。
1game.assets['audio.wav'].play(); 

音は、 Node の一種ではないので、Sprite や Label のように Scene に登録する必要はありません。また、音を鳴らすには事前にサウンドファイルをロードしておく必要があります。

enchant();
window.onload = function () {
  var game = new Game(320, 320);
  game.preload('jump.wav');
  game.onload = function() {
    game.assets['jump.wav'].play();
  };
  game.start();
};

サンプル

関連項目

基本(制御)

素材を読み込むには

ゲーム中に素材を読み込むには、 game の load メソッドを使います。load メソッドでは、画像・音楽と必要なファイルはすべて読み込みできます。

game.load('imagefile.png' function () {
// 読み込みが完了したときの処理
});

load メソッドは1ファイルしかロードすることができません。複数ファイルをロードするには、ロードする回数 load メソッドを呼び出す必要があります。複数のファイルを読み込むのであれば、プリロードが便利です。

// 画像を load してから、画面に描画するサンプル

関連項目

フレーム処理をするには

フレーム処理を行うには、ENTER_FRAME イベントを用います。毎フレームごとに ENTER_FRAME イベントが発行されるので、それへ登録したメソッドが毎フレームのはじめに呼ばれることになります。

game.addEventListener('enterframe', function () {
  // ここに処理を書きます。
});

 

// 画像が右へ動いていくサンプル
enchant();
window.onload = function () {
    var game = new Game(320, 320);
    game.preload('chara0.gif');
    game.onload = function() {
        var scene = new Scene();

        var sprite = new Sprite(32, 32);
        sprite.image = game.assets['chara0.gif'];
        scene.addChild(sprite);

        game.addEventListener('enterframe', function() {
          sprite.x += 1;
        });
        game.pushScene(scene);
    };
game.start();
};

タッチ(クリック)を処理するには

タッチ(クリック)を処理するには、 TOUCH_START/TOUCH_END イベントを用います。 TOUCH_START はタッチしたとき、またはマウスのボタンを押したときに発行されるイベントです。他方 TOUCH_END はタッチを離したとき、またはマウスのボタンを離したときに発行されます。

これらのイベントは、 Node オブジェクトが発行します。タッチを処理したいオブジェクトにメソッドを登録します。

sprite.addEventListener('touchend', function() {
  // ここに処理を書きます。
}); 

 

// 画像をクリックすると画像が右へ動いていくサンプル
enchant();
window.onload = function () {
    var game = new Game(320, 320);
    game.preload('chara0.gif');
    game.onload = function() {
        var scene = new Scene();

        var sprite = new Sprite(32, 32);
        sprite.image = game.assets['chara0.gif'];
        scene.addChild(sprite);

        sprite.addEventListener('touchstart', function() {
            sprite.x += 1;
        });

        game.pushScene(scene);
    };
    game.start();
};

サンプル

マップ

マップとは

マップとは、 enchant.js に備え付けられた便利な機能の1つで、マップをつかうと、平面の RPG でみられるようなマップが簡単に作成できます!

マップ機能を使うには

  • タイルセット
  • マップデータ

を用意します。

タイルセットというのは、マップの1マス1マスに置かれる画像を集めた画像のことです。

tileset image

マップデータというのは、マップ1マス1マスに、タイルをどのように敷き詰めるのかというデータのことで、 JavaScript の配列として用意します。

var baseMap = [
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0]
];

マップを作るには

マップを作るには、 Map オブジェクトを使います。

// Map を作って描画する
var map = new Map(16, 16);
map.image = game.assets['map0.gif'];
var map = [
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0]
];
map.loadData(map);

scene.addChild(map);

説明すると、

  1. Map オブジェクトを生成する
  2. ロードしたタイルセット画像を Map オブジェクトの image プロパティに渡す
  3. マップデータ( Array )を Map オブジェクトの loadData メソッドに渡す
  4. Map オブジェクト準備完了

そして、描画準備の完了した Map オブジェクトをシーンへ addChild して表示しています。

マップ上に障害物があるか判定するには

マップ上に障害物があるかどうか確認するには、 Map オブジェクトの hitTest メソッドを使います。

hitTest メソッドを用いて障害物判定をするには、まず障害物のマップデータ(0、1のニ値)をつくり、それを Map オブジェクトの collisionData プロパティに読ませる必要があります。

// 障害物を判定する
var map = new Map(16, 16);
map.image = game.assets['map0.gif'];
var map = [
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0],
  [  0,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  2,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  2,  2,  2,  2,  2,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0]
];
map.loadData(map);

var colMap = [
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0],
  [  0,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  1,  0,  0],
  [  0,  1,  1,  1,  1,  1,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  1,  1,  1,  1,  1,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  1,  1,  1,  1,  1,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
  [  0,  1,  1,  1,  1,  1,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0]
];
map.collisionData = colMap;

if (map.hitTest(100,100) === true) {
  alert('hit!');
}

スプライト

スプライトを移動するには

スプライトを移動するには、 Sprite オブジェクトの x, y プロパティを変更します。

// スプライトをx = 100, y = 20 の位置に表示する
sprite.x = 100; sprite.y = 20; 

また、 Sprite オブジェクトの x, y プロパティは現在の場所を保持しているので

// スプライトを左へ 10 動かす
sprite.x -= 10;

このように、現在地からの相対的な移動も可能です。

スプライトを回転/拡大縮小するには

スプライトを回転するには、 Sprite オブジェクトの rotate メソッドを使います。

// スプライトを120度回転させる
sprite.rotate(120);

このコードからわかるように、角度の単位は度数法です。 また、現在の角度は Sprite オブジェクトの rotation プロパティから取得できます。

// スプライトの現在の角度を見る
console.log(sprite.rotation);

スプライトを拡大縮小するには、 Sprite オブジェクトの scale メソッドを使います。

// スプライトの横幅を2倍にする
sprite.scale(2, 1); 

また、現在の倍率を知るには、角度同様に Sprite オブジェクトの scaleX, scaleY プロパティを参照します。

// スプライトの現在の倍率を見る
console.log(sprite.scaleX);
console.log(sprite.scaleY);

スプライトを透明にするには

スプライトを透明にするには、 Sprite オブジェクトの opacity プロパティを使います。

// スプライトを透明度 50% にする
sprite.opacity = 0.5; 

opacity は 1 – 0 の間の値を取り、 1 が不透明、 0 が完全な透明です。

スプライトにCanvasを使うには

スプライトでは、描画要素として、画像のかわりに HTML5 で規定される Canvas 要素を用いることができます。 Canvas 要素をスプライトの描画要素として用いために、 Surface オブジェクトが用意されています。

// Canvas 要素をスプライトの描画要素として用いる
var surface = new Surface(320, 320);
sprite.image = surface;

Surface オブジェクトをスプライトへ用いる場合は、画像と同じように、 image プロパティへ代入すれば利用可能です。

また、 Canvas 要素で用いることができる数々のメソッドについても Surface オブジェクトが提供します。それらに関してはenchant.js のドキュメント を確認してください。

スプライトで衝突判定を行うには

スプライトとスプライトが衝突しているかどうか判定を行うには、 intersect, within メソッドを用います。

intersect メソッドは、スプライトの領域が衝突しているか、によって判定します。たとえば、スプライトを 64, 64 の大きさで作成して、絵は 30, 30 で描いてあったとしても、判定は 64, 64 の領域で行われるので、注意が必要です。

// sprite が sprite2 と衝突しているかどうか判定
if(sprite.intersect(sprite2)) {
  alert("hit!");
}

within メソッドは、スプライトの中心と中心の間の距離がどれくらい近いかで判定します。

// sprite が sprite2 と衝突しているかどうか判定(2) if(sprite.within(sprite2, 40)) { alert("hit!"); } 

文字(ラベル)

文字色・フォントを変えるには

ラベルの文字色を変更するには、 Label オブジェクトの color プロパティを使います。

// ラベルの色を赤に
label.color = '#f00';

ここで色指定のために渡す文字列は CSS で使える指定方法を使います。

たとえば、

  • #123
  • #123456
  • black

のようなものがあります。

ラベルのフォントを変更するには、 Label オブジェクトの font プロパティを使います。

// ラベルのフォントを変える
label.font = "8px cursive";

ここでフォント指定のために渡す文字列は CSS の font プロパティで使える指定方法を使います。

(注意:これは font であって font-family ではないです。つまり、最低限 font-size と font-family を指定しないと動作しません)

文字を移動するには

ラベルを移動するには、 Label オブジェクトの x, y プロパティを変更します。

// ラベルをx = 100, y = 20 の位置に表示する
label.x = 100;
label.y = 20;

また、 Label オブジェクトの x, y プロパティは現在の場所を保持しているので

// ラベルを左へ 10 動かす
label.x -= 10;

このように、現在地からの相対的な移動も可能です。

文字を透明にするには

ラベルを透明にするには、 Label オブジェクトの opacity プロパティを使います。

// ラベルを透明度 50% にする
label.opacity = 0.5;

opacity は 1 – 0 の間の値を取り、 1 が不透明、 0 が完全な透明です。

その他

シーンの背景色を変えるには

シーンの背景は、 Scene オブジェクトの backgroundColor プロパティを使います。

// シーンの背景を赤にする
scene.backgroundColor = 'red';

ここで色指定のために渡す文字列は CSS で使える指定方法を使います。

ゲームのfpsを変えるには

ゲームの fps を変更するには、 Game オブジェクトの fps プロパティを使います。

// ゲームの fps を 30fps にする
game.fps = 30;

ただし、この変更は game.start() を実行する前に変更しないと有効にはなりません。つまり、ゲーム動作中に fps を可変させることは不可能です。

ゲーム画面の倍率を変えるには

ゲーム画面の倍率を変更するには、 Game オブジェクトの scale プロパティを使います。

// ゲーム画面を2倍の大きさにする
game.scale = 2;

ただし、この変更は game.start() を実行する前に変更しないと有効にはなりません。つまり、ゲーム動作中に scale を可変させることは不可能です。

ロード時に表示されるシーンを変えるには

ロード待ち画面を変えるには、 Game オブジェクトの loadingScene プロパティを上書きします。

// ロード待ち画面を書き換える
game.loadingScene = myscene;

ロード待ち画面なので、当然 game.start() 実行前に上書きする必要があります。

素材のプリロードを行うには

enchant.js では game.start() 実行時に素材をまとめてプリロードすることができます。

// 素材をプリロードする
game.preload('data1.jpg', 'data2.png', 'data3.wav'); 

上記のように、素材は複数カンマで並べることができます。1つでも使えます。

This post is also available in: 英語