В предыдущем рассказе я описал базовые шаги по настройке проекта. Прочитайте его, если еще не сделали этого.

В этот раз речь пойдет о немного более сложных вещах, таких, как управление состоянием, компоненты высшего порядка и Gamepad API.

Шаг 6. Движение

Как вообще-то передвигать персонажа (который есть набор отдельных 3D-объектов) в пространстве? Я уже рассказывал ранее в 4 шаге о том, об объединении объектов в группу. Еще раз: вы можете перемещать группу с линейной скоростью; в сумме с подходящей анимацией это будет выглядеть как ходьба или бег, в зависимости от вашей задумки.

То есть если стоит задача передвигать NPC в каком-то направлении, скажем, на север, то нужно всего лишь:

Повернуть его в этом направлении
Мало-по-малу передвигать

Самый удобный, по-моему, способ - это использовать композицию. Для этого я создам файл /hoc/Movable.jsx со следующим поведением:

Этот компонент берет всех потомков и перемещает их в направлении вектора heading в каждом новом кадре. Свойство Velocity отвечает за то, как далеко он это делает. Обратите внимание на onMove: о нем мы поговорим чуть позже.

Кстати, добавился еще хелпер /helpers/getRotation.js который делает некоторую магию школы кватернионов, чтобы собственно поворачивать группу.

Теперь, если обернуть персонажа в компонент <Movable /> то он будет двигаться. Зацените демо:

The Game

iyy6h.csb.app

Шаг 7. Поддержка геймпада

Раньше, вплоть до начала карантина, у меня не было геймпада. Я купил его просто попробовать. И оказалось, что это довольно удобный способ управления (никогда бы не подумал, но Diablo II: Resurrected с геймпадом - это что-то с чем-то). А в chrome поддержка геймпадов была еще давным-давно. Так что же мешает поэкспериментировать?

Gamepad API - довольно простая штука; можно даже брать код из примеров. Но чтобы заморачиваться еще меньше, я буду использовать библиотеку Gamepads. Используя контекст в реакте можно просто описать весь связующий код в одном месте и получать информацию о нажатиях кнопок, направлении и силе нажатия на стики прямо в компоненте Movable. Вот тут можно посмотреть реализацию: /GamepadControls.jsx — колбеки для геймпада и клавиш WASD на клавиатуре (ссылка); /Player.jsx — небольшая обертка над моделью игрока, которая и будет реагировать на ваши действия (ссылка).

Теперь я заменю всех NPC в index.js этим:

<GamepadControls>
  <Player />
</GamepadControls>

И все!

The Game

stl9f.csb.app

Используйте геймпад, если он у вас, конечно, есть, или клавиатуру.

Следующий важный вопрос: "Как соединить всех зомби, игрока и файрболы? Как враги узнают, где находится игрок?". И ответ - вы его знаете - глобальное состояние.

Шаг 8. Управление состоянием

Бесспорно, никакой фронтед-проект в 2021 не обходится без слоя управления состоянием. Игры не исключение. Вы, конечно, можете брать вашу любимую библиотеку, пусть то Redux, MobX, effector или что-то еще. В этом вообще никакой разницы. Я выбрал Zustand.

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

Добавились следующие хранилища в папке /store:

Надеюсь, названия методов говорят сами за себя. Player хранит позицию (она должна быть доступна всем) и жизни игрока; zombies - id каждого врага, их местоположение и hp. Наконец, fireballs используется для управления количеством и направлениями всех файрболов в сцене.

Теперь компонент Player выглядит так:

А Fireball - так:

И еще зацените компонент Zombie особенно вот эти места:

Теперь зомби преследуют вас, куда бы вы ни пошли.

Полный код этого примера доступен тут, за одним исключением: в codesandbox какие-то проблемы с парсингом .fbx, так что все модели там заменены на цветные кубики.

miro.medium.com

Спасибо за внимание! В следующий раз я разберу вопрос столкновений и UI.

Дополнение

Есть вероятность, что ваш геймпад не заработает в демке. Проблема в маппинге. У меня самый простой геймпад со стандартным маппингом, а за нестандартным обращайтесь к документации библиотеки Gamepads.

Как сегодня делают игры в браузере? Часть 2