Создание платформенной игры с помощью React Native

В этой серии публикаций мы будем разрабатывать римейк классической аркадной игры Donkey Kong с использованием React Native и React Native Game Engine. Поскольку это будет игра только для мобильных устройств, мы собираемся значительно упростить управление по сравнению с оригиналом - в нашу игру можно играть только одним пальцем.

Вот предварительный просмотр того, чего мы пытаемся достичь:

Если вы не знакомы с оригинальной игрой, наш персонаж Марио (первоначально известный как Jump Man) пытается спасти принцессу (первоначально известную как Полина), уклоняясь от бочек, которые главный антагонист сбрасывает с ряда спусков - Конг. Перейдите на Youtube для демонстрации игрового процесса приложения, которое мы создаем.

Чтобы этот процесс продолжался в хорошем темпе, это не будет построчное руководство - мы рассмотрим некоторые важные и заслуживающие внимания темы. См. Полный исходный код в React Native Donkey Kong.

Настройка проекта

После того, как вы инициализировали ванильный React Native или Expo project, установите следующие предварительные условия:

React Native Game Engine

Эта библиотека поможет нам запускать нашу игру в цикле и управлять нашими игровыми объектами (игроками; снарядами; противниками; лестницами; платформами и т. Д.). В частности, мы будем использовать компонент GameEngine, который представляет собой свободную реализацию паттерна Компонент-Сущность-Системы.

npm install — save react-native-game-engine

Matter JS

Это 2D-библиотека физики, которая поможет нам смоделировать метание снарядов по серии наклонных пандусов (см. Предварительный просмотр выше). Это также поможет нам переместить нашего персонажа Марио по пандусам к принцессе.

npm install --save matter-js

Другие пакеты NPM

npm install --save lodash # Always good to have
npm install  --save d3-interpolate # Will help us create a nice jump curve

Ресурс спрайтеров

На сайте Spriters Resource я нашел несколько отличных иллюстраций и ассетов. Здесь я нашел оригинальные листы спрайтов для Donkey Kong. У них есть активы для тонны других игр.

В частности, огромное спасибо Zeon за его отличные таблицы спрайтов Donkey Kong, которые я активно использовал на протяжении всей игры.

Асепрайт

Чтобы редактировать, нарезать и масштабировать спрайты для нашей игры, я использовал отличный инструмент для создания пиксельной графики под названием Aseprite.

В этом уроке нам не нужно редактировать какие-либо изображения - мы просто будем использовать спрайты изображений из репозитория React Native Donkey Kong.

Запуск игровых объектов

Игровые объекты - это все игровые объекты в нашем игровом мире (они не обязательно должны быть видимыми), и мы можем добавлять и удалять их по своему усмотрению. В нашей игре это будет Марио; платформы; бочки; Принцесса; Конг; лестницы и т. д.

Во-первых, давайте закодируем компоненты для сущностей нашей платформы. Создайте следующий файл platform.js:

Давайте проследим за этим с помощью mario.js (персонажа, управляемого игроком):

Возможно, вы заметили, что мы упомянули файл constants.js. Он содержит карту категорий столкновений, которую наш физический движок использует для определения, какие игровые объекты должны столкнуться.

Давайте создадим наш первый (и единственный) уровень, создадим файл с именем entity.js:

Теперь давайте обновим наш файл App.js:

Обратите внимание, что мы можем передать потомков в наш компонент GameEngine, и они будут отображаться после наших сущностей.

Запуск нашей игры

Теперь мы можем запустить наше приложение react-native run-ios и, надеюсь, мы сможем увидеть, как наши семь платформ и Mario визуализируются нашим компонентом GameEngine.

Должен отметить, что все, что мы делаем, будет работать и на Android - я просто для краткости остановлюсь на iOS.