libro
www.tuyano.com
初心者のためのenchant.jsゲームプログラミング入門

二次元マップを作ろう！ (5/5)

作成:2012-10-21 10:44
更新:2012-10-21 10:44

■ミニ迷路を作ろう

では、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でチェックする」「チェックの結果を元に移動の処理をする」――この流れが頭に入れば、マップの移動は作れるようになります。

※プログラムリストが表示されない場合

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);
    }
}
※関連コンテンツ

「初心者のためのenchant.jsゲームプログラミング入門」に戻る