タイルマップと当たり判定

@debuffjp/tilemap：draw を通したカリング・バッチ処理付きの描画、タイルとの当たり判定、そして Tiled と LDtk のインポーターを備えています。

import { fromTiled } from "@debuffjp/tilemap";

const map = fromTiled(assets.json("level1"), { image: (path) => assets.image("tiles") });
const player = { x: 32, y: 32, w: 12, h: 14 };

// update(dt)
const hit = map.move(player, vx * dt, vy * dt);
if (hit.onGround) vy = 0;

// render(draw)
draw.withCamera(game.camera, () => map.draw(draw, { camera: game.camera }));

マップを作る

• Tiled（.tmj）：fromTiled(json, { image, tilesets? })。正投影マップ、CSV または非圧縮の Base64、無限マップ、レイヤーグループ（オフセット、不透明度、パララックス）、反転・回転フラグ、外部タイルセット、オブジェクトレイヤーに対応します。
• LDtk（.ldtk）：fromLdtk(project, { level?, image, intGrid? })。タイル、AutoLayer（重なったタイルは追加のレイヤーになります）、IntGrid による当たり判定、エンティティ、レベルのフィールドに対応します。
• コードで：new Tilemap({ width, height, tileWidth, tileHeight, tilesets, layers }) を作り、map.set(layer, col, row, id) で置いていきます。プロシージャル生成のレベルに便利です。

当たり判定

設定元	判定
Tiled のタイルプロパティ solid / collides	solid（通り抜け不可）
Tiled のタイルプロパティ oneWay	one-way（上からだけ乗れるすり抜け床）
Tiled のレイヤープロパティ collision: true	そのレイヤーのタイルがすべて solid
LDtk の IntGrid の値	solid。oneWay、one_way、platform という名前の値は one-way。intGrid で上書きできます
コード	map.setCollision(col, row, Collision.Solid)

map.move(body, dx, dy, { dropThrough? }) は { x, y, w, h } の箱を動かし、X、Y の順に衝突を解決します。速い移動はタイルサイズのステップに分割するので、壁をすり抜けることはありません。戻り値は onGround、hitCeiling、hitLeft、hitRight です。map.edges で、マップのどの端を solid にするかを決められます（デフォルトは左右が solid、上下が開放）。

API

• map.draw(draw, { camera?, layers? })：画面内のタイルだけを描き、パララックスを適用します。タイルごとのメモリ確保はありません
• map.get / set / tileAt、map.tileProperties(id)、map.objects(layer)、map.properties
• map.collisionAt(col, row)、map.collideFrom(layers, { everyTile? })、overlapsSolid(map, body)
• アセットパイプラインは .tmj、.tsj、.ldtk ファイルを JSON として読み込みます