zStudio Documentation User guide

What is zStudio?

zStudio is a desktop scene editor for building responsive UI layouts and keyframe animations that run in browsers and games. You compose scenes visually using a hierarchy of containers, import images, spine animations, particle effects, and text, then export everything to a compact JSON file (placements.json) that a lightweight runtime importer loads directly into your project.

Runtime importers are available for Phaser, PIXI.js (v7 and v8), and plain HTML5. Once imported, every container, button, animation, and text field is a live object your code can interact with — attach click listeners, trigger animations, swap states, and more.

zStudio is built around a few core ideas that are worth understanding before diving in:

Templates and instances — every asset is an instance of a reusable template. Edit the template once and all instances update everywhere.
Responsive by default — every container stores separate transforms for portrait and landscape orientations, so your layout adapts to any screen without extra code.
Local coordinate spaces — containers nest inside each other, each with its own coordinate system. Double-clicking drills you into a container’s context to work on its children directly.
Export, not bake — the exported JSON describes your scene structurally. The runtime importer reconstructs it as live objects, keeping your scene data clean and your code in control.

Workflow

Before deep diving into the menus and panels of zStudio it’s important to go over the fundamentals of this program. zStudio allows users to build complex scene hierarchies and animations using basic building blocks called “Containers”, which can be augmented with additional behaviour by assigning them an different asset types.

Container Properties

Every container can have the following attributes manipulated:

Position
Rotation
Scale
Alpha
Skew (independent X and Y axis shear)
Pivot point (the axis around which the asset rotates, and towards which it scales)

Interacting with Containers

zStudio holds assets in local coordinate space. That means that a container may be in position x:100, y:100 on stage, but its direct children will reference that position as 0,0.

Pressing with the left mouse button on an asset will show you all available options for it in the context aware menu of the Attributes panel.
Click, hold and drag allows you to select multiple assets with a bounding rectangle.
Holding shift while selecting allows you to add or remove assets to your selection.
The right mouse button deselects assets.
Double clicking on a container will cause you to enter its local coordinate space or context.
zStudio allows you to only select the immediate children of the current container you are inside of at any given time.
Double clicking on empty space or pressing the right mouse button causes you to exit the current local space context and go up the hierarchy tree.
You can scale a container by selecting it and moving the mouse to its edges. The mouse cursor will indicate that you can drag the asset to change its dimensions. Containers will scale relative to their pivot point.
Hold and drag to move assets. Hold shift to drag with axis alignment.
Assets snap to the grid while dragging. The grid size can be adjusted in the stage settings.
While dragging, smart alignment guides appear automatically as dashed lines when the edges or centre of the asset align with any sibling. This makes precise positioning easy without manual guides.

If you want to select assets outside of the current parent, you can do that by selecting assets via the Hierarchy Panel.

The top left bar above the scene shows your current drill down into the scene.

Instances and Templates

A fundamental concept to zStudio is templates and instances. Every asset you create is an instance of a template. A template is a blueprint of what the children of an asset should be like. Templates all reside in the Templates panel, and you can instantiate as many instances of a template on stage as you like. You can alter instances of a template as much as you like (change instance name, position, rotation, scale, attach effects and filters).

However if you enter the context of an instance to edit its children, you are actually editing the template.

That means that any change to the children of this instance will affect all other instances of this template.

Example

Template_C is a container with 2 children - X and Y.

Containers A and B are instances of Template_C.

Entering the context of container A and moving container X will result in it moving also in container B.

Likewise, if an image is imported into one instance of a template, it will appear in all instances.

If a child container is deleted - it will be removed from all other instances.

Any change to the insides of a template (done by altering the insides of one instance) will propagate to all.

Template

↓

Instance A

Instance B

Instance C

Duplicating a template

In case you want a template that is identical to an existing one, but will not propagate changes - you can Duplicate instance to a new template - a button that exists on the menu bar, and on the bottom menu.

That will create a new template with an identical inner hierarchy to the one cloned, but any change to it will not affect the old template.

You can see and edit the instance and template names of every container via the Attributes panel.

Responsive positioning

Another core concept in zStudio is the responsive positioning of every container. Every container has 2 transforms (position, rotation, scale, alpha and pivot point) - one for portrait and one for landscape. When you position a container in one orientation, it is not positioned in the other. You need to visually drag it to where it needs to be in each orientation.

