Load a scene and find things

Show loading progress, then get a reference to any element by its instance name.

Loading

scene.load() fetches the JSON and images and calls you back when they are ready. scene.loadStage() then builds everything and adds it to the screen. Keep the trailing slash on the path.

const scene = new ZScene('mainMenu');

scene.load(
  './assets/mainMenu/',
  () => {
    ZSceneStack.push(scene);
    scene.loadStage(app.stage);
  },
  (progress) => {
    loadingBar.width = progress * 400; // progress goes from 0 to 1
  },
);

Finding elements

Everything you named in zStudio can be found by its instance name through scene.sceneStage. get() searches every level below the container and returns the first match, or null.

import { ZButton, ZContainer } from 'zimporter-pixi';

const stage = scene.sceneStage;

const playBtn = stage.get('playBtn') as ZButton;

// Search inside one container. Useful when names repeat.
const popup = stage.get('settingsPopup') as ZContainer;
const closeBtn = popup.get('closeBtn') as ZButton;

// Every element with this name
const coins = stage.getAll('coin');

// Every element of a type
const buttons = stage.getAllOfType('ZButton') as ZButton[];

The element's class comes from the type you gave its container in zStudio: Button becomes ZButton, Toggle becomes ZToggle, Slider becomes ZSlider, Scroll Bar becomes ZScroll, State becomes ZState.

Elements are also available as properties on their direct parent, so stage.playBtn works too.