back
二次元マップを作ろう！ (3/5)
■マップを表示してみよう！
では、実際にマップを作ってみましょう。ここでは、10×10のマップを作ってみることにします。使用するマップイメージとマップデータについて整理しておきましょう。
・マップイメージ
ファイル名：mapdata.png
サイズ：50×50を４つ、計200×50ドット
・マップデータ
では、これらを利用して、マップを作成し表示するスクリプトを作ってみます。下のリスト欄に、サンプルコードを掲載しておきます。HTMLでロードするスクリプトファイルにこのように既述し、ページをロードしてください。10×10のマップが表示されます。
マップの利用の仕方は既に説明しましたので、ここではポイントだけチェックしておくことにしましょう。
1. Mapオブジェクトの作成
2. マップイメージの設定
3. マップデータのロード
4. SceneへのMapの組み込み
――どうです、基本的な流れがわかっていれば、非常に簡単にマップを作成できるでしょう？ 表示できたら、マップデータやマップイメージをいろいろとカスタマイズして、自分なりのマップを作って表示させてみましょう。
・マップイメージ
ファイル名：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);
――どうです、基本的な流れがわかっていれば、非常に簡単にマップを作成できるでしょう？ 表示できたら、マップデータやマップイメージをいろいろとカスタマイズして、自分なりのマップを作って表示させてみましょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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();
};
| << 前へ | 次へ >> |