If you want an asset to have the same position in both orientations, you can press on the Imprint orientation button in the attributes panel when the container is selected, to copy over this transform to the other orientation.

Note that when you do this, it will also bubble down and copy the orientations of all children of this container.

Anchoring

As mentioned above, the zStudio stage will be scaled and centered at runtime, and all assets reside inside of it. Since the stage is scaled and centered to fit in the browser window, an asset on the right of the stage might actually be at ¾ of the screen width on long devices like iphoneX. It is on the right of the stage, but the stage is centered.

In situations where you want to anchor an asset to the device screen, rather than the stage, zStudio allows you to switch between stage and device coordinates. Marking an asset as anchored will allow you to place it not in an x or y position, but rather at a percentage point that at runtime will take the device dimensions into account.

When you set an asset as anchored in the Attributes panel, it will be highlighted with a green bounding box, a line to its pivot point, and an indication of what percentage it is at.

Anchoring is also subject to responsive positioning - meaning an asset can be responsive in one orientation and not in another.

The importance of Pivot Points

The pivot point is the axis around which the asset rotates, and towards which it scales. It serves great significance when anchoring assets to device dimensions. You can think of the pivot as the point of reference (the 0,0) for the asset’s children. The x and y position of the asset it actually the position of its pivot point. If you want to anchor an asset to 100% of the screen width, see its content anchored to the right of the screen, you would need to place the pivot point to the right of all content, so that it truly is at 100% of the screen.

In the example in the attached image you can see the logo with a pivot point on the right, anchored to 99% of the screen width. You can position the WILD WEST image anywhere, but it will keep the relation to the pivot point at the right of the screen.

This concept makes designing responsive layouts incredibly easy.

Altering Containers

In zStudio - images, spines, particle effects and texts can not be transformed. They can not be copied or deleted. You can perform these interactions only on the containers that wrap them. You can not copy a container inside itself, and can not delete a container from the hierarchy window if you are currently inside its or one of its children’s context.

When drilling down to the level of the image / spine / particle / text - you can not paste in another container there. You would need new assets to be siblings of the container holding this content.

Asset Types

Container

The container is the most basic building block of zStudio. Any media you import into zStudio will get wrapped with a container. Particles, or text fields will also get wrapped with a container. Transformations, effects, instance and template names - are all applied to containers only.

The custom components available in zStudio such as the button or toggle are simply containers with additional logic. A container with no custom behaviour attached to it is referred to as an asset.

When loading in a container at runtime via the importer, it will get assigned the ZContainer.ts class.

Button

A container with an asset type of btn applied to it will be assigned the ZButton.ts class when imported into your project.

This means it will cause the mouse to change to a pointer at runtime, and expose an api for attaching a click listener to it (and much more).

A button structure expects a number of child containers with the following instance names:

upState -> a container which holds an image of the button up state
downState -> a container which holds an image of the button down state
overState -> a container which holds an image of the button over state
disabledState -> a container which holds an image of the button disabled state
labelContainer -> a container that holds a text field which will be the button label.

You can optionally create a label inside each state (meaning each state must be a container that holds 2 containers - one to hold the image, and one to hold the text field). This is good for situations where you want labels to change as button states change. (like pressing a button on down state).

A button with one labelContainer is referred to as a Simple Button and a button with a labelContainer in each state is called a Complex Button.

When working inside of the context of a button, and nothing is selected, the Attributes panel will guide you on the instances missing for this to be a valid button.

State

A State is a container that can hold multiple child containers, but at runtime, only one of these containers will be visible. It gets assigned the ZState.ts class at runtime and provides an interface for showing only one child (state) at a time.

Toggle

A toggle is basically a state item with only two possible states:

onState
offState

It maps to the ZToggle.ts class at runtime and provides a callback when the asset is toggled.

When working inside of the context of a toggle, and nothing is selected, the Attributes panel will guide you on the instances missing for this to be a valid toggle.

Slider

The slider is a container with 2 children:

Handle
Track

The slider maps to the ZSlider.ts class at runtime, and looks at the width of the track and position of the handle to determine the percentage to return to the user on interaction.

It provides an interface that allows drag, and returns a callback with current percentage.

When working inside of the context of a slider, and nothing is selected, the Attributes panel will guide you on the instances missing for this to be a valid slider.

Scroll Bar

