Как я создал свою первую Android игру на React Native

Привет. Я - Progosling. Сегодня я расскажу о том, как я написал свою первую мобильную игру на React Native. Все началось, когда я нашел бесплатные графические ресурсы для своей игры. Они вдохновили меня на создание проекта. Вот ресурсы для воды, лодки, рыбака и облаков.

React Native имеет ряд широко признанных библиотек в сообществе, которые часто используются для создания анимации движения элементов. Обычно это: react-native-reanimated и react-native-redash. Но недавно сейчас есть библиотека react-native-skia. Она включает интеграцию с react-native-reanimated, react-native-redash. Также включает в себя Canvas, который будет основой для отрисовки нашей игры.

Вся игра создана с использованием компонента <Image>. В нем я изменяю положение изображения в зависимости от текущего кадра. Как это работает? Я обернул <Image /> в <Group /> , чтобы можно было обрезать лишние кадры и отображать только текущий, используя свойства clip.

Так выглядит финальная анимация.

Вода представляет собой изображение, объединенное в группу, и позиция этой группы изменяется в зависимости от функции useTiming. Для каждого куска изображения воды текущий кадр изменяется в зависимости от useTiming. Это делает анимацию движения воды более интересной.

Анимация движения весла зависит от useTouchHandler и просто добавляет +10 или -10 к позиции лодки в зависимости от того, с какой стороны экрана кликнул пользователь. Анимация гребли лодки также запускается из useTouchHandler и функция runTiming изменяет текущий кадр.

Анимация ловли рыбы запускается из useTouchHandler, аналогично анимации гребли лодки. Однако в анимации вытаскивания есть особенность, в функции runTiming добавляется обратный вызов (callback), в котором выполняется проверка. Если позиция удочки и позиция рыбы совпадают, пользователь получает +1 очко. Очки обновляются с использованием обычного setState.

Последний элемент — это начальное и конечное модальное окно. Это компонент <Modal />.

Вы можете оценить эту игру в Google Play и посетить сайт игры. Игра называется Fishing Pixel Art. Пробовали ли вы создавать игры с использованием React Native? Что бы вы порекомендовали изменить и оптимизировать?