Изучите расширенные шаблоны React, разработав игру со спрайт-анимацией

1656568216 izuchite rasshirennye shablony react razrabotav igru so sprajt animacziej

Павла Власова

1*p6Q4wwQ2m1D_rGYvRBRPWg
Проверьте мои окончательные дизайнерские навыки

Вы когда-нибудь хотели изучить некоторые продвинутые шаблоны React? Или создать свой игровой движок? Если хотя бы один ответ утвердителен, то эта статья для вас.

В этом учебнике вы узнаете, как создать базовую спрайт-анимацию с помощью Отреагироватьстили-компоненты, и requestAnimationFrame. В конце концов вы сможете создать следующих персонажей:

1*Ig-pwnKpjNtc2xaM0HMR6A

Вы можете спросить меня чему я не могу научиться этому другим способом? Ну… На это есть три причины:

1*rBqlCIMpp_nQPy2EEpB0Hw

Итак, давайте это сделаем! ?

Начнем немного с теории

Что такое спрайт-анимация? Википедия говорит об этом

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

Итак, в основном спрайтовая анимация — это двумерное растровое изображение, многократно изменяющееся.

Спрайт обычно представлен в виде png-изображения с разными состояниями анимации:

1*hbOGCHijQurkW40hwnocDw
Растровое изображение

Мы начнем с создания компонента плитки, который будет показывать нам один кадр за раз и позволит нам изменять кадры государство собственность:

1*fuAsHwFdlqR1qUw2b36GlA

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

Плитка

Прежде всего, мы создадим компонент контейнера, чтобы создать форму нашего кадра:

width и height представляют размер сказки, и scale увеличивает размер изображения. overflow: hidden скроет неиспользованную часть изображения и transform-origin создаст контейнер, чтобы сохранить его верх и левый, когда мы его масштабируем.

Теперь нам нужно настроить положение внутреннего изображения. Мы будем использовать transform: translate Свойство CSS для этого:

Теперь давайте объединим все вместе в компоненте плитки:

  • src свойство содержит ссылку на изображение
  • tile является объектом с width и height поля, представляет размер плитки
  • state индекс кадра
  • scale свойство увеличить размер изображения (например, scale = 2 2x изображение)

На следующем шаге мы добавим немного движения к нашему изображению.

спрайт

Мы воспользуемся requestAnimationFrame для того. Вы можете спросить, почему мы не используем setTimeout или setInterval. Проблема с тайм-аутами состоит в том, что обратный вызов будет запускаться где-то между кадрами, что может привести к неловкой анимации.

1*2UnyL2Wr6r2OIDvogPpNLQ
requestAnimationFrame против setInterval

также, requestAnimationFrame позволяет синхронизировать анимацию разных объектов на экране. В игре у вас их будет много!

Давайте соберем компонент Sprite:

В animate функции, мы должны изменить state кадра и запросите новый кадр анимации:

Мы используем eframesPerStep свойство управлять количеством состояний на кадр, поэтому наша анимация не будет слишком быстрой.

А пистолет? ?

Теперь единственное, что нам нужно сделать, это соединить наш спрайт с изображением оружия:

И вы должны получить следующий результат:

1*Mi4Xn8yPVYO7nDBf5TBXdg

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

Версия TypeScript также доступна здесь.

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

Вы можете найти исходный код здесь. Я использовал игровые ресурсы от finalbossblues.

Надеюсь, вам понравилась статья! ?

Следите за мной на Medium и Twitter, чтобы получать больше обновлений о новых статьях. Также поделитесь этой статьей, чтобы другие узнали ее. Делиться – это забота?

Уничтожьте эту кнопку, если хотите больше.

Вы можете хлопать до 50 раз! ?

Еще несколько ресурсов по этой теме:

Понимание метода JavaScript requestAnimationFrame() для плавной анимации
requestAnimationFrame() — это метод JavaScript для создания более гладких, менее ресурсоемких JavaScript-анимаций.www.javascriptkit.com

Первоначально опубликовано на react.camp.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *