DXScriptでゲーム作成 その１

リリースしてからすっかり放置してしまったので、ここらでチュートリアル的なものを書いてみることにします。
今回はキャラクターを表示して、アニメーションさせるところまで行ってみます。

---

１．準備
DXScript.zipを解凍し、sample1フォルダを作って↓のような階層にします。
DXScriptフォルダ直下のmain.jsをsample1フォルダにコピーします。

\DXScript
　　\sample1　　　　⇐作成
　　　　main.js　　⇐作成

キャラクターの画像も用意しましょう。
今回は同人サークル「はちみつくまさん」の東方素材蒐をお借りします。

霊夢の歩行絵(霊夢歩行絵.png)をreimu_walk.pngと名前変更し、sample1フォルダの下に置きます。
\DXScript
　　\sample1
　　　　main.js
　　　　reimu_walk.png　　　　⇐new

さらに、GIMPなどで画像背景の緑色の部分を透過色にしておきましょう。

---

２．コンフィグファイルの変更
DXScriptフォルダ直下にあるconfig.jsをテキストエディタで開きます。
一番下にあるdxs.scriptsの部分を修正します。

/** 読み込む外部スクリプト/プラグイン */
dxs.scripts = [
	'dxs.js',
	'dxsf\\class.js',
	'dxsf\\dxsf.js',
	'sample1\\main.js' // sample1フォルダのmain.jsを読み込むように修正
];

---

３．画像の表示
ここからはプログラミングをしていきます。
sample1フォルダの下のmain.jsに書きこんでいきます。
dxsf(DXScriptの補助フレームワーク)はenchant.jsのような感じで使うことができます。

完成品はこちら(sample1.zip)

dxs.onLoad = function()
{
	var game = new Game(); // 1
	game.loadImages('sample1\\reimu_walk.png'); // 2
	
	var scene = new Scene(); // 3

	var player = new Sprite(48, 64); // 4
	player.x = 0;
	player.y = 480 - player.height;
	player.image = game.assets['sample1\\reimu_walk.png']; // 5
	
	scene.addChild(player); // 6
	game.pushScene(scene);

1-Gameクラスのインスタンスを生成します。
基本となるクラスです。
enchant.jsとは異なり引数がありません。
あと、game.start()が不要です。

2-画像を読み込みます。
ここで、

game.loadImages('sample1\\reimu_walk.png', 'sample1\\marisa_walk.png');

のように複数のファイルを読み込ますこともできます。(今回は１ファイルですが)

3-Sceneクラスのインスタンスを生成します。

4-Spriteクラスのインスタンスを生成します。
Spriteクラスは画像を扱うクラスです。
引数は表示領域のサイズです。
のちのちプレーヤーが操作できるようにするので、playerという名前にしておきます。
描画するX座標、Y座標をセットします。

※デフォルトでは画面サイズは640＊480です。なのでplayer.y = 480 - player.heightとしています

5-playerが描画する画像をセットしています。
2で読み込んだ画像はgame.assetsに蓄えられています。

6-playerをsceneへ、sceneをgameへセットします。
game->scene->各アイテムと階層構造になっています。

これで、画面左下に霊夢が表示されるはずです。

---

４．歩行アニメーション
歩行アニメーションをさせましょう。
とりあえず右方向にひたすら歩くようにします。
（移動はしません）

	// 歩くのに必要な情報
	var walkImageNum = [0, 1, 2, 1]; 
	// 向き変更関数 0:↑ 1:→ 2:↓ 3:←
	player.setDirection = function(direction) { // 1
		player.direction = direction;
		player.walkImageNumIndex = 0;
		player.animationStep = 0;
		player.animationSpeed = 5;
		player.frame = 3 * player.direction; // 2
	}
	
	// 初期方向をセット
	player.setDirection(1);
	
	player.addEventListener(ONFRAME, function() { // 3
		player.animationStep = (player.animationStep + 1) % player.animationSpeed;
		if (player.animationStep != 0) {
			return;
		}
		var offset = walkImageNum[player.walkImageNumIndex];
		player.frame = 3 * player.direction + offset;
		
		// 画像indexを増やす
		player.walkImageNumIndex = (player.walkImageNumIndex + 1) % walkImageNum.length;
	});
}

1-キャラクターの向きを変更する処理を関数化しておきます。
生成したインスタンスにあとから変数を追加できるのがjavascriptの強み。
playerに方向を表す変数やアニメーション制御用の変数を追加＆初期化しています。

2-frame変数は画像全体のうち、どの部分を表示するかを制御します。
reimu_walk.pngは３×４の絵が描かれた画像なので、例えばframe = 3だと左から１つ目、上から２つ目の絵が表示されます。

3-イベントリスナを定義して、アニメーションの処理を記述します。
ONFRAMEイベントは各フレームごとに発生するイベントです。
（デフォルトでは30FPS）
他にはマウスやキーボードのイベントなどを定義してあります。

さすがに１秒間に30回絵が書き換わると速くて見えないので、５フレームに一度処理を行うようにしています。
player.directionなどから計算してplayer.frameの値を変更することで、表示される絵を変更します。

---