Чарли

Описание проекта: Разработка комплексного, гибкого и высокопроизводительного набора инструментов (фреймворка) для создания HTML5-игр. Платформа полностью адаптирована под десктопные и мобильные браузеры, поддерживает бесшовный full-screen режим, локализацию, управление контентом и кроссплатформенную сборку (включая десктопные приложения и публикацию на игровых площадках вроде itch.io).

Технический стек:

• Core & Rendering: Phaser 3 (игровая логика, физика, рендеринг).

• UI Architecture: Vue 3 (Composition API), Pinia (глобальное состояние интерфейса и игры), Vue Router.

• Tooling & Build System: Vite, Electron (для десктопных дистрибутивов).

• Content Management & DX: Decap CMS (интеграция админ-панели для контента), Storybook (изолированная разработка и документирование UI-компонентов).

• Animation: DragonBones — создание скелетных анимаций персонажей с последующей подготовкой ассетов для интеграции в Phaser.
• Analytics: Firebase Analytics — сбор и анализ данных о поведении игроков.

• Localization: i18next / i18next-vue (динамическая мультиязычность).

• Audio: собственная звуковая система для централизованного управления игровой музыкой и звуковыми эффектами.
• Playable Ads: @smoud/playable-sdk, vite-plugin-singlefile — интеграция lifecycle рекламных контейнеров и сборка автономных single-file HTML5 playable ads для рекламных сетей.

Ключевые инженерные решения и достижения:

• Синхронизация UI и Canvas-рендеринга: Спроектировал и реализовал уникальную систему реактивного UI на Vue, которая динамически синхронизирует положение интерфейсных виджетов с основным HTML5 Canvas элементом при изменении размеров экрана и переходе в полноэкранный режим.

• Архитектура управления состоянием: Интегрировал Pinia и Phaser, создав мост для бесшовного обмена данными между игровым движком и слоем пользовательского интерфейса (например, реактивное обновление UI при изменении игровых параметров вроде здоровья, инвентаря и т.д.).

• Оптимизация сборки и ассетов: Настроил конфигурацию Vite для гибкого управления путями статических ассетов, что обеспечило гарантированную автономную работу сборок на любых статических серверах и платформах (включая itch.io) без проблем с CORS или путями.

• Расширение экосистемы (DX): Внедрил Storybook для изоляции UI-компонентов и подключил Decap CMS для управления игровым балансом напрямую через удобный визуальный интерфейс, значительно ускорив процесс гейм-дизайна.

• Готовые шаблоны механик: Инкапсулировал базовые игровые паттерны (Top-down управление, платформерная физика, стейт-машины персонажей) в чистые, повторно используемые модули.

• Интеграция игровой аналитики: В SDK интегрирован Firebase Analytics для сбора событий и анализа поведения игроков. Это позволяет отслеживать взаимодействие с игровыми механиками и использовать реальные данные при дальнейшем развитии и балансировке игр.
• Система частиц: Реализован универсальный слой для работы с Phaser Particle Emitter, упрощающий создание и повторное использование VFX-эффектов в различных игровых сценах.
• Динамическая система времени суток: В SDK добавлена переиспользуемая система плавной смены времени суток, позволяющая изменять визуальное состояние игровой сцены и использовать смену освещения как часть игровых механик и атмосферы.
• Система сборки Playable Ads: Расширил SDK отдельным пайплайном для создания автономных playable ads в виде единого минифицированного index.html со встроенными JavaScript, CSS, изображениями, анимациями и аудио. Реализовал интеграцию с lifecycle рекламных контейнеров, адаптацию под portrait/landscape, выбор рекламной сети на этапе сборки, переиспользование ассетов основной игры и детальный контроль размера итогового билда.

В результате Charlie постепенно вырос из стартового шаблона для быстрого прототипирования и участия в геймджемах в полноценный SDK для разработки коммерческих HTML5-игр. Инструментарий объединяет игровой движок, реактивный UI, VFX, аудио, анимацию, аналитику, локализацию, управление контентом и инфраструктуру сборки в единую переиспользуемую архитектуру.

Соавтор: Марк Бездорнов.