« Purrfect Code » — это новая игра-головоломка по программированию, работающая на основе Flutter, Dart и игрового движка Flame и призванная бросить вызов разработчикам, решая головоломки путем написания кода.
Обзор игры
В «Purrfect Code» игрокам поручено обновить программу робота-уборщика в новой штаб-квартире космической станции Google, куда по ошибке прибыла партия кошек. Цель игры — помочь роботу безопасно собрать коробки с кошками и затолкать их на пластины телепорта, чтобы они могли вернуться домой. Игроки пишут JavaScript для управления движениями роботов, одновременно пытаясь найти эффективные решения для навигации по головоломкам на основе сетки.
Игра — это увлекательный способ изучить кодирование, используя свой интеллект и креативность. Каждый уровень сосредоточен на концепции программирования и постепенно увеличивается в сложности на протяжении пяти уровней игры.
Игровой цикл выглядит следующим образом:
- Игроки пишут код JavaScript для перемещения робота (вверх, вниз, влево или вправо)
2. Затем они запускают свой код и наблюдают, как робот пытается решить уровень.
3. Уровень считается пройденным, когда все коробки с кошками будут перемещены к пластинам телепорта.
4. Игроки оцениваются по эффективности своих решений, включая количество перемещений и краткость кода.
Создание игры с помощью Flutter, Dart и Flame
Мы решили создать « Purrfect Code » с помощью Flutter и Dart, поскольку они предоставляют мощную и гибкую структуру для создания многоплатформенных приложений и игр. Система виджетов Flutter и модель реактивного программирования позволили нам создать адаптивный пользовательский интерфейс для различных размеров экрана в браузере. Строго типизированные и объектно-ориентированные функции программирования Dart позволили легко структурировать наш код и поддерживать чистоту нашей кодовой базы. Игровой движок Flame, созданный на основе Flutter, предложил хорошую основу базовых функций, необходимых для разработки игр, что позволило нам сосредоточиться на нашей игровой логике и уникальных аспектах игры. Flutter и Flame были очевидным выбором для этого проекта из-за природы Purrfect Code как уникального гибрида игры/приложения с пользовательским интерфейсом, вдохновленным IDE, и игровым представлением с анимированными спрайтами и звуком.
Chrome и JavaScript: использование встроенной поддержки браузера
После того, как мы определились с концепцией программирования для игры, нам нужно было выбрать язык программирования, который будут использовать игроки. Мы хотели что-то знакомое и популярное среди разработчиков. Изначально мы рассматривали использование Python в качестве языка программирования в игре. Однако после некоторых раздумий мы решили использовать JavaScript, чтобы использовать встроенную поддержку JavaScript, предоставляемую Chrome. Используя JavaScript, мы могли задействовать собственные возможности браузера без необходимости загружать дополнительный языковой интерпретатор. Это решение не только упростило наш процесс разработки, но и обеспечило игрокам бесперебойный опыт, поскольку игра могла быстро загружаться с минимальными зависимостями.
Выпуск Flutter 3.22 на Google I/O в этом году представил стабильную поддержку WebAssembly (WASM), что позволило нам оптимизировать критически важные для производительности части игры. Скомпилировав определенную игровую логику в WASM, мы гарантировали, что «Purrfect Code» будет эффективно работать в браузере, обеспечивая плавный и отзывчивый игровой процесс без ущерба для производительности.
Игровой движок Flame: модульная и эффективная разработка игр
Чтобы воплотить в жизнь «Purrfect Code», мы использовали Flame Game Engine, модульный игровой движок с открытым исходным кодом, созданный на основе Flutter, который предоставляет множество часто используемых функций для разработки игр. Flame использует надежную инфраструктуру Flutter, упрощая при этом код, необходимый для создания нашего проекта. Он предлагает простую, но эффективную реализацию игрового цикла и широкий спектр основных функций, таких как воспроизведение звука, управление спрайтами, функции анимации, столкновения и система компонентов Flame (FCS). Архитектура движка на основе компонентов, рендеринг спрайтов и поддержка анимации позволили нам создать визуально привлекательную графику, плавную анимацию и интерактивные элементы игрового процесса без необходимости изобретать велосипед. Использование Flame сделало процесс разработки более эффективным, поскольку основные функции были под рукой, что позволило нам сосредоточиться на создании увлекательного игрового опыта для наших игроков.
Реализация игровых функций с помощью Flame
Flame предлагает простую, но эффективную реализацию игрового цикла и широкий спектр основных функций, таких как воспроизведение звука, управление спрайтами, функции анимации, столкновения и система компонентов Flame (FCS).
Система рендеринга и анимации спрайтов Flame позволила нам оживить персонажей и окружение игры без необходимости писать графический код. Мы могли создавать листы спрайтов, определять последовательности анимации и плавно анимировать движения персонажей и специальные эффекты. Мы использовали систему приоритетов Flame для написания визуальной системы сортировки для нашей игровой перспективы «сверху вниз». Наш художник создавал уровни со множеством перекрывающихся функций, чтобы усилить ощущение глубины с помощью спрайтов и придать игровому виду менее «сетчатый» вид. Нам нужно было убедиться, что когда робот будет двигаться позади них, он будет правильно перекрыт. Система приоритетов Flame позволила нам назначать приоритеты различным визуальным элементам, гарантируя, что они будут отрисованы в правильном порядке и правильно перекрыты. Эта система была достаточно гибкой, чтобы мы могли включить систему теней, в которой отдельные компоненты могли отображать анимированные тени, которые отражали действия объектов и придавали арту ощущение глубины, что делало сцены более яркими и более простыми для визуального восприятия.
Класс BoxShadow в нашей кодовой базе является хорошим примером этого и показывает, как мы создали динамические и интерактивные тени для движущихся объектов коробки в игре. Расширяя SpriteAnimationComponent и реализуя миксины GridElement и HasVisibility, мы смогли загрузить листы спрайтов для анимации тени коробки и телепортации коробки, определить несколько анимаций для открытого, закрытого, бездействующего и телепортирующего состояний и интегрировать их в макет на основе сетки. Метод onLoad загружает анимации и устанавливает начальное положение и приоритет компонента на основе его положения в сетке, в то время как метод update гарантирует, что приоритет компонента динамически обновляется, если коробка перемещается перед или за заслоняющим объектом. Использование систем приоритетов и анимации Flame таким образом позволило нам создать эффекты тени, которые всегда помогают пользователям визуально понимать виртуальные пространства и делают их более правдоподобными, а также приводят к более интегрированному визуальному представлению.
