Caricare mappe Tiled JSON in JavaScript: tilelayer e muri

Documentazione – BeeEngine

v2.10.5

BeeTilemapLoader — Documentazione Tecnica

JSON di Tiled: tilelayer, muri a rettangoli, render

📁 Panoramica

BeeTilemapLoader legge una mappa Tiled già in JSON. Vive in src/graphics/BeeTilemapLoader.js. Non è BeeTilemap e il loop non la chiama: la costruisci con il motore, carichi il JSON e disegni tu, nel pass mondo, dopo camera.apply.

I tilelayer si disegnano. I muri sono rettangoli fusi sulle celle piene dei layer solidi. L’origine della mappa è 0, 0. La cella è tilewidth della mappa, oppure 128. Un gid 0 è vuoto. I bit di flip di Tiled si tolgono con 0x1FFFFFFF: si disegna il tile vero, non lo specchio.

const tiled = new BeeTilemapLoader(gioco); await tiled.preloadAssets(mapJson); tiled.load(mapJson);

📁 Caricamento

Un layer è solido se si chiama solid, solids, platform, platforms, terrain, walls, collision, collisions, oppure ha la proprietà solid a true o "true".

1. preloadLe immagini del tileset, per nome file, sotto assets/. Poi load.
2. muriSolo i layer solidi. Un layer ground da solo non crea collider. Le celle piene si fondono in rettangoli.
3. renderI tilelayer con visible diverso da false. Se manca il campo, il layer si vede. La view è camera.getViewBounds.

📁 Dove è facile sbagliare

Non entra nel loop. render lo chiami dal draw del mondo. getColliders restituisce i rettangoli in pixel. Non vengono aggiunti alla fisica: x, y, width, height li registri tu.

Il nome del layer conta. ground si disegna e non è un muro. Per i collider serve uno dei nomi solidi, o la proprietà solid. Un JSON senza width e height finiti non carica: isLoaded resta false.

Il file dell’immagine. Dal path di Tiled si tiene solo il nome. preloadAssets(map, 'assets/') cerca assets/sheet.png, non la cartella scritta nel JSON. Senza engine.assets la cella non si disegna e non lancia.

📁 Esempio: draw e collider

// dopo camera.apply tiled.render(ctx); const walls = tiled.getColliders();

Senza ctx, render esce. Un gid con il flip orizzontale di Tiled (1 | 0x80000000) disegna il tile 1.

📁 Riepilogo API

La misura del riquadro nel tileset è tilewidth / tileheight del tileset, altrimenti quelli della mappa. In disegno, un tile più basso della cella si appoggia sul bordo inferiore.

Membro	Ritorna	Scopo
`new BeeTilemapLoader(engine)`	`BeeTilemapLoader`	`isLoaded` false. `solidColliders` vuoto. Cella di default 128, finché `load` non legge `tilewidth`.
`preloadAssets(mapJson, basePath?)`	`Promise`	Carica le immagini dei tileset. `basePath` default `assets/`, più il nome file.
`load(mapJson)`		Tilelayer, lookup dei gid, muri. Senza JSON o senza `width` / `height` finiti: `isLoaded` false.
`getColliders()`	`BeeRectCollider[]`	Rettangoli fusi, in pixel, origine `0, 0`.
`render(ctx)`		Disegna i tilelayer visibili. Senza `ctx` o se non è loaded: return. Con camera, usa `getViewBounds`.
`isLoaded` / `solidColliders` / `mapWidth` / `mapHeight` / `gridCellSize`		Stato dopo `load`. `gridCellSize` è il passo della griglia, in pixel.