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

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

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

■マップを表示してみよう！

では、実際にマップを作ってみましょう。ここでは、10×10のマップを作ってみることにします。使用するマップイメージとマップデータについて整理しておきましょう。

・マップイメージ
ファイル名：mapdata.png
サイズ：50×50を４つ、計200×50ドット

・マップデータ
[
    [0,0,0,0,0,0,0,0,0,0],
    [0,1,1,1,1,1,1,1,1,0],
    [0,1,2,2,2,2,2,2,1,0],
    [0,1,2,3,3,3,3,2,1,0],
    [0,1,2,3,0,0,3,2,1,0],
    [0,1,2,3,0,0,3,2,1,0],
    [0,1,2,3,3,3,3,2,1,0],
    [0,1,2,2,2,2,2,2,1,0],
    [0,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,0,0]
]

では、これらを利用して、マップを作成し表示するスクリプトを作ってみます。下のリスト欄に、サンプルコードを掲載しておきます。HTMLでロードするスクリプトファイルにこのように既述し、ページをロードしてください。10×10のマップが表示されます。


マップの利用の仕方は既に説明しましたので、ここではポイントだけチェックしておくことにしましょう。

1. Mapオブジェクトの作成
var map = new Map(50, 50);

2. マップイメージの設定
map.image = game.assets['mapdata.png'];

3. マップデータのロード
map.loadData(data);

4. SceneへのMapの組み込み
game.rootScene.addChild(map);

――どうです、基本的な流れがわかっていれば、非常に簡単にマップを作成できるでしょう？　表示できたら、マップデータやマップイメージをいろいろとカスタマイズして、自分なりのマップを作って表示させてみましょう。

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

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

enchant();

window.onload = function(){
    var game = new Game(500, 500);
    game.fps = 10;
    game.preload("mapdata.png");
    game.onload = function(){
        var map = new Map(50, 50);
        map.image = game.assets['mapdata.png'];
        var data = [
            [0,0,0,0,0,0,0,0,0,0],
            [0,1,1,1,1,1,1,1,1,0],
            [0,1,2,2,2,2,2,2,1,0],
            [0,1,2,3,3,3,3,2,1,0],
            [0,1,2,3,0,0,3,2,1,0],
            [0,1,2,3,0,0,3,2,1,0],
            [0,1,2,3,3,3,3,2,1,0],
            [0,1,2,2,2,2,2,2,1,0],
            [0,1,1,1,1,1,1,1,1,0],
            [0,0,0,0,0,0,0,0,0,0]
        ];
        map.loadData(data);
        game.rootScene.addChild(map);
    };
    
    game.start();
};
※関連コンテンツ

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