The scroll bar contains 3 children:

beed
scrollBar
scrollContent

The scroll can contain anything you wish - child text elements, spines, toggles, buttons etc..

It maps to the ZScroll.ts class at runtime and allows full interaction with the scroll and the content inside it.

When working inside of the context of a scroll, and nothing is selected, the Attributes panel will guide you on the instances missing for this to be a valid scroll.

Full Screen

An asset marked as full screen will be uniformly scaled up at runtime to cover the entire screen. When in landscape mode, it will stretch to fit the width of the screen and center on the y axis. When in portrait mode, it will stretch to fit the height of the screen and center on the x axis.

Animation

When setting a container to be of type animation, its children will be eligible for timeline animations. When you double click it to enter its context the Animation panel will appear. We will cover the animation panel in depth later on.

Now that we have an understanding of the fundamentals, let’s deep dive into the app

Welcome screen

In the welcome screen you will see past projects and be able to start a new one.

Menu Bar

zStudio

New canvas -> start a new scene
Open -> Open a scene
Open Recent -> Open recently worked on projects
Test Scene -> Test the scene you are currently working on. will open a browser window with the current scene.
Save -> either saves in place or prompts the user to select a directory in the file system to save in. Saved file will always be called placements.json. PAID Exports on the free (Community) tier include a watermark on all images. A paid subscription removes the watermark.

All images in the project will be copied to an images folder next to placements.json

Save As -> Save to a different location on disk
Save & Export Atlas -> saves and also creates a texture atlas. Should be saved to a different location than the existing project…
Exit -> close app

Import

You can import assets to zStudio simply by dragging in files, (or their containing directories in some instances). However if you want validation on the assets you are importing, it is better to import via the imports menu. If zStudio knows what you are trying to import it can tell you what went wrong…

Use the import menu to:

Import instructions -> Opens a window with detailed instructions on how to import different types of assets to your scene.
Import Image -> open a file dialog for selecting files to import
Import Animated Sprite -> open a multi-file selection dialog for choosing a sequence of frame images. See Animated Sprite under the Attributes Panel section for more.
Import Spine Folder -> Opens a folder selection dialog. Expects a folder containing spine assets. zStudio expects a specific folder structure and naming convention. See Import instructions for more.
Import Pixi Particles Folder -> Same as above
Import Bitmap Font -> Same as above
Import Photoshop Export PAID -> Same as above

Panels

There are several panels used in zStudio. This tab allows you to position them back in their default location, or show them in case you close them by pressing their x button.

Panel Defaults -> This sets all panels back to their default location
Show Attributes
Show Templates
Show Hierarchy
Show Undo
Show AI
Local Image Models… -> opens the window where you connect image models that run on your own computer. See Local Image Models.

Selection

The Selection tab deals with asset selection capabilities when working in a scene.
Most of the interactions listed here also have keyboard shortcuts.

Undo -> also Cmd+z, undo latest action
Cut -> also Cmd+x, cut asset
Select All -> also Cmd+a, select all assets in current drilldown
Copy -> also Cmd+c, copy asset to clipboard (internal to zStudio)
Paste -> also Cmd+v, paste asset (internal to zStudio)
Wrap with parent -> Creates a new parent for the selected asset/s in current scene drill down.
Break Apart -> also Cmd+b. The opposite of wrap with parent. Destroys an asset by unboxing it, placing its direct children under the current drilldown.
Duplicate Template -> Create a new different template with identical contents that of the selected asset.
Delete -> also Backspace key. Deletes selected assets. If this is the last instance of this asset on stage, you will get a warning.
Copy Asset between ScenesPAID -> when copying assets between scenes we need a different process to the regular copy (basically a minified export).
Paste Asset between ScenesPAID -> pastes in a copied asset from a different scene…
Reset Pivot on deselect -> When selecting multiple assets, you can set them all to have a shared pivot point, which allows rotating them around a single axis. When deselecting, however, you may or may not want each asset’s original pivot to snap back into place. If reset is selected, pivot will return to place. If not, all assets will keep shared pivot point.

Components

The components panel is used to generate different types of supported components. You get example graphics which you can then replace with your own.

These components will be reactive at runtime, and enable you to attach logic to them.

All components come with example graphics you can change.

