We’re excited to announce the launch of zStudio, a streamlined graphics authoring tool designed specifically to simplify and accelerate the creation and integration of 2D visual assets in web game development.
If you’re a developer, animator, or technical artist working with rendering libraries like Pixi.js, zStudio is built with you in mind. It empowers teams to quickly build, edit, and manage complex graphical hierarchies — all through an intuitive interface and powerful export capabilities that fit seamlessly into modern game and interactive media pipelines.
https://yonnyzohar.itch.io/zstudio
Why zStudio?
Creating and managing 2D assets for web games can be time-consuming and technically challenging. zStudio tackles these pain points head-on, offering a workflow that balances ease of use with robust control.
Whether you’re composing scenes, organizing assets, animating elements, or preparing assets for export and integration, zStudio provides the tools you need — all in one place.
Key Features At a Glance
Flexible Scene Creation and Layout
- Intuitive canvas interface to create and manage scenes
- Support for multiple aspect ratios and resolutions (portrait, landscape, and more)
- Default layout presets to get you started faster
Robust Asset Management
- Drag and drop images directly into your scene
- Automatically wrapped in containers to keep your hierarchy organized
- Name assets and containers for easy reference in your codebase
Hierarchical Composition Made Easy
- Group and nest elements with parent containers
- Duplicate, instantiate, or templatize assets to build scalable scenes
- Contextual editing and easy structure navigation
- Use empty containers for logical grouping and transformations without visual clutter
Powerful Transform Controls
- Move, scale, rotate with intuitive keyboard shortcuts
- Dynamic pivot point editing for precise control
- Multi-select support for batch transformations
- Drill down inside containers to tweak child elements without disrupting others
Comprehensive Information Panels
- Numerical adjustment of position, rotation, scale, and alpha
- Instance naming for smooth code integration
- Pivot customization via GUI or presets
Reusable Templates
- Create templates from graphical assets that retain internal structure
- Edit templates to propagate updates to all instances
- Maintain unique instance names within shared templates
Animation System
- Tween-based animations controlling asset transformations across frames
- Support for nested animations for complex hierarchies
- Add cue points for runtime event triggers
Orientation and Anchoring Support
- Built-in support for portrait and landscape modes
- Anchor containers to any screen point for responsive positioning
Spine and Particle Effects Integration
- Import and preview Spine animations directly in your scenes
- Drag and drop PIXI Particle effects to enhance your visuals
Export and Integration
- Export full scenes or selected templates as JSON, complete with hierarchy and transforms
- Generate texture atlases for optimized rendering
- Export bitmap fonts and regular font definitions
- Importer package to seamlessly integrate zStudio assets into Pixi.js or other renderers, preserving templates and instances
Test Mode
- Preview and test animations, hierarchies, and transformations before export
- Simulate your game environment to validate your design
How Does the Workflow Look?
- Start a Scene: Open a new canvas, select your resolution.
- Import Assets: Drag in images, automatically wrapped in containers.
- Manipulate Assets: Move, scale, rotate, and organize your elements.
- Create Hierarchies: Group elements in containers, use templates to reuse assets.
- Animate: Create animations by tweening transforms over multiple frames.
- Preview: Use the integrated test mode to validate your work.
- Export: Export your scene, templates, atlases, and fonts as needed.
- Integrate: Bring your assets into your rendering engine with the importer package.
Conclusion
zStudio bridges the gap between artistic design and technical development, offering a fast, visual-first workflow without sacrificing control or integration. Its powerful templating system, hierarchy tools, and export options make it an indispensable addition to any modern 2D game pipeline.
Ready to streamline your 2D asset workflow? Start exploring zStudio today!