Install and set up

Install the importer for your engine and get your first zStudio scene on screen.

zImporter is the small runtime library that loads scenes exported from zStudio. Your designer (or your AI) builds the scene, you export it, and these few lines put it in your game. Pick your engine above: every code sample in this guide follows your choice.

Install

npm i zimporter-pixi

Your tsconfig.json needs "module": "ESNext" and "moduleResolution": "bundler".

Add your exported scene

Export from zStudio and copy the exported folder somewhere your game can serve it, such as public/assets/mainMenu/. The folder holds a placements.json file and your images.

Minimal project

import * as PIXI from 'pixi.js';
import { ZScene, ZSceneStack, ZUpdatables } from 'zimporter-pixi';

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x222222,
  resolution: window.devicePixelRatio || 1,
  autoDensity: true,
});
document.body.appendChild(app.view as HTMLCanvasElement);

// Drives timelines. Without this, animations stay frozen.
ZUpdatables.init(24);
app.ticker.add(() => ZUpdatables.update());

// Keeps the layout responsive.
window.addEventListener('resize', () => {
  app.renderer.resize(window.innerWidth, window.innerHeight);
  ZSceneStack.resize(window.innerWidth, window.innerHeight);
});

const scene = new ZScene('mainMenu');
scene.load('./assets/mainMenu/', () => {
  ZSceneStack.push(scene);
  scene.loadStage(app.stage);
  // The scene is on screen. Wire it up here.
});

The number passed to ZUpdatables.init() is the frame rate timelines play at. Set it to the frame rate your animations were made for.