Задумывались ли вы когда-нибудь о разработке игр на JavaScript?
Думаю что большинство ответят на этот вопрос - положительно. А на React Native? Не думаю.
React Native обладает почти всем необходимым для разработки игр.
Есть возможность разделять логику и игровые компоненты. Инструменты программного анимирования элементов, их трансформирование, перемещение по экрану, а самое главное заявленное наличие 60 FPS.
Чего же не хватает?
Большинство игр используют Game Loop или GamePlay Loop - принцип, согласно которому геймдзинайеры задают главный элемент игровой механики, который определяет фундаментальный опыт игрока. Один игровой цикл представляет собой действие игрока, результат этого действия в игровом мире, реакцию игрока на результат и запрос игры на повторение нового действия.
На React Native, да и в целом на React реализовать классический Game Loop весьма проблематично. При плохой реализации React может встать в ступор, это может привести к утечки оперативной памяти клиентской стороны и множественному перерендеру. Для этой цели разработали 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 - возможность использовать сенсоры устройства, например, гироскоп
Примечание от автора статьи
Конечно если вы в серьез задумывались о разработке игр на мобильные устройства - лучше обратить внимание на простой в освоении Unity и язык СSharp, что очень похож на TypeScript. Однако при помощи технологий описанных в данной статье - можно быстро реализовать простые игры, например змейку, тетрис, крестики нолики или игры жанра три в ряд
