back
二次元マップを作ろう！ (5/5)
■ミニ迷路を作ろう
では、collisionDataの利用例として、ごく簡単な迷路を作ってみましょう。といっても、迷路の中をただキャラクタが動きまわるだけの単純なものです。スタートもなければゴールもない、どうすればクリアかといったこともありません。ただ動きまわるだけです。
下のリスト欄にスクリプトを掲載しておきました。先に作った10×10のマップのサンプルを手直ししただけのものです。キャラクタは、「minicharacter.png」というファイル名で用意しています。これは、50×50のイメージを２つ横に並べた形のものにしておきます。この２枚を交互に表示してアニメーションさせておきます。上下左右の矢印キーを押すと、マップ内をキャラクタが移動していきます。
ここでは、キャラクタのフレーム切替時の処理をcharMoveという関数として用意してあります。この中で、上下左右の矢印キーを押したら移動するようにしています。キャラクタの移動は以下のようにして行なっています。
1. 現在の表示位置は、変数hereとして保管しておきます。この中にxとyという値を用意し、そこに現在位置が収められます。
2. まず、hereから現在位置をnx、nyに取り出します。これが次に移動する位置の値になります。
3. game.inputの上下左右の矢印の値をチェックし、それに応じてnx、nyの値に加算減算をして次に移動する場所の位置を設定します。
4. !map.hitTest(nx, ny)をチェックします。これが成立すれば（つまりhitTest(nx, yn)がfalseなら）、通過できるので、nx、nyの値をhereに設定し、moveToでキャラクタを移動します。成立しなければ、移動できないので何もしないで終わります。
「キーの入力などをもとに移動先の位置を計算する」「その位置に移動できるかどうかhitTestでチェックする」「チェックの結果を元に移動の処理をする」――この流れが頭に入れば、マップの移動は作れるようになります。
下のリスト欄にスクリプトを掲載しておきました。先に作った10×10のマップのサンプルを手直ししただけのものです。キャラクタは、「minicharacter.png」というファイル名で用意しています。これは、50×50のイメージを２つ横に並べた形のものにしておきます。この２枚を交互に表示してアニメーションさせておきます。上下左右の矢印キーを押すと、マップ内をキャラクタが移動していきます。
ここでは、キャラクタのフレーム切替時の処理をcharMoveという関数として用意してあります。この中で、上下左右の矢印キーを押したら移動するようにしています。キャラクタの移動は以下のようにして行なっています。
1. 現在の表示位置は、変数hereとして保管しておきます。この中にxとyという値を用意し、そこに現在位置が収められます。
2. まず、hereから現在位置をnx、nyに取り出します。これが次に移動する位置の値になります。
3. game.inputの上下左右の矢印の値をチェックし、それに応じてnx、nyの値に加算減算をして次に移動する場所の位置を設定します。
4. !map.hitTest(nx, ny)をチェックします。これが成立すれば（つまりhitTest(nx, yn)がfalseなら）、通過できるので、nx、nyの値をhereに設定し、moveToでキャラクタを移動します。成立しなければ、移動できないので何もしないで終わります。
「キーの入力などをもとに移動先の位置を計算する」「その位置に移動できるかどうかhitTestでチェックする」「チェックの結果を元に移動の処理をする」――この流れが頭に入れば、マップの移動は作れるようになります。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
var game = null;
var char1 = null;
var map = null;
var here = {x:50, y:50};
enchant();
window.onload = function(){
game = new Game(500, 500);
game.fps = 10;
game.preload("minicharacter.png","mapdata.png");
game.onload = function(){
map = new Map(50, 50);
map.image = game.assets['mapdata.png'];
var data = [
[0,0,0,0,0,0,0,0,0,0],
[0,2,2,2,2,2,2,2,2,0],
[0,2,3,3,3,2,3,3,2,0],
[0,2,3,2,2,2,2,3,2,0],
[0,2,2,2,0,0,2,3,2,0],
[0,2,3,2,0,0,2,2,2,0],
[0,2,3,2,2,2,2,3,2,0],
[0,2,3,3,2,3,3,3,2,0],
[0,2,2,2,2,2,2,2,2,0],
[0,0,0,0,0,0,0,0,0,0]
];
var cdata = [
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,0,1,1,0,1],
[1,0,1,0,0,0,0,1,0,1],
[1,0,0,0,1,1,0,1,0,1],
[1,0,1,0,1,1,0,0,0,1],
[1,0,1,0,0,0,0,1,0,1],
[1,0,1,1,0,1,1,1,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1]
];
map.loadData(data);
map.collisionData = cdata;
game.rootScene.addChild(map);
char1 = new Sprite(50, 50);
char1.image = game.assets["minicharacter.png"];
char1.x = 50;
char1.y = 50;
char1.frame = 0;
char1.addEventListener(enchant.Event.ENTER_FRAME, charMove);
game.rootScene.addChild(char1);
};
game.start();
};
function charMove(){
this.frame = this.age % 2;
var nx = here.x;
var ny = here.y;
if (game.input.right) { nx += 50; }
if (game.input.left) { nx -= 50; }
if (game.input.up) { ny -= 50; }
if (game.input.down) { ny += 50; }
if (!map.hitTest(nx, ny)){
here.x = nx;
here.y = ny;
char1.moveTo(here.x, here.y);
}
}
| << 前へ |