では、実際にマップを作ってみましょう。ここでは、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);

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