Charlie

Project Overview: Development of a comprehensive, highly adaptable, and high-performance framework designed for rapid HTML5 game creation. The ecosystem is engineered for seamless desktop and mobile browser compatibility, supporting bulletproof full-screen scaling, complex localization, visual content management, and cross-platform deployment (including standalone desktop builds and optimized exports for static hosting platforms like itch.io).

Technical Stack:

• Core & Rendering: Phaser 3 — game logic, physics, rendering, and a particle system built with Phaser Particle Emitter.
• UI Architecture: Vue 3 (Composition API), Pinia — global UI and game state management, Vue Router.
• Audio: a custom sound system for centralized management of game music and sound effects.
• Animation: DragonBones — skeletal character animation with subsequent asset preparation for integration into Phaser.
• Analytics: Firebase Analytics — collection and analysis of player behavior data.
• Tooling & Build System: Vite, Electron — building web and desktop versions of the project.
• Content Management & DX: Decap CMS — integrated admin panel for content management, Storybook — isolated UI component development and documentation.
• Localization: i18next / i18next-vue — dynamic multilingual support.
• Playable Ads: @smoud/playable-sdk, vite-plugin-singlefile — playable container lifecycle integration and standalone single-file HTML5 playable ad builds for ad networks.

Key Technical Solutions & Engineering Achievements:

• UI and Canvas Rendering Synchronization: Designed a reactive Vue-based UI system that dynamically synchronizes interface element positions with the main HTML5 Canvas when the screen is resized or switched to fullscreen mode.
• State Management Architecture: Implemented integration between Pinia and Phaser to exchange data between the game engine and the UI layer, including reactive interface updates when the game state changes.
• Dynamic Day-Night Cycle: Added a reusable time-of-day system to the SDK, enabling smooth visual transitions between different lighting states and allowing the day-night cycle to be used as part of gameplay mechanics and atmosphere.
• Particle System: Implemented a reusable abstraction layer based on Phaser Particle Emitter, simplifying the creation and reuse of VFX effects across different game scenes.
• Audio System: Developed a centralized audio architecture for managing game music and sound effects through a unified interface, making the system reusable across multiple projects.
• Game Analytics Integration: Integrated Firebase Analytics into the SDK for event tracking and player behavior analysis. This makes it possible to evaluate interaction with game mechanics and use real player data for further development and balancing.
• New Character Animation Pipeline: Replaced the previous frame-by-frame animations created in Inkscape with a new DragonBones-based pipeline. Skeletal animation made character movement smoother and more expressive while simplifying the creation of new animation states.
• Build and Asset Optimization: Configured Vite for flexible static asset path management, allowing builds to run independently on static hosting services and game platforms, including itch.io.
• Extended Development Ecosystem: Storybook is used for isolated UI component development, while Decap CMS provides content and parameter management without requiring changes to the source code.
• Reusable Gameplay Templates: Common gameplay patterns, including top-down movement, platformer physics, character state machines, and other reusable mechanics, were extracted into separate modules.
• Playable Ads Build System: Extended the SDK with a dedicated pipeline for building standalone playable ads as a single minified index.html with embedded JavaScript, CSS, images, animations, and audio. Implemented ad container lifecycle integration, portrait/landscape support, ad network selection at build time, reuse of assets from the main HTML5 game, and detailed output size reporting.

Outcome: Successfully built a production-grade, highly scalable ecosystem for HTML5 game development that drastically accelerates Time-to-Market (TTM) for web-based interactive projects. The framework has proven its resilience, performance, and multi-load stability across multiple live game titles and cross-platform deployments.

Co-creator: Mark Bezdornov.