zImporter Guide
How to use a zStudio scene from your code, with examples you can copy for Pixi.js, Phaser and HTML. For the full list of classes and methods, see the API reference.
Install and set up
Install the importer for your engine and get your first zStudio scene on screen.
Load a scene and find things
Show loading progress, then get a reference to any element by its instance name.
Buttons
Respond to clicks and long presses, change labels, and enable or disable buttons.
Toggles
On/off switches for settings like sound and music.
Sliders
Drag a handle along a track to get a value from 0 to 1.
Scrollbars
Scrolling lists with drag, mouse wheel and a draggable thumb, plus adding rows from code.
States
Show one child at a time, for things like idle, win and lose screens.
Text and text inputs
Change text, shrink it to fit, restyle it, and read what the player typed.
Animation and Spine
Play timelines, react when they finish, trigger code at exact frames, and control Spine.
Spawn objects at runtime
Create enemies, coins and list rows from templates while the game runs.
Move assets without breaking the layout
Why a position sometimes jumps back after a resize, and the right way to move, animate and hide anything.
Switch and remove scenes
Move between scenes, layer them, and free their memory.
Use the skills with your AI tool
Every importer package includes skills that teach your AI tool to write correct zImporter code.
Common problems
Quick fixes for the problems people hit most often.