Серьезная разработка игр на React Native в честных 60 FPS

Клон игры Donkey Kong, скриншот сделан с моего iPhone 11 Pro Max

Задумывались ли вы когда-нибудь о разработке игр на JavaScript?

Думаю что большинство ответят на этот вопрос - положительно. А на React Native? Не думаю.

React Native обладает почти всем необходимым для разработки игр.

Есть возможность разделять логику и игровые компоненты. Инструменты программного анимирования элементов, их трансформирование, перемещение по экрану, а самое главное заявленное наличие 60 FPS.

Чего же не хватает?

Большинство игр используют Game Loop или GamePlay Loop - принцип, согласно которому геймдзинайеры задают главный элемент игровой механики, который определяет фундаментальный опыт игрока. Один игровой цикл представляет собой действие игрока, результат этого действия в игровом мире, реакцию игрока на результат и запрос игры на повторение нового действия.

Классическая реализация Game Loop

На React Native, да и в целом на React реализовать классический Game Loop весьма проблематично. При плохой реализации React может встать в ступор, это может привести к утечки оперативной памяти клиентской стороны и множественному перерендеру. Для этой цели разработали React Native Game Engine.

React Native Game Engine

Логотип библиотеки React Native Game Engine

React Native Game Engine - Open Source кроссплатформенная (Android, iOS) библиотека - разработанная командой энтузиастов из Сиднея.

В библиотеку входит надежная реализация Game Loop, под капотом разработанная при помощи знакомой для тех, кто работал с анимациями в React Native - requestAnimationFrame(callback). updateHandler - реагирует на нажатие игроком, передает отклики об этом и ожидает запроса анимаций, чтобы отразить ответ на нажатия - вызывается функция render().

Стоит отметить, что библиотека поддерживает до 10 одновременных касаний сразу после установки.

Необходимые дополнительные библиотеки

Для более качественных игр с React-Native-Game-Engine - рекомендуется использовать и другие библиотеки

• React Native Animatable - библиотека для анимаций
• React Motion - альтернативный вариант для пошаговых анимаций
• Matter JS - библиотека для физического движка
• React Game Kit - еще один вариант использования Game Loop, но я рекомендую не смешивать их с React-Native-Game-Engine
• React Native SVG - поддержка SVG
• React Native Linear Gradient - библиотека построения градиентов для оформления уровней
• React Native Sensors - возможность использовать сенсоры устройства, например, гироскоп
• React Native WebGL, GL React - поддержка WebGL и 3D графики

Demo

Примечание от автора статьи

Конечно если вы в серьез задумывались о разработке игр на мобильные устройства - лучше обратить внимание на простой в освоении Unity и язык СSharp, что очень похож на TypeScript. Однако при помощи технологий описанных в данной статье - можно быстро реализовать простые игры, например змейку, тетрис, крестики нолики или игры жанра три в ряд