スプライトを使いこなそう！ (3/5)
作成:2012-09-23 11:21
更新:2012-09-23 11:21
更新:2012-09-23 11:21
■キーボードで動かそう
キャラクタを動かせるようになったら、次に行うのは「ユーザーの操作に応じてキャラクタを動かす」ということでしょう。もっともインターフェイスとして多用されるのは「キーボード」でしょう。パソコンでは上下左右の矢印キーを使ってキャラクタを動かすことができます。
これも先にサンプルスクリプトを掲載しておきましょう。下のリスト欄のスクリプトを記述して実際に動かしてみて下さい。ページをロードすると、キャラクタが停止したままイメージを切り替えながら表示されます。上下左右の矢印キーを押すと、キャラクタを動かすことができます。
ここでは、ENTER_FRAMEのイベント処理部分で、キーが押された時の処理を追加しています。これは以下のようになっています。
Gameオブジェクトの中にある「input」というプロパティに、入力に関する情報が整理されています。この中の「up」「down」「left」「right」というプロパティに、それぞれ上下左右の矢印キーが押されているかどうかを示す値が保管されます。これらはいずれも真偽値で、trueならば押されている状態、falseならばキーが離されている状態であることを示します。
これらを個別にチェックし、trueならばそのキーが押されているものとして処理を用意すればよい、というわけです。今回の例では、moveByを使って位置を上下左右に移動させていた、というわけです。使い方がわかれば、キーによるキャラクタの移動は割と簡単ですね。
これも先にサンプルスクリプトを掲載しておきましょう。下のリスト欄のスクリプトを記述して実際に動かしてみて下さい。ページをロードすると、キャラクタが停止したままイメージを切り替えながら表示されます。上下左右の矢印キーを押すと、キャラクタを動かすことができます。
ここでは、ENTER_FRAMEのイベント処理部分で、キーが押された時の処理を追加しています。これは以下のようになっています。
if (game.input.up){ ……略…… }
if (game.input.down){ ……略…… }
if (game.input.left){ ……略…… }
if (game.input.right){ ……略…… }
Gameオブジェクトの中にある「input」というプロパティに、入力に関する情報が整理されています。この中の「up」「down」「left」「right」というプロパティに、それぞれ上下左右の矢印キーが押されているかどうかを示す値が保管されます。これらはいずれも真偽値で、trueならば押されている状態、falseならばキーが離されている状態であることを示します。
これらを個別にチェックし、trueならばそのキーが押されているものとして処理を用意すればよい、というわけです。今回の例では、moveByを使って位置を上下左右に移動させていた、というわけです。使い方がわかれば、キーによるキャラクタの移動は割と簡単ですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
enchant();
window.onload = function(){
var game = new Game(400, 300);
game.preload("character2.png");
game.fps = 20;
game.onload = function(){
var char1 = new Sprite(100, 100);
char1.image = game.assets["character2.png"];
char1.x = 0;
char1.y = 0;
char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
this.frame = this.age % 2;
if (game.input.up){ this.moveBy(0, -5); }
if (game.input.down){ this.moveBy(0, 5); }
if (game.input.left){ this.moveBy(-5, 0); }
if (game.input.right){ this.moveBy(5, 0); }
});
game.rootScene.backgroundColor = "#ffaaaa";
game.rootScene.addChild(char1);
};
game.start();
};
※関連コンテンツ
「初心者のためのenchant.jsゲームプログラミング入門」に戻る