💃 Getting Started

This experimental package is private to the workspace. It converts Tiled .tmj maps into VoxelWorldJSON snapshots, with their generated blocks, in "stacked" or "flat" layer modes. Add "@jolly-pixel/voxel.tiled": "workspace:*" to another workspace's dependencies, together with its peers @jolly-pixel/voxel.renderer, @jolly-pixel/asset, @jolly-pixel/engine and three.

👀 Usage example

import { loadJSON } from "@jolly-pixel/engine";
import {
  VoxelDocument,
  VoxelView,
  loadBlocksets
} from "@jolly-pixel/voxel.renderer";
import {
  TiledConverter,
  type TiledMap
} from "@jolly-pixel/voxel.tiled";

const map = await loadJSON<TiledMap>("map.tmj");
const { world, blocks } = new TiledConverter().convert(map, {
  resolveTilesetSrc: (_source, id) => `assets/${id}.png`,
  layerMode: "stacked"
});

const view = new VoxelView(new VoxelDocument({ blocks }), {
  blocksets: await loadBlocksets(world.blocksets)
});
view.load(world);

📚 Documentation

• Importing a Tiled map
• TiledConverter, including the Tiled JSON types
• TiledMapAssetLoader, which packages a converted map as one @jolly-pixel/asset value

🚀 Running the example

pnpm --filter @jolly-pixel/voxel.tiled dev

http://localhost:5173/ loads a multi-layer .tmj map through TiledMapAssetLoader in "stacked" mode.

License

MIT