enchant.jsでキャラクタを動かそう! (4/5)

では、ゲームの領域にキャラクタを表示させましょう。キャラクタは、あらかじめ用意しておいたイメージファイルを読み込んでヒョ持します。今回は、簡単なキャラクタを表示するつもりですので、ごくシンプルなイメージファイルを１つ用意しておきましょう。以下のように作成しておいて下さい。また可能であれば、キャラクタの周辺部を透過色に設定しておきましょう。

大きさ：100×100ドット
ファイル名：character1.png

作成したイメージファイルは、HTMLファイルやスクリプトファイルと同じ場所に置いて下さい。これを読み込んで表示させることにしましょう。

下のリスト欄に、スクリプトを掲載しておきます。それぞれで用意しておいたスクリプトファイルに、以下のように記述をして下さい。書き終えたら、用意しておいたHTMLファイルをWebブラウザで開いてみましょう。作成したイメージのキャラクタが画面に表示されます。なお、IEを利用している場合、「スクリプトの利用を許可するか」と尋ねる表示が現れると思いますので、そのまま許可して下さい。

ここでは、イメージをキャラクタとして表示しています。enchant.jsでは、ゲームのキャラクタは「Sprite」というオブジェクトとして用意されます。スプライトといっても、大昔のMSXなんかで使われたスプライト（限られたハードでキャラクタを合成し動かす技術）とは天と地ほども違いますが、このスプライトを作り、ゲームに組み込むことでキャラクタを利用できるようになるのです。では、今回のポイントを整理しておきましょう。

●Gameオブジェクトの準備●

1. イメージファイルのプレロード

game.preload("character1.png");

まず、キャラクタで利用するイメージファイルをあらかじめ読み込んでおきます。これはGameオブジェクトの「preload」を使います。引数にファイル名を指定することで、そのイメージファイルをあらかじめ読み込みます。ここでは１つだけですが、複数ある場合は、

game.preload("character1.png", "character2.png", ……);

こんな具合にいくつも引数に指定してまとめて読み込むこともできます。

●スプライトの作成●

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

var char1 = new Sprite(100, 100);

スプライトであるSpriteオブジェクトは、newで作成します。引数には、スプライトの横幅と高さをそれぞれ指定します。これは、表示するイメージサイズと必ずあわせておきましょう。

3. 表示イメージの設定

char1.image = game.assets["character1.png"];

スプライトで使用するイメージを設定します。表示イメージは、Spriteの「image」プロパティとして用意されています。これに使用イメージを指定してやります。

先ほどイメージファイルをプレロードしておきましたね？　プレロードされたイメージは、Gameオブジェクトの「assets」というプロパティにまとめられています。このプロパティの値は連想配列になっており、読み込んだファイル名をキーに指定することでそのイメージを取得することができます。

4. スプライトの位置設定

char1.x = 100;
char1.y = 100;

スプライトの表示位置は、Spriteに用意されている「x」「y」というプロパティで指定されます。これらに横位置と縦位置を指定すればそこに移動します。

●シーンについて●
続いて、「シーン」に関する設定を行います。――enchant.jsのゲーム画面では、「シーン（Scene）」という概念が用意されています。これは、文字通り「場面」を管理するものです。例えば、ゲームでもある場面から別の場面に切り替わったりすることはよくありますね？　こうしたとき、あらかじめ幾つかのシーンを用意しておいて、それを切り替えるわけです。

ここでは、Gameの「ルートシーン」というものを使うことにします。これはゲームで最初に表示される基本となるシーンです。このシーンは、Gameオブジェクトの「rootScene」というプロパティとして用意されています。このプロパティに設定されているルートシーンのSceneオブジェクトを操作することで、デフォルトで表示されるシーンの設定などが行えます。

5.ルートシーンの背景色設定

game.rootScene.backgroundColor = "#ffaaaa";

ルートシーンの背景色は、rootSceneの「backgroundColor」というプロパティとして用意されています。これはスタイルシートのbackground-colorと同様のものと考えていいでしょう。色名や16進数で色の値を指定します。

6. スプライトをシーンに追加する

game.rootScene.addChild(char1);

作成したSpriteオブジェクトをSceneオブジェクトに追加します。これはSceneの「addChild」というメソッドを使います。これで、キャラクタのスプライトがそのシーンに追加され、表示されるようになります。


――後は、Gameをstartすれば、画面にキャラクタが表示されます。まだ何もスプライトの動きなどは設定していませんが、しかしstartをしないと画面には表示されないので注意して下さい。「ただ表示するだけだからstartしなくてもいいだろ」なんて考えないように。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

enchant();

window.onload = function(){
	var game = new Game(400, 300);
	game.preload("character1.png");
	
	game.onload = function(){
		var char1 = new Sprite(100, 100);
		char1.image = game.assets["character1.png"];
		char1.x = 100;
		char1.y = 100;
		game.rootScene.backgroundColor = "#ffaaaa";
		game.rootScene.addChild(char1);
	};
	
	game.start();
};