説明
まず、new Map()としてマップオブジェクトを生成します。パラメータには1つのマップブロックのサイズを指定します。最初のパラメータが横幅、次が縦幅になります。表示するマップの画像はマップオブジェクトのimageプロパティにassets[]配列を設定します。この画像にマップで表示する画像を連続して並べておきます。横一列でも縦横の平面でも構いません。
表示するマップのデータはマップオブジェクトのloadData()を使います。パラメータには配列形式でマップのブロック番号を指定します。あとはシーンにaddChild()を使ってマップを連結すれば画面にマップが表示されます。
次にマップ上を移動するキャラクタはnew Sprite()としてスプライトを使って生成します。ENTERFRAMEイベントが発生したらキー入力をチェックしてキャラクタを移動させます。
なお、以下のサンプルは昔の8ビットマシンと同じように、キャラクタはマップのブロックサイズの単位で移動します。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 320);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// ブロックサイズ
game.bs = 32; // 32px
// 画像データをあらかじめ読み込ませる
game.preload("images/tile.png", "images/man.png");
// データの読み込みが完了したら処理
game.onload = function(){
// マップのブロックのサイズを32×32に設定
var map = new Map(game.bs, game.bs);
// マップ画像を設定
map.image = game.assets["images/tile.png"];
// 表示するマップのデータを設定
map.loadData([
[2,2,2,2,2,2,2,2,2,2],
[2,1,0,0,0,0,0,0,0,2],
[2,1,0,2,2,2,1,0,0,2],
[2,1,0,2,2,2,1,2,2,2],
[2,1,1,1,1,1,1,1,1,2],
[2,0,2,2,1,2,2,2,0,2],
[2,0,2,0,1,0,0,0,0,2],
[2,0,0,0,1,2,2,2,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,2,2,2,2,2,2,2,2,2]
]);
// マップを表示
game.rootScene.addChild(map);
// マイキャラを生成
var man = new Sprite(game.bs, game.bs);
man.image = game.assets["images/man.png"];
man.x = game.bs*1;
man.y = game.bs*2;
game.rootScene.addChild(man);
// マイキャラを移動
man.addEventListener(Event.ENTER_FRAME, function(){
if (game.input.up && man.y > 0){ man.y = man.y - game.bs; }
if (game.input.down && man.y < game.bs*9){ man.y = man.y + game.bs; }
if (game.input.left && man.x > 0){ man.x = man.x - game.bs; }
if (game.input.right && man.x < game.bs*9){ man.x = man.x + game.bs; }
});
}
game.start(); // ゲーム処理開始
}
目次に戻る