DXScriptでゲーム作成 その２

前回はキャラクターの歩行アニメーションまで実装しましたので、次はキーボードで移動できるようにします。
キーボードの左右キーで横移動、スペースキーでジャンプさせます。

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

---

１．移動処理
移動処理を記述します。
移動はプレーヤーオブジェクトに"速度"を持たせ、毎フレームごとにその時点の速度に応じて座標を移動させる方式をとります。
こうすると移動させたいときはその方向への速度を持たせれば勝手に移動していくので、後々移動処理を作るのが楽になります。
ジャンプも直感的に書けたり。

	// 移動に必要な情報  // 1
	player.vSpeed = 0; // 縦方向速度
	player.hSpeed = 0; // 横方向速度
	var vSpeed = -6;   // ジャンプ速度
	var vAccel = 0.2;  // 重力
	var hSpeed = 4;    // 歩き速度
	// 画面サイズを取得
	var screen = dxs.GetScreenState();  // 2
	var screenWidth = screen[0];
	var screenHeight = screen[1];
	
	// イベントリスナ
	player.addEventListener(ONFRAME, function() { // 3
		player.y += player.vSpeed;
		player.x += player.hSpeed;
		
		// 範囲チェック
		if (player.y < 0) player.y = 0;
		if (player.y > screenHeight - player.height) player.y = screenHeight - player.height;
		if (player.x < 0) player.x = 0;
		if (player.x > screenWidth - player.width) player.x = screenWidth - player.width;
		
		// 上方向の速度を減速
		player.vSpeed += vAccel;
	});

1-playerに縦方向と横方向の速度を変数に持たせます。
さらに縦横の移動速度と重力を定義。
ジャンプはy座標が減る方向への移動なので、数値がマイナスです。
逆に重力はプラスの数値。

この重力が小数点になっていることが微妙なポイントです。
DXライブラリはC言語なので、描画関数の座標は通常整数型になります。
小数点を使って座標を表したいときは、実数型を引数に取る〜F系(DrawGraphFとか)の描画関数に切り替える必要があります。

DXScriptはjavascriptなので、型を気にせず整数型でも実数型でも突っ込むことができます。
（実数型は小数点以下切捨てしてDXライブラリに渡されます）
整数型で作っていたけど途中で実数型に変えたい、というときも何も変更無しでできたりするわけです。

2-画面サイズを取得しています。
初のDXライブラリ関数呼び出しです。
DXライブラリの関数は頭に「dxs.」をつけると大体使えます。　★重要

ここもポイントがありまして、GetScreenState()は元々

int GetScreenState( int *SizeX , int *SizeY , int *ColorBitDepth );

で定義されている関数です。
引数に変数のポインタを渡して画面サイズを取得します。

javascriptはポインタなんぞなく、引数も値渡しなのでこの形の関数は成り立ちません。
なのでDXScriptは引数にポインタを渡して値を取得する関数は、代わりに値を入れた配列を返します。　★重要

このサンプルコードでは戻り値のscreen[0]にSizeXの値、screen[1]にSizeYの値、あと今回は使ってませんがscreen[2]にColorBitDepthの値が入っています。

3-イベントリスナを定義して、毎フレームごとに速度を適用する処理を記述します。
ONFRAMEイベントは前回歩行アニメーションで使用していますが、dxsfでは同じイベントに対して複数のイベントリスナを持つことが可能です。

現在の速度に応じて座標を移動し、画面からはみ出さないように範囲チェックをしています。
重力を適用して、縦方向の速度を減らします。

---

２．キー判定
キーを押されたら左右移動とジャンプを行う処理を記述します。
キーの状態を取得する関数はGetHitKeyStateAll()ですが、今回はせっかくなのでジョイパッドも使えるようにしてしまいましょう。
DXライブラリのGetJoypadInputState()関数はジョイパッドの状態だけでなく、キーが押されている場合にパッドのボタンが押されているように扱ってくれます。

	// パッドイベントを処理
	player.addEventListener(JOYPADCHANGED, function(id, padnum, button, old) { // 1
		var space = (button & dxs.PAD_INPUT_10); // 2
		var oldspace = (old & dxs.PAD_INPUT_10);
		if (space && (space != oldspace)) { // スペースキーが押された場合
			player.vSpeed = vSpeed;
		}
		
		var right = (button & dxs.PAD_INPUT_RIGHT);
		var oldright = (old & dxs.PAD_INPUT_RIGHT);
		var left = (button & dxs.PAD_INPUT_LEFT);
		var oldleft = (old & dxs.PAD_INPUT_LEFT);
		
		if (right && (right != oldright)) { // 右キーが押された場合
			player.hSpeed = hSpeed;
			player.setDirection(1);
		}
		else if (left && (left != oldleft)) { // 左キーが押された場合
			player.hSpeed = hSpeed * -1;
			player.setDirection(3);
		}
		else if (!right && !left) { // どちらも押されていない場合
			player.hSpeed = 0;
		}
	});

1-dxsfはGetJoypadInputState()をラップしたJOYPADCHANGEDイベントを用意しています。
ジョイパッドの状態が変化した時イベント発生し、引数に現在と直前のパッドの状態を返します。

2-定数値とビット演算してボタンの状態を取り出しています。
この辺の詳しいことはDXライブラリのサイト参照で。
関数と同じく、定数も頭にdxs.をつけることで使用できます。

１０番のボタン(スペースキー)が押された場合は上方向の速度を与えてジャンプさせます。
左右ボタン(左右キー)が押された場合は横方向の速度を与え、さらに方向変更関数を呼んでアニメーションの向きを変化させます。

---

これでキャラクターが画面上を自由自在に移動することが出来るようになりました。
ここまででコードは改行コメント入れて９４行！
まあぶっちゃけ参考にしたenchant.jsの設計が良いというだけなんですけどね。
ちょっと修正すればenchant.jsにも移植可能なコードになっているので、スマフォプログラミングの参考にもできるかと思います。