マップを作る

サンプル

enchant.jsでマップを作る - jsdo.it

書き方

//MapコンストラクタでMapオブジェクト生成。引数にはタイルの幅と高さを指定
var map = new Map(16, 16);

//imageプロパティでマップで使用する画像を読み込み
map.image = core.assets['imgname.png'];

//loadDataメソッドでマップデータを読み込み
map.loadData([
  [1,1,1,1,1,1,20,20],
  [1,1,80,80,80,80,80,80]
]);

//CollisionDataプロパティにマップの当たり判定を設定
map.collisionData = [
  [1,1,1,1,1,1,0,0],
  [1,1,0,0,0,0,0,0]
]

//rootSceneにマップを追加
core.rootScene.addChild(map);

Mapデータの構造

値にはタイルセットのフレーム番号（タイルを配置しない部分には「-1」）を指定。
複数のマップデータを指定して重ねることもできる。
Mapデータの生成はEnchantMapEditorを使うと便利っぽい。

当たり判定データ

「1」で当たり判定有り、「0」で当たり判定無し。
当たり判定があるか調べるには「hittest」メソッドを使う。

if(map.hitTest(this.x + 16, this.y + 40)) this.x += 5;

画像を切り取って表示する

画像の範囲を切り取って表示するにはSurfaceオブジェクトを使う。

draw(image,dx,dy,dw,dh)
draw(image,sx,sy,sw,sh,dx,dy,dw,dh)

//例
object.draw(core.assets['imgfile.png'], 0, 16, 126, 64, 64, 64, 126, 64);

画像の（sx,sy）の位置から幅sw、高さshの領域を、
サーフィス(dx,dy)の位置に幅dw、高さdhで描画する。