Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@matsui-a

enchant.jsでのマップ作成と画像の切り取り

マップを作る

サンプル

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で描画する。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?