Container -> generate an empty container.
Text Field -> generate a text field which you can then style.
Particle -> generate a particle effect with default values, that you can alter
Simple Button -> generate a “simple” button, meaning buttons with a shared label for all button states.
Complex Button -> generate a “complex button”, meaning a button with a label per button state.
Toggle -> a toggle component with an on and off state.
Slider -> a slider component.
Scroll -> a scroll bar with content.

Screen Resolutions

zStudio allows you to set screen dimensions. You can select from a pre-filled list, or create a custom size.

Rotate screen -> switch between portrait and landscape orientation. This concept is central to zStudio and is explained later in the documentation.
Mobile -> select between popular mobile screen dimensions.
Tablet -> select between popular tablet screen dimensions.
Desktop -> select between popular desktop screen dimensions.
Custom Resolution -> open a dialogue to set a custom resolution.

Guides

Guides are lines drawn across the screen to help you position assets.

Show Guides -> show all guides in case they are hidden
Hide Guides -> hide all guides from view
Add Horizontal Guide -> adds a horizontal guide on screen which you can later drag to place.
Add Vertical Guide -> adds a vertical guide on screen which you can later drag to place.
Clear Guides -> deletes all guides
Show Asset Guides -> adds a guide box around the current asset that is highlighted in the hierarchy panel.

Help

About -> opens the about window of the app
Learn -> opens a browser window leading to the tutorials page in zstudiosltd.com
Welcome -> opens the welcome screen in case you close it.
Photoshop importer - zStudio allows importing scenes from photoshop using the spine photoshop importer. This takes you to its github page for download.
Interactions and Hot Keys -> opens a dialogue with explanations on hot keys and more.
Connect AI (MCP) -> shows the address of zStudio's MCP server and the setup snippet for each AI tool. See MCP Server. FREE
AI Skill Libraries… -> connects your own skill files so the AI follows your studio's conventions. See AI Skill Libraries. FREE
Check for Updates -> checks with the server if there is a software update. If so, you will be prompted to download.

The Stage

Navigate across the stage by holding the spacebar and dragging around.

You can also zoom in and out with the mouse wheel

The zStudio stage will be rendered in full during runtime. The rectangle it takes up will be scaled to fit the screen, and center on it. You do not have to worry about device dimensions.
You work in the coordinate system of the stage. zStudio will scale and center it appropriately at runtime.

Panels

Once you enter a scene, you will see different panels you have to work with. In this section we’ll review them.

Bottom Panel

The bottom panel has 2 states - with or without an asset selected.

When no asset is selected only the right part is visible. It allows you to spawn a container, text field or particle easily.

When an asset is selected the left part appears. It allows you to focus on any item on stage, break it to unbox its children, wrap it to box its children, copy an asset properties (transformation) and then paste these properties on another asset. Finally it allows creating a new template with the exact appearance of the selected one. This is not instantiation - this is a brand new template that looks identical, and allows manipulation without harming the existing template.

Hierarchy Panel

The Hierarchy panel shows the asset hierarchy on stage.
The top level will always be called “main” and you have no access to it.

Each element is expandable. Pressing on an asset in this menu will select it on stage. You may then interact with it as usual while circumventing the needs to double click through its parents until you reach it.

Dragging in the Hierarchy

By pressing and holding on an asset in the hierarchy panel, you can drag it to a different parent in the hierarchy. You may also drag multiple assets by holding down the shift key when you select the various assets.

Take note that if the asset is an instance of a parent which has multiple instances on stage, removing the child from it, will result in the removal of this instance from all instances of the parent template. More on that later.

Dragging spines

You can even drag assets into spines as attachments using the hierarchy panel!

Searching in the Hierarchy

You can search through the hierarchy panel using the input field on top, and navigate through the instances matching your partial instance name search.

Undo Panel

Every action you perform in zStudio is logged in the undo manager. You can revert this action by pressing Cmd+Z.

Attributes Panel

The Attributes panel is a context aware menu that allows you to interact with your selected assets. Depending on what you are currently selecting (or not) it will show different information.

No Selection

When nothing is selected, the panel will allow you to control the scene frame rate, change stage dimensions, and set the background color of the scene.

Asset (Container)

When regular assets are selected, the panel displays a range of options.

Type

Firstly you can select the asset type. The available types are:

button
asset
state
toggle
slider
scrollBar
fullScreen
animation

Setting each of these will change the panel accordingly.

Guide | Editor Only | Lock

