zStudio

zStudio is a streamlined graphics authoring tool designed to simplify and accelerate the creation and integration of 2D visual assets in web game development pipelines. It is particularly geared towards developers, animators, and technical artists working with rendering libraries such as Pixi.js. zStudio enables teams to build, edit, and manage complex graphical hierarchies with ease. Its intuitive interface and structured export capabilities make it a powerful addition to any game or interactive media workflow.

zStudio site

Key Features

Scene Creation and Layout

• Create and manage scenes via a flexible canvas interface

• Support for various aspect ratios and resolutions (portrait, landscape, etc.)

• Default layout configurations for rapid scene composition

Asset Management

• Drag and drop image assets directly into the scene

• Images are wrapped in containers for hierarchy management

• Each asset and container can be named for easy reference in code

Hierarchical Composition

• Wrap elements in parent containers to organize elements into logical groups

• Duplicate, instantiate, or templetize assets for scalable scene building

• Containers can be nested and edited contextually

• View and organize the structure of all scene elements

• Easily select, rename, and reparent containers and assets

• Empty containers can be used to group and transform other objects

• Ideal for creating logical hierarchies without visual components

Transform Controls

• Move, scale, rotate assets with intuitive keyboard shortcuts

• Edit pivot points dynamically for precise transformation behavior

• Multi-select and apply transformations across multiple assets

• Shared and individual pivot handling for group transformations

• Drill inside containers to edit child elements without affecting others

• Supports create, copy, paste, break, undo operations

Information Panels

• Adjust transform values numerically (position, rotation, scale, alpha)

• Set and edit instance names for code integration

• Customize pivot points using GUI or preset selector

Template System

• Create reusable templates from graphical assets

• Templates retain internal structure and behavior

• Edit templates to propagate changes to all instances

• Instance names remain unique while sharing a template

Animations

• Tween-based animation system for manipulating asset transformations across multiple frames

• Supports nested animations to accommodate complex animation hierarchies

• Add cue points to given frames to capture them later at runtime

Orientations

• Support for portrait and landscape modes is built into zStudio

• Easily set up your scene for both orientations.

Anchoring System

• Anchor containers to any point on the screen to have them maintain their position regardless of device size

Spine support

• Easily bring in spines into your scene and view your composition in one place

Particle effects support

• Drag in effects done with PIXI Particles

Export System

• Export entire scenes or selected templates

• Export includes JSON structure with instance names, hierarchy, transforms

• Create texture atlases for optimized rendering

• Create and export bitmap fonts from font assets

• Export regular font definitions for runtime rendering

Import and Integration

• Graphical importer package for external projects

• Seamlessly bring zStudio artifacts into Pixi.js or other renderers

• Maintain template and instance relationships during import

Test Mode

• Run an integrated preview/test mode to simulate game environments

• Preview animations, hierarchies, and transformations before export

Workflow Summary

1. Start a Scene: Open a new canvas and select the desired resolution.

2. Import Assets: Drag in visual assets, which are wrapped in containers.

3. Manipulate Assets: Move, rotate, scale, and organize assets using transform tools.

4. Create Hierarchies: Group elements in containers; use templates for reuse.

5. Animate: Manipulate the transform of assets over multiple frames.

6. Preview: Use test mode to validate design and behavior.

7. Export: Export assets as JSON, texture atlases, or fonts.

8. Integrate: Use the importer package to bring assets into your rendering engine.

Conclusion

zStudio bridges the gap between design and development by enabling a fast, visual-first workflow while maintaining technical control and integration capabilities. Its templating system, hierarchy tools, and export options make it an indispensable part of modern 2D game pipelines.