Как создать анимацию с несколькими состояниями в вашей игре HTML5

Энди Харрис

Поскольку все это движение происходит в вашей игре HTML5, вам обязательно понадобится множество сложных анимаций. Вы можете использоватьchangeImage ()или жеsetImage ()функция (это два разных названия одного и того же), чтобы в любой момент изменить изображение, связанное со спрайтом. Однако иногда вам нужны более сложные анимации. Взгляни наwalkAnim.html.

image0.jpg



Здесь происходит очень много смены изображений. Анимация ходьбы на самом деле представляет собой серию из восьми различных изображений, которые быстро меняются местами, чтобы создать иллюзию ходьбы. Есть 4 разных анимации (по одной для каждого из сторон света), всего 32 разных изображения. Однако, если вы посмотрите на код, вы увидите, чтоперсонажспрайт содержит только одно изображение.

image1.jpg

Это изображение представляет собой составную анимацию. Каждая строка представляет направление, и каждая строка содержит цикл или серию изображений, предназначенных для повторения.

Вrpg_sprite_walk.pngизображение было создано Franck Dupont. Он великодушно разместил это изображение в Сайт OpenGameArt.org , где он известен как Арикель. Он выпустил свою работу под специальной лицензией под названием Attribution - Share Alike. Это означает, что люди могут использовать или ремикшировать его работу бесплатно, если они приписывают оригинального автора.

Фоновое изображение создано автором по имени Hyptosis, который опубликовал изображения в открытом доступе на том же сайте. Талантливые и вдумчивые участники, такие как Franck и Hyptosis, являются ключом к процветающему творческому сообществу. Не стесняйтесь просматривать сайт с открытым игровым искусством, чтобы найти еще больше прекрасных иллюстраций для использования в своих играх, но обязательно поблагодарите авторов и поставьте им такую ​​отметку, как они того заслуживают.

ВsimpleGame.jsБиблиотека содержит функцию для простого создания анимации с несколькими изображениями. Посмотрите код дляwalkAnim.htmlчтобы увидеть, как это работает:

 walkAnim.html 

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

  1. Получите анимационное изображение.

    Вы можете создать изображение самостоятельно или посмотреть отличные ресурсы, такие как OpenGameArt.org, чтобы найти работу, которую сделали другие. Конечно, вы обязаны уважать чужую работу, но сегодня есть отличные работы, доступные в очень разрешительных лицензиях. Убедитесь, что изображение организовано по строкам и столбцам и что все фрагменты изображения имеют точно такой же размер.

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

  2. Прикрепите анимационное изображение к вашему спрайту.

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

  3. Создайте объект анимации с помощьюloadAnimation ()метод.

    дозировка триазолама по весу

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

    character.loadAnimation(192, 128, 24, 32);
  4. Постройте циклы анимации.

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

    character.generateAnimationCycles();
  5. Переименуйте циклы.

    Анимации, созданные с помощьюbuildAnimationCycles ()команды имеют имена по умолчанию, но почти всегда лучше добавлять собственные, более значимые имена. Добавьте массив с именем, указывающим, что представляет каждая строка:

    character.renameCycles(new Array('down', 'up', 'left', 'right'));
  6. Установите скорость анимации.

    Скорость анимации указывает, насколько быстро будет выполняться анимация. Значение 500 кажется правильным для большинства приложений, но вы можете настроить это значение так, чтобы цикл ходьбы персонажа выглядел так, как будто он действительно продвигает персонажа:

    character.setAnimationSpeed(500);
  7. Установите, какой цикл вы хотите отображать.

    ВsetCurrentCycle ()позволяет выбрать цикл с одним из названий, которые вы указали вrenameAnimationCycles ()шаг:

    character.setCurrentCycle('down');
  8. ИспользоватьpauseAnimation ()команда, чтобы приостановить анимацию.

    ВpauseAnimation ()команда временно останавливает анимацию.

  9. ИспользоватьplayAnimation ()чтобы начать анимацию.

    Этот метод будет непрерывно повторять текущий цикл анимации.

Как видите, анимация добавляет огромное удовольствие в игру и открывает целый мир ролевых игр в вашем репертуаре.