The guide means this instance will not appear in the imported scene. This is useful when you have instances on stage that you want to only import as templates you will instantiate.

Editor Only means this asset will NOT appear at all in the exported scene. It will actually be completely removed from the exported scene (not saved scenes)...

Lock disables all interaction on this asset. It will no longer be selectable. You’ll be able to unlock it via the hierarchy panel.

Instance & Template names

The instance name is the id you will use to reference this asset at runtime. When a new asset is created.

The template name is the unique identifier of this template. It is the string you will use to spawn (instantiate) the asset at runtime.

Changing the Template name will change it for all other instances of this template as well.

Every newly generated asset will get a random instance name and template name. You only need to change this if you intend to reference this asset at runtime with code.

Z-index

This is where you change the hierarchy index of a container under a given parent in relation to its siblings (who is on top)...

You can also change the z-index using Cmd+[ and Cmd+] on the keyboard.

Imprint Orientation

Explained in depth above. Copy the orientation of the selected asset in the current orientation to the other one (e.g portrait to landscape).

Transform Section

Position, rotation, scale, alpha, skew (X and Y), and visibility toggle.

Anchoring

Explained in detail above. Set whether an asset is positioned relative to stage or device screen.

Pivot

Arbitrary set of pivot points for fast alteration. You can also set the pivot point manually by holding down the left mouse button & x key on the keyboard. Make sure the keyboard is in english…

Align

When working with multiple assets, use these buttons to align or distribute them horizontally or vertically.

Filters

Three filter types are available on containers:

Drop Shadow — configurable colour, alpha, blur radius, and offset.
Blur — applies a uniform Gaussian blur. Set the strength with the blur slider.
Color Matrix — adjust brightness, contrast, saturation, and hue of the container and all its children.

Text

When selecting a text item, the attributes panel will change to a text editor.

Type

You can toggle between several text types:

a regular vector text field
a bitmap text filed (texture atlas and font map will be generated on export)
Input text field (great for forms)

There is an additional type of bitmap text field reserved for when you drag in a bitmap font. It too will be editable.

Load Font Json

Press to open a file selection dialogue, or drag the json file on to the button itself. Accepts PIXI style json files.

You may also open up the pixi text style editor and export a json from there by clicking the link underneath.

Text edit section

Set the label text, font family, size, weight, and text anchoring.

Fill

Choose between Solid fill (single colour) and Gradient fill. Gradient fill lets you define two colour stops and the gradient direction (vertical or horizontal).

Stroke

Add an outline to the text. Set the stroke colour and thickness independently of the fill.

Word Wrap

Enable Word Wrap to make text flow across multiple lines. When enabled, set a wrap width (in pixels) and a line height to control vertical spacing between lines. Without word wrap, multi-line text is not supported.

Alignment

Set horizontal text alignment to left, centre, or right. This also updates the anchor point of the text so it stays visually aligned at its pivot.

Set params as default font

Set the current font properties as the default font properties. Every new text field will be created with these fonts. This is a global setting that holds true across projects.

Copy Style to Clipboard

Copy out the style to the computer clipboard as a json object.

Images

When selecting an image the attributes panel will allow us to do the following:

Type

Can be image or 9-slice. Images have a fixed size and can not be transformed. You would have to scale its container parent.

A Nine-Slice can be scaled directly. It divides the image into a 3×3 grid using four border values — top, right, bottom, left (in pixels). The four corner tiles are never stretched; only the edges and centre scale. Set the border values to match the fixed corners of your artwork to avoid distortion when resizing.

File

You can change the image with another from the file system. Click the input field to open the file selection dialogue, or just drag in an image into the input field.

Trim Transparency

Available for image only. Removes all transparent borders of the image. Especially handy for AI generated images. This action is destructive and will replace the original image on disk.

Bitmap Font

A Bitmap Font asset is a pre-rendered font loaded from a folder containing a .fnt descriptor file and its accompanying .png texture atlas. Both XML format and plain-text (BMFont) format .fnt files are supported.

To import a bitmap font, either drag the folder directly onto the stage, or use Import → Import Bitmap Font from the menu bar and select the folder. zStudio will validate that the folder contains both a .fnt file and a matching .png.

When a bitmap font asset is selected in the Attributes panel the following controls are available:

