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 Engine & Rendering: Phaser 3 (game loop, physics, canvas rendering).
UI Architecture: Vue 3 (Composition API), Pinia (global UI & game state orchestration), Vue Router.
Tooling & Build System: Vite, Electron (for desktop distribution).
Content Management & DX: Decap CMS (git-based admin panel integration), Storybook (isolated UI component development and documentation).
Localization: i18next / i18next-vue (dynamic multi-language runtime).
Key Technical Solutions & Engineering Achievements:
Vue UI & Canvas State Synchronization: Architected a reactive UI layout layer using Vue 3 that dynamically synchronizes the positioning, scales, and boundaries of HTML-based interface widgets with the underlying core HTML5 Canvas element during viewport resizing and true full-screen transitions.
Engine-to-UI Bridge Architecture: Integrated Pinia with Phaser’s lifecycle, establishing a robust data bridge for seamless bi-directional communication between the game engine’s internal loop and the reactive Vue UI layer (e.g., instant interface updates bound to engine-level state modifications like health matrices, inventories, and scores).
Asset Pipeline & Standalone Build Optimization: Configured a highly modular Vite build pipeline to dynamically resolve static asset paths. This asset isolation guarantees that production builds operate autonomously on any static server or platform (such as itch.io) without encountering CORS issues or broken relative asset trees.
Advanced Developer Experience (DX) Tooling: Implemented Storybook for isolated, reusable widget compilation and connected Decap CMS to empower non-technical game designers to tweak game balance variables and content directly through an intuitive, visual administrative panel.
Encapsulated Gameplay Blueprints: Abstracted core interactive mechanics (including top-down movement algorithms, platformer physics templates, and finite state machines for entity actions) into clean, production-ready, modular boilerplate code.
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.
Technologies I have worked with:
