Как и изображения или спрайты, звук также играет важную роль в играх. Правильная фоновая музыка может установить настроение для игры. Точно так же, включение звуковых эффектов для таких вещей, как падение или стрельба, сделает игру намного интереснее.
Вы также можете добавить сцены в свою игру, чтобы сделать ее более организованной. Например, вместо непосредственного показа игрового экрана пользователям, вы можете сначала показать им домашний экран, где они могут выбрать уровень сложности для игры или увеличить / уменьшить громкость фоновой музыки.
Из этого руководства вы узнаете, как добавлять звуки и сцены в свои игры с помощью Crafty.
Добавление звуков
Процесс добавления звуков в игру аналогичен добавлению листов спрайтов. Вам необходимо создать объект актива, а затем предоставить массив аудиофайлов для различных звуковых эффектов. Crafty загрузит первый файл, который поддерживается браузером. Вот пример:
|
1
2
3
4
5
6
7
8
|
var game_assets = {
«audio»: {
«back_music»: [«back_music.wav», «back_music.ogg», «back_music.mp3»],
«gun_shot»: [«gun_shot.wav», «gun_shot.ogg», «gun_shot.mp3»]
}
};
Crafty.load(game_assets);
|
После того, как вы добавили аудиофайлы, вы можете воспроизводить их с помощью Crafty.audio.play(String id, Number repeatCount, Number volume) . Первый параметр — это Id файла, который мы хотим воспроизвести. Для воспроизведения фоновой музыки, вы можете передать "back_music" как Id .
Вы можете контролировать, сколько раз аудиофайл будет проигрываться, используя второй параметр. Если этот параметр не указан, файл воспроизводится только один раз. Вы, вероятно, хотели бы постоянно играть некоторые звуки. Одним из таких примеров является фоновая музыка игры. Это может быть достигнуто установкой второго параметра на -1.
Третий параметр контролирует громкость данного аудиофайла. Может иметь любое значение от 0,0 до 1,0. Это код для воспроизведения фоновой музыки:
|
1
|
Crafty.audio.play(«back_music», -1, 0.5);
|
Вы также можете воспроизводить аудиофайлы, основываясь на некоторых событиях, таких как столкновение объектов или нажатие клавиши.
|
1
2
3
4
5
6
|
walking_hero.bind(‘KeyDown’, function(evt) {
if (evt.key == Crafty.keys.UP_ARROW) {
walking_hero.animate(«jumping», 1);
Crafty.audio.play(«gun_shot», 1);
}
});
|
Имейте в виду, что вам нужно добавить компонент Keyboard к вашему герою, прежде чем он сможет обнаружить событие KeyDown . Приведенный выше код связывает событие KeyDown с героем и проверяет, была ли клавиша нажата с помощью evt.key . Если нажата клавиша «Стрелка вверх», анимация прыжка воспроизводится для героя один раз. Звук выстрела также звучит.
Попробуйте нажать клавишу со стрелкой вверх в следующей демонстрации, и вы увидите все это в действии. Я закомментировал строчку, которая воспроизводит фоновую музыку, но вы можете просто раскомментировать ее, играя с демо.
Фоновая музыка в демоверсии была создана Розалилой , а звук выстрела — Luke.RUSTLTD .
Есть много других методов, которые вы можете использовать для манипулирования звуками, которые играет Crafty. Вы можете отключить или включить звук всех аудиофайлов, которые воспроизводятся в игре, используя .mute() и .unmute() соответственно. Вы также можете приостановить и возобновить воспроизведение аудиофайлов на основе их Id , используя .pause(Id) и .unpause(Id) .
Существует ограничение на максимальное количество звуков, которые могут воспроизводиться одновременно в Crafty. Ограничение по умолчанию для этого значения равно 7. Каждый из одновременно воспроизводимых звуков является каналом. Однако вы можете установить собственное значение с помощью Crafty.audio.setChannels(Number n) . Вы также можете проверить, воспроизводится ли данный аудиофайл хотя бы на одном канале, с помощью .isPlaying(string ID) . Он вернет логическое значение, указывающее, воспроизводится ли звук или нет.
Сцены в Лукавом
Экран игры, как правило, не первое, что вы видите в игре. Обычно первый экран, который вы видите, это экран загрузки или экран главного меню. Затем, после того, как вы установили различные параметры, такие как уровень звука или уровень сложности, вы можете нажать кнопку воспроизведения, чтобы перейти к реальному экрану игры. Наконец, когда игра окончена, вы можете показать пользователям игру поверх экрана.
Эти различные игровые экраны или сцены делают вашу игру более организованной. Сцена в Crafty может быть создана путем вызова Crafty.defineScene(String sceneName, Function init[, Function uninit]) .
Первый параметр — это имя сцены. Вторым параметром является функция инициализации, которая устанавливает вещи при воспроизведении сцены. Третий параметр является необязательной функцией, которая выполняется до воспроизведения следующей сцены и после того, как все объекты с 2D компонентом в текущей сцене были уничтожены.
Вот код для определения экрана загрузки:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
Crafty.defineScene(«loading_screen», function() {
Crafty.background(«orange»);
var loadingText = Crafty.e(«2D, Canvas, Text, Keyboard»)
.attr({ x: 140, y: 120 })
.text(«Scenes Demo»)
.textFont({ size: ’50px’, weight: ‘bold’ })
.textColor(«white»);
loadingText.bind(‘KeyDown’, function(evt) {
Crafty.enterScene(«game_screen»);
});
});
|
В приведенном выше коде я определил сцену "loading_screen" . Функция инициализации устанавливает оранжевый цвет фона и показывает некоторый текст, чтобы дать пользователю некоторую информацию о том, что будет дальше. Вы можете включить логотип и некоторые пункты меню в настоящую игру здесь. Нажатие любой клавиши, когда холст находится в фокусе, приведет вас к реальному экрану игры. Метод .enterScene(String sceneName) был использован здесь для загрузки "game_screen" .
В следующей демонстрации вы можете нажать клавишу ВВЕРХ 10 раз, чтобы перейти к последнему экрану.
Вывод
После завершения этого урока вы сможете добавлять различные звуковые эффекты в свою игру и управлять выводом звука. Теперь вы также можете показывать разные экраны пользователю в разных ситуациях. Я должен напомнить вам, что я использовал Crafty версии 0.7.1 в этом руководстве, и демоверсии могут не работать с другими версиями библиотеки.
В следующем и последнем уроке этой серии вы узнаете, как улучшить обнаружение столкновений в Crafty.