Text — edit the displayed string. The number of characters in the field determines the runtime width of the text object.
Alignment — left, centre, or right. Also adjusts the anchor point accordingly.
Anchor — set the X/Y anchor point (0–1) of the text object independently.
Font Metrics — four sliders that apply global offsets to the character data loaded from the .fnt file:
- X Offset — shifts every character horizontally.
- Y Offset — shifts every character vertically (baseline adjustment).
- Letter Spacing — increases or decreases the advance width between characters.
- Line Height — adjusts the vertical distance between lines.

All font metric adjustments are saved with the scene and re-applied on reload. The original .fnt file is never modified.

Animated Sprite

An Animated Sprite asset plays back a sequence of individual frame images at a fixed frame rate — a lightweight alternative to Spine for simple sprite-sheet style animations (walk cycles, explosions, and the like).

There are two ways to create one:

Import → Import Animated Sprite — opens a multi-file dialog. Select all the frame images you want; their order is determined automatically by sorting the file names.
Drag in a folder — if a dragged-in folder contains only image files that share a common name prefix followed by a number (e.g. frame_01.png, frame_02.png, frame_03.png…), zStudio automatically detects it as an animated sprite and imports the frames in numeric order. A folder containing anything else — subfolders, non-image files, or images without a consistent numbered prefix — is not treated as an animated sprite and is imported as regular images instead.

When an animated sprite is selected, the Attributes panel shows:

Frame grid — thumbnails of every frame. Click a frame to select it.
Play / Stop — preview the animation directly in the panel.
FPS — playback speed in frames per second. Defaults to 12.
Add Frames — append more frame images to the end of the sequence.
Remove — delete the currently selected frame.
Back / Fwd — move the selected frame one position earlier or later in the sequence.
Loop — whether the animation repeats. Defaults to on.
Play On Start — whether the animation starts playing automatically when the scene loads at runtime. Defaults to off.

Like other media assets, an animated sprite cannot be rotated and does not have separate portrait/landscape orientations — wrap it in a container if you need to transform or reposition it responsively.

Spine

When a spine asset is in focus, you can see its available animations, skins, set looping, and also set the spine to play on start when the scene is loaded in your project.

Particle

When selecting a particle animation the menu transforms into a full Pixi v5 particle editor.

(A converter will then adapt it to phaser at runtime for Phaser imports).

You can set an image and play around with all the properties of the particle emitter, and see changes in real time…

Mask

Any container can have a mask applied to it. A mask clips the visible area of a container to the shape of another asset in the scene. Select a container, then in the Attributes panel choose the asset you want to use as the mask shape from the Mask dropdown. The masked container will only be visible where the mask asset’s graphic overlaps it. Masks are invisible themselves at runtime.

Templates Panel

The template panel is an aggregator of all templates in the scene.

Templates are ordered alphabetically and list how many instances of them are currently on stage.

To the left of every template is an X button. Pressing it will delete this template and all instances of it from the scene.

To the right of every entry is a plus button that will spawn another instance of this template in the scene.

Pressing on every listing will display an image of it.

You have a search bar that will allow you to filter templates by partial name.

Hovering over an entry will reveal a rename button. Clicking it will open a dialog for changing the name of the template (and all its instances). You can also change a template name from the Attributes panel when selecting any asset and it will propagate to all other instances.

Animation Panel

The animation panel allows for the creation of old school keyframe animations.

It can only be accessed if a container is labeled as type animation in the Attributes panel.

When set, the children of the selected asset can be animated. When entering its context, the Animation panel will appear.

The idea behind this method of animation is that you set special frames called key frames across time, which capture the transformation of an asset. Then by using interpolation you compute the relative position of assets between these 2 key frames.

Example

Key frame 0 has an asset at x:0, and key frame 1 in frame 20 has it at x:100. That means we need to compute the relative position of the asset between 0 and 100 across 20 frames.

Animation Top Bar

Tween

Here you set the type of interpolation (tween) you would like between 2 key frames. The most basic is linear.

However there are many options to choose from. Each will color code the relevant section in the timeline.

Add Frame

Press on a frame in the timeline, and click on Add Frame. This determines the length of the animation. The colored frame will stretch to the frame you selected. You can also press 5 on the keyboard.

Add Key Frame

Press on a frame in the timeline, and click on Add Key Frame. This sets a key frame in time that records the transformation of the asset. You can also press 6 on the keyboard.

