Importing a Tiled map

Use TiledConverter when application code already loads the Tiled JSON.

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 blocksets = await loadBlocksets(world.blocksets);
const document = new VoxelDocument({ blocks });
const view = new VoxelView(document, { blocksets });

view.load(world);

Use "flat" when Tiled layers should overlap at y = 0. Use "stacked" when each layer represents another height or floor.

Load through the asset system

TiledMapAssetLoader packages the converted document and textures as one asset.

import {
  AssetCatalog,
  AssetId,
  AssetRecord
} from "@jolly-pixel/asset";
import { Runtime } from "@jolly-pixel/runtime";
import {
  TiledMapAssetLoader,
  TiledMapAssetType
} from "@jolly-pixel/voxel.tiled";

const mapId = new AssetId("map.intro");
const catalog = new AssetCatalog([
  new AssetRecord({
    id: mapId,
    kind: TiledMapAssetType.kind,
    path: "maps/intro.tmj"
  })
]);

const runtime = await Runtime.create("canvas", {
  assets: {
    catalog,
    loaders: [{
      type: TiledMapAssetType,
      create(manager) {
        return new TiledMapAssetLoader(manager, {
          layerMode: "stacked"
        });
      }
    }]
  }
});

Read the prepared asset during the component lifecycle:

const { world, blocks, blocksets } = this.getAsset(VoxelMap.assets.map);
const renderer = this.actor.addComponentAndGet(VoxelRenderer, {
  blocksets,
  document: { blocks }
});

renderer.view.load(world);

See TiledConverter for conversion options. See TiledMapAssetLoader for its defaults and output types.