Во всех хитрых уроках до этого момента вы использовали квадратные или прямоугольные прямоугольники для понимания различных концепций, таких как анимация и клавиатура или сенсорные события. Хотя это отличный способ быстро узнать больше о библиотеке, вам, скорее всего, понравится использовать изображения в реальных играх.
В этом уроке вы узнаете, как загружать спрайт- листы для использования различных изображений в вашей игре. После этого вы научитесь анимировать разных персонажей с помощью спрайтовой анимации.
Загрузка листа спрайта
Для тех, кто незнаком с листами спрайтов, это файлы изображений, которые содержат несколько небольших графических изображений, расположенных вместе в сетке. Каждое из этих меньших графических изображений или спрайтов может использоваться отдельно или вместе с другими изображениями для анимации различных объектов.
Вы не можете просто загрузить спрайт-лист в Crafty и начать его использовать. Вам также нужно будет указать ширину и высоту различных плиток или спрайтов в вашем листе спрайтов. Вы также можете дать конкретные имена для отдельных изображений. Например, спрайт с небольшим камнем в нем может быть назван «small_stone» для удобства. Запоминание названия плитки намного проще, чем запоминание фактических координат различных изображений.
Мы собираемся использовать следующий лист спрайтов от Tokka в различных демонстрационных материалах этого урока.
В нем много изображений, которые можно использовать, когда игрок идет, прыгает, бездействует или получает выстрел. В этом случае ширина и высота большинства плиток составляют 80 пикселей и 94 пикселя соответственно. Некоторые спрайт-листы могут также иметь дополнительные отступы вокруг отдельных плиток или спрайт-листа в целом. Они могут быть указаны при загрузке листа спрайта с использованием paddingX , paddingY и paddingAroundBorder .
Вот код, который нам нужен для загрузки вышеуказанного спрайт-листа в нашей игре:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
var game_assets = {
«sprites»: {
«hero_spritesheet.png»: {
tile: 80,
tileh: 94,
map: {
hero_idle: [0, 0],
hero_walking: [1, 1],
hero_jumping: [2, 3],
hero_sitting: [0, 4]
}
}
}
};
Crafty.load(game_assets);
|
На плитки ссылаются, используя пару чисел. Первое число определяет столбец нашего спрайта, а второе число определяет его строку. Числа начинаются с нуля. Например, спрайт в первом столбце и первой строке можно получить с помощью [0, 0] . Аналогичным образом, доступ к спрайту в третьем столбце и четвертом ряду можно получить с помощью [2, 3] . Как упоминалось ранее, вы можете дать разные имена отдельным спрайтам для простоты использования.
Рендеринг статических спрайтов
После загрузки спрайт-листа вы можете отобразить изображения на экране, используя следующий код:
|
1
2
|
var idle_hero = Crafty.e(«2D, Canvas, hero_idle»)
.attr({ x: 10, y: 10 });
|
Атрибуты x и y определяют местоположение, в котором будут отображаться спрайты. Вы также можете установить ширину и высоту отдельных спрайтов, используя атрибуты w и h .
Поскольку спрайт имеет 2D компонент, вы можете применить все свойства и атрибуты 2D компонента к этим изображениям. Например, вы можете перевернуть нашего героя горизонтально, чтобы он this.flip("X") в другом направлении, используя this.flip("X") . Точно так же вы можете вращать спрайт с помощью атрибута rotation или сделать его прозрачным с помощью атрибута alpha .
|
1
2
3
|
var sitting_hero = Crafty.e(«2D, Canvas, hero_sitting»)
.attr({ x: 440, y: 250 })
.flip(«X»);
|
Допустим, вам нужно визуализировать только часть заданного спрайта на холсте. Это можно сделать с помощью метода .crop(Number x, Number y, Number w, Number h) . Первые два параметра определяют значения смещения x и y спрайта. Последние два параметра определяют ширину и высоту обрезанного спрайта. Все значения должны быть указаны в пикселях.
Анимация спрайтов
До этого момента вы перемещали различные объекты, изменяя их атрибуты x и y . Это не было проблемой, так как большую часть времени вы перемещали только прямоугольные коробки. Однако перемещать нашего главного героя, двигая его так, будет очень неестественно. Добавление анимации к таким объектам, как монеты, которые игрок может собирать, также сделает игру более приятной.
Все анимации, связанные со спрайтами, требуют добавления к SpriteAnimation компонента SpriteAnimation . Этот компонент обрабатывает различные изображения в карте спрайта как кадры анимации.
Информация об анимации хранится в объекте reel . Объект reel имеет пять различных свойств:
-
idкоторый является названием барабана - массив
frames, содержащий список кадров для анимации в формате[xpos, ypos] - свойство
currentFrameкоторое возвращает индекс текущего кадра - свойство
easingкоторое определяет, как анимация должна двигаться вперед - свойство
durationкоторое устанавливает продолжительность анимации в миллисекундах
Существует четыре различных события, которые могут быть вызваны спрайтовой анимацией. Эти:
- StartAnimation : это событие вызывается, когда анимация начинает воспроизводиться или возобновляется из состояния паузы.
- AnimationEnd : это событие вызывается, когда заканчивается анимация.
- FrameChange : это событие срабатывает каждый раз, когда меняется кадр в текущем барабане.
- ReelChange : это событие срабатывает при смене самого барабана.
Все эти события получают объект reel в качестве параметра.
Помимо объекта reel , есть также метод .reel() который используется для определения анимации спрайтов. Вы можете использовать метод .animate() для воспроизведения любой из определенных анимаций.
Процесс анимации спрайта начинается с создания статического спрайта на холсте.
|
1
2
3
4
5
|
var walking_hero = Crafty.e(‘2D, Canvas, hero_walking, SpriteAnimation’)
.attr({
x: 40,
y: 20
});
|
Изображение hero_walking в приведенном выше случае — это первое изображение, которое пользователь видит перед анимацией. Атрибуты используются для указания местоположения текущего объекта. После того, как объект был создан, вы можете использовать метод .reel() для определения фактической анимации.
|
1
2
3
4
5
6
7
8
|
walking_hero.reel(«walking», 1000, [
[0, 1],
[1, 1],
[2, 1],
[3, 1],
[4, 1],
[5, 1]
]);
|
Этот метод принимает три параметра. Первый параметр — это Id создаваемой анимации. Второй параметр используется для установки длины анимации в миллисекундах, а третий параметр представляет собой массив массивов, содержащих позицию столбца (x) и строки (y) последовательных кадров. В этом случае массив содержит позицию всех спрайтов во втором ряду.
Другая версия этого метода требует пять параметров. Первые два параметра — это Id барабана и длина анимации. Третий и четвертый параметры используются для установки начальной позиции x и y для анимации на карте спрайтов. Последний параметр устанавливает количество последовательных кадров в анимации. Когда установлено отрицательное значение, анимация будет воспроизводиться задом наперед.
Вышеприведенная анимация барабана также может быть создана с использованием следующего кода:
|
1
|
walking_hero.reel(«walking», 1000, 0, 1, 6);
|
Хотя эта версия краткая, она немного ограничена. Этот метод полезен, только если все спрайты, которые вы хотите включить в анимацию, находятся в одной строке. Кроме того, анимация будет показывать эти изображения в том порядке, в котором они отображаются на листе спрайтов.
После того, как вы определили анимацию, вы можете воспроизвести ее с помощью .animate( reel_Id [, loopCount]) . Первый параметр — это анимация, которую вы хотите воспроизвести, а второй параметр определяет, сколько раз вы хотите воспроизвести эту анимацию. По умолчанию анимация воспроизводится один раз. Установка loopCount в -1 будет воспроизводить анимацию бесконечно.
В определенных ситуациях вам может потребоваться воспроизвести анимацию только один раз в зависимости от события. Например, анимация прыжка должна воспроизводиться, когда пользователь нажимает кнопку, чтобы сделать прыжок игрока. Вы можете попробовать это в приведенной выше демонстрации. Нажатие клавиши « Стрелка вверх» сделает второй скачок спрайта. Вот код для определения нажатия клавиши:
|
1
2
3
4
5
|
jumping_hero.bind(‘KeyDown’, function(evt) {
if (evt.key == Crafty.keys.UP_ARROW) {
jumping_hero.animate(«jumping», 1);
}
});
|
Вы также можете приостановить и возобновить анимацию на полпути, используя .pauseAnimation() и .resumeAnimation() .
Если к одному спрайту прикреплено несколько анимаций, вы можете определить, воспроизводится ли конкретная анимация в данный момент, с помощью .isPlaying([String reelId]) . Если Id не Id , он проверит, воспроизводится ли какая-либо анимация вообще.
Вывод
После завершения этого урока вы сможете загрузить собственные листы спрайтов в Crafty и использовать их для представления различных игровых объектов вместо разных прямоугольников. Теперь вы также можете применять различные анимации к объекту на основе разных событий. Я должен напомнить вам, что я использовал Crafty версии 0.7.1 в этом руководстве, и демоверсии могут не работать с другими версиями библиотеки.
JavaScript стал одним из де-факто языков работы в сети. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
В следующем уроке вы узнаете, как добавлять звуки в вашу игру.