You can only manipulate asset properties in key frames!

Remove frame

Removes the current frame from the timeline and shortens it back. Can remove regular frames and key frames. You can also press 4 on the keyboard.

These keyboard shortcuts are extremely useful for working fast.

Select All

Determines whether your actions (add/remove frames) affect the current child timeline or all children.

When working with multiple children under the same animation it’s usually desired to have this turned on since you will most likely be setting a keyframe for all containers at once.

Copy / Paste Frame Properties

Very handy for posing assets in the same way. Gets the transform of all assets in the frame. Very handy for reposing a complex asset back to a previous position in a future key frame.

Reset Pivot After Multi Select

Extremely handy to have this turned on when posing multiple assets. When selecting multiple assets, you can set them all to have a shared pivot point, which allows rotating them around a single axis. When deselecting, however, you may or may not want each asset’s original pivot to snap back into place. If reset pivot after multi select is on, pivot will return to place. If not, all assets will keep the new shared pivot point.

Cue Points

You can add cue points to specific frames in the animation timeline. A cue point is a named marker that fires an event when the animation playhead passes through it.

This allows you to listen for specific moments in an animation from your code. For example, you can trigger game logic, sound effects, or UI changes at the exact frame a cue point is placed — without polling or guessing at frame counts.

MCP Server FREE

zStudio runs a local MCP (Model Context Protocol) server that enables full programmatic control of the editor. It powers two distinct AI workflows:

Your own AI tool (every plan, including Community): Connect an AI tool that supports MCP — Claude (desktop or Claude Code), Antigravity, Cursor, VS Code, Windsurf, Gemini CLI and others. You use your own AI subscription, so zStudio credits are not used. Open Help → Connect AI (MCP) for the server address and a ready-to-paste setup snippet for each tool.
Built-in Chat (paid plans): The integrated chat panel inside zStudio also runs over the MCP server. It uses zStudio credits and requires no external setup — see the AI Panel section below for details.

Through MCP the AI can do almost anything you can do in the editor: create and arrange containers, import images, Spine animations and particles, set positions for portrait and landscape, anchor elements, edit text, build buttons and other components, animate on the timeline, generate images, and save or export the scene. It reads zStudio's built-in guides as it works, and you can add your own — see AI Skill Libraries below.

On the free (Community) tier you can connect your own AI tool, but the built-in chat is not available. Image generation over MCP uses only your local image models on Community; cloud models need a paid plan.

AI Skill Libraries FREE

Skills teach the AI your own conventions — for example, the container hierarchy your studio uses for a slot machine, how you name templates, or how your popups are built. zStudio already gives the AI built-in skills for its own features; your libraries are added to that list, and the AI loads only the skills it needs for the current task.

Open Help → AI Skill Libraries… and choose:

Add Library Folder… — a folder of Markdown files. Every .md file is one skill; subfolders are fine and README.md files are ignored.
Add Single Skill File… — one .md file.
Create Starter Library… — writes an example library you can edit.

Start each skill file with a short header so the AI knows when to load it:

---
name: slot-machine-structure
description: The container hierarchy we use for slot machines. Load before building a slot game.
---

# Slot machine structure
…

Without a header, the file name becomes the skill's name and its first heading the description.
Keep each skill to one topic and under about 1,500 words. Very long files are cut off.
Refer to zStudio tools by name (for example wrap_elements or set_element_flags) and to container types (btn, state, animation…).
Edits to connected files are picked up automatically — no need to reconnect. A library on a drive that is not currently available is hidden until it comes back.
If a skill has the same name as a built-in one, it is listed as <library>/<name> so both stay available.

Your existing scenes already show your conventions. The dialog's Generate a library from your existing scenes with AI section has a prompt you can copy into an AI tool that can read files on your computer (Claude Code, Antigravity, Cursor…). It studies your scenes and writes the skill files; then add the folder here.

A connected AI tool can also list, add and remove libraries for you over MCP.

AI Panel

The AI panel has two distinct capabilities: scene generation via chat and image generation.

AI Chat (Scene Editing) PAID

The built-in chat interface lets you create, modify, and rearrange your entire scene using natural language. You can ask it to import assets, set positions, create animations, wrap elements, rename things, and more — all without touching the UI manually.

A model selector at the top of the chat lets you choose between three Claude models:

