バーチャルパッドの使い方

今回のサンプル
 サンプルの全ファイル
バーチャルパッドを使うには enchant.js に加えて、rpgフォルダに有る ui.enchant.js と pad.png を使います。

HTMLファイルには以下の順番で記載します。

        <script type="text/javascript" src="enchant.js"></script> 
        <script type="text/javascript" src="ui.enchant.js"></script>

ゲームの処理を記述したJavaScriptのファイルでは以下の様に pad.png ファイルをpreloadする必要が有ります。

	var game = new Game(320, 320);
	game.preload('player.png', 'pad.png');

なお、 image/pad.png などフォルダの中に pad.png を指定すると正しく処理されません。HTMLファイルと同じフォルダに pad.png ファイルを置く様にして下さい。

バーチャルパッドはタップした後にスライドさせることで操作出来ます。
それぞれの向きにスライドさせたときに以下のプロパティが true になるので以下の様なプログラムでキャラクターを操作出来ます。

向き	プロパティ
左	game.input.left
右	game.input.right
上	game.input.up
下	game.input.down

		player.addEventListener('enterframe', function(e) {
			if (game.input.left) this.x -= 1.0;
			if (game.input.right) this.x += 1.0;
			if (game.input.up) this.y -= 1.0;
			if (game.input.down) this.y += 1.0;
		});

なお、 game.input.left などの値はカーソルキーの操作にも対応しているので特に設定をしないでも自動的にカーソルキーでもバーチャルパッド同様の操作が可能に成っています。その為、サンプルをPCで表示してカーソルキーを入力するとバーチャルパッド同様にキャラクターが移動するのが確認出来ます。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

バーチャルパッドの使い方

関連情報