たくさんのキャラクタを操作しよう (1/3)
作成:2012-09-30 15:47
更新:2012-09-30 15:47
更新:2012-09-30 15:47
■多数のキャラクタをまとめて動かす
とりあえずキャラクタを表示し操作する基本は前回まででだいたいわかりました。が、たいていのゲームでは「キャラクタが１つだけ」ということはありません。たくさんのキャラクタを操作しなければいけないのが普通です。そこで今回は「多数のキャラクタ利用」について考えていきましょう。
まずは、「同じキャラクタをたくさん表示する」ということを行なってみましょう。キャラクタをたくさん作るのは簡単です。要するに、必要なだけnew Spriteで作ればいいだけですから。繰り返しなどを使い、次々にオブジェクトを作成し、シーンにaddChildすれば、それらがすべて画面に表示されます。
ただし、作ったオブジェクトをきちんと管理しておかないと、後でそれらを操作するときに困ります。ですので、通常は配列などに作ったSpriteを保管しておき、そこにあるオブジェクトを操作することになります。
実際の利用例を下に挙げておきました。３×３でキャラクタを表示しています。上下左右の矢印キーを押せば、９個全部が一斉に上下左右に動きます。ここでは２次元配列をchar_arrに用意し、そこに３×３のSpriteを保管しています。キャラクタの移動はmoveByを呼び出しています。
このような「多数のキャラクタ」を扱う時、つい錯覚してしまいがちなのが「すべてのキャラクタを操作しないといけない」という思い込みです。例えば、ENTER_FRAMEイベントの処理で、game.inputの上下左右キーの状態によってキャラクタをmoveByで動かしていますね。これ、例えば「game.input.upがtrueだったら、繰り返しを使ってすべてのキャラクタを動かさないと……」と思った人、いませんか？
ENTER_FRAMEイベントは個々のSpriteについて設定されており、それぞれのSpriteごとにイベントが発生します。つまり、いくつSpriteがあろうと、イベントでの処理は常に「自分についてだけ処理すればいい」のです。他人の面倒は見る必要ないのですね。
まずは、「同じキャラクタをたくさん表示する」ということを行なってみましょう。キャラクタをたくさん作るのは簡単です。要するに、必要なだけnew Spriteで作ればいいだけですから。繰り返しなどを使い、次々にオブジェクトを作成し、シーンにaddChildすれば、それらがすべて画面に表示されます。
ただし、作ったオブジェクトをきちんと管理しておかないと、後でそれらを操作するときに困ります。ですので、通常は配列などに作ったSpriteを保管しておき、そこにあるオブジェクトを操作することになります。
実際の利用例を下に挙げておきました。３×３でキャラクタを表示しています。上下左右の矢印キーを押せば、９個全部が一斉に上下左右に動きます。ここでは２次元配列をchar_arrに用意し、そこに３×３のSpriteを保管しています。キャラクタの移動はmoveByを呼び出しています。
このような「多数のキャラクタ」を扱う時、つい錯覚してしまいがちなのが「すべてのキャラクタを操作しないといけない」という思い込みです。例えば、ENTER_FRAMEイベントの処理で、game.inputの上下左右キーの状態によってキャラクタをmoveByで動かしていますね。これ、例えば「game.input.upがtrueだったら、繰り返しを使ってすべてのキャラクタを動かさないと……」と思った人、いませんか？
ENTER_FRAMEイベントは個々のSpriteについて設定されており、それぞれのSpriteごとにイベントが発生します。つまり、いくつSpriteがあろうと、イベントでの処理は常に「自分についてだけ処理すればいい」のです。他人の面倒は見る必要ないのですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
enchant();
var char_arr = new Array(new Array(),new Array(),new Array());
window.onload = function(){
var game = new Game(1000, 700);
game.preload("character.png"); // イメージファイルを指定
game.fps = 10;
game.rootScene.backgroundColor = "#ffaaaa";
game.onload = function(){
for(var i = 0;i < 3;i++){
for(var j = 0;j < 3;j++){
var char1 = new Sprite(100, 100);
char1.image = game.assets["character.png"];
char1.x = i * 100;
char1.y = j * 100;
char1.addEventListener(enchant.Event.ENTER_FRAME, function(){
this.frame = this.age % 2;
if (game.input.up){ this.moveBy(0, -1); }
if (game.input.down){ this.moveBy(0, 1); }
if (game.input.left){ this.moveBy(-1, 0); }
if (game.input.right){ this.moveBy(1, 0); }
});
game.rootScene.addChild(char1);
char_arr[i][j] = char1;
}
}
};
game.start();
};
※関連コンテンツ
「初心者のためのenchant.jsゲームプログラミング入門」に戻る