Haiku (fast) — quickest responses, lower cost per operation. Good for simple tasks.
Sonnet (balanced) — the recommended default. Strong reasoning at reasonable speed.
Opus (powerful) — most capable for complex multi-step instructions. Slower and higher cost.

Your current credit balance is shown in the chat panel header. Credits are consumed per request based on the model used.

AI Image Generation

zStudio allows for AI image generation in 3 modes:

Text to image
Image to Image
Image replacement

To use this you must first sign up to the service. You can also do this via the zStudio website:

https://zstudiosltd.com/login

Once you sign up you can purchase credit packs that will be used to pay for the AI image generation. Cloud image generation is included with the Individual Pro, Studio Team and Enterprise plans.

On any plan, including Community, you can instead use models that run on your own computer, with no sign-up or credits — see Local Image Models below.

You can set whether the image will have a transparent background (important for game assets) and select your model. Gemini Flash and GPT IMage 1.5 are terrific for game assets.

For Image to Image, select one or more images and select this mode. The newly generated image will take inspiration from the selected images and from the prompt.

For Image in Place (reskin) the new image will replace the old one, you can set the degree of inspiration the image itself will have aside from the prompt. The new image will replace the old one and scale and resize to its dimensions.

You can undo this process with Cmd+z

Local Image Models FREE

You can generate images on your own computer with models you download yourself. Local models need no account, credits or internet connection, and are available on every plan, including Community.

Open Panels → Local Image Models…, click Add Model… and pick the model file. zStudio guesses the model family and looks for the other files it needs. When a model shows Ready, it appears in the AI Image panel's model list, where you use it like any other model. Each model also has a Test button.

Supported models: Stable Diffusion 1.x / 2.x and XL checkpoints, FLUX, Z-Image and Qwen-Image, as .safetensors or .gguf files. Download them from Hugging Face or Civitai.
Models in several parts: newer models come as a diffusion model plus a text encoder and a VAE. Keep them in a models/ folder with diffusion_models/ (or unet/), text_encoders/ and vae/ subfolders — the layout ComfyUI uses — and zStudio finds the parts automatically. You can also choose each file by hand.
Settings: each model has Steps, CFG and Size. The defaults suit each family; change them only if you know the model needs it.
Modes: Text to Image, Image to Image and Image in Place (reskin) all work with local models, using the first selected image as the source.
No transparent backgrounds: local models always produce an opaque image. Use a cloud model when you need transparency.
Memory and speed: SD 1.5 runs on most machines. SDXL, Z-Image and FLUX want about 12–24 GB of memory (Apple Silicon unified memory or a graphics card). On a slower machine one image can take several minutes. The .gguf “Q8” or “Q4” versions are much smaller and need less memory, with little loss in quality.
Licenses: check each model's license before using its images commercially — some, such as FLUX.1-dev, do not allow it.

AI tools connected over MCP can use your local models too: they appear in the model list as local:….

Testing a Scene

From the top menu you can test your scene. The test is simply a regular export that places the files in the Documents folder of the computer in a directory called zStudioTest.

Then a browser window will load up and play the scene.

After Export

Once export is complete, it’s time to import your scene into your project.

Depending on what framework you are using (Phaser, PIXI7, PIXI8, HTML5 etc) you will need to choose the appropriate importer and merge it into your project.

An updating list of supported importers can be found here:

https://zstudiosltd.com/z-importer

Keyboard Shortcuts

A full reference is also available inside the app via Help → Interactions and Hot Keys.

General

Cmd+S	Save scene
Cmd+Z	Undo
Cmd+A	Select all assets in the current context
Cmd+C	Copy selected asset(s)
Cmd+X	Cut selected asset(s)
Cmd+V	Paste
Cmd+B	Break apart (unbox) selected container
Backspace / Delete	Delete selected asset(s)
Cmd+[	Lower z-index (send back)
Cmd+]	Raise z-index (bring forward)

Navigation & Stage

Space + drag	Pan the stage
Mouse wheel	Zoom in / out
Shift + drag	Drag asset with axis alignment (horizontal or vertical only)
Hold X + drag	Reposition the pivot point of the selected asset
Double-click asset	Enter the asset’s context (drill in)
Double-click empty space	Go up one level in the hierarchy
Right mouse button	Deselect / go up one level

Animation

4	Remove frame at current position
5	Add frame at current position (extend animation)
6	Add key frame at current position