Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 6979
Скачиваний: 115
106
Глава 6
После настройки (setup) менеджера событий (п. 4.3)
игра полностью готова к исполнению.
Исполнение начинается после вызова функции play
менеджера игры.
function play() {
setInterval(updateWorld, 100);
}
С использованием встроенной функции setInterval на"
страивается вызов updateWorld каждые 100 мс. Функция
updateWorld должна быть описана вне менеджера игры и
выполнять единственный вызов.
function updateWorld() {
gameManager.update();
}
Создание вспомогательной функции updateWorld по"
зволяет внутри функции update менеджера игры (game
Manager) использовать указатель this в качестве указате"
ля на gameManager. Если разработчик напрямую восполь"
зуется update при настройке интервала вызова (например,
setInterval(gameManager.update, 100)), то внутри функ"
ции update ему придется вместо this использовать пере"
менную gameManager.
ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ
1. Для чего нужны поля factory и entities менеджера игры?
2. Где инициализируется и где используется поле factory?
3. Зачем нужно отложенное удаление объектов?
4. Почему в функции play не рекомендуется использовать при
настройке setInterval непосредственный вызов gameManager.
update?
Г Л А В А 7
УПРАВЛЕНИЕ ЗВУКОМ
Для погружения пользователя в игру необходимо ис
пользовать не только сюжетную линию и эффектную гра
фику, но и звуковое сопровождение. В HTML5 добавлен
специальный тег <audio>, который позволяет воспроиз
водить аудиофайлы.
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
В приведенном фрагменте HTML атрибут controls тега
<audio> включает отображение панели управления про
игрыванием аудиофайла. Тег <source> с помощью атри
бута src указывает путь к аудиофайлу, атрибут type ука
зывает его тип. В результате на HTMLстранице появля
ется плейер, с помощью которого можно воспроизводить
аудиофайлы. Использование данного плейера для озвучи
вания игр не очень удобно, но возможно [12], [13]. Совре
менные браузеры поддерживают Web Audio API, которое
позволяет проигрывать звуки из JavaScript. Приведенный
в данной главе программный код проверен на браузерах
Google Chrome версии 39 и Mozilla Firefox версии 35. Под
робно ознакомиться с работой со звуком в браузере можно
в [19], [20].
7.1.
ЗАГРУЗКА И ПРОИГРЫВАНИЕ
АУДИОФАЙЛОВ
Рассмотрим простейший вариант загрузки и проигры
вания аудиофайлов в браузере.
108
Глава 7
ПРОИГРЫВАНИЕ АУДИОФАЙЛОВ
<html>
<body>
<script>
var context = new AudioContext(); // ñîçäàíèå êîíòåêñòà çâóêà
function loadSound(url) {
var request = new XMLHttpRequest();
// ñîçäàíèå àñèíõðîííîãî çàïðîñà
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// òèï ðåçóëüòàòà - áàéòû
request.onload = function () {
context.decodeAudioData(request.response,
function (buffer) {
playSound(buffer); // ïîëó÷åííûé ïîòîê áàéò -
// îçâó÷èòü
});
};
request.send();
}
function playSound(buffer) {
var sound = context.createBufferSource();
// Ñîçäàåòñÿ èñòî÷íèê çâóêà
sound.buffer = buffer; // íàñòðàèâàåòñÿ áóôåð
sound.connect(context.destination);
// ïîäêëþ÷åíèå èñòî÷íèêà ê "êîëîíêàì"
if(!sound.start)
sound.start = sound.noteOn; // ïîääåðæêà
// "ñòàðûõ" áðàóçåðîâ
sound.start(0); // ïðîèãðûâàíèå çâóêà
}
loadSound("effects/boom.wav"); // çàãðóçêà çâóêà
</script>
</body>
</html>
Работа с аудиофайлом осуществляется с использова
нием специального аудиоконтекста, для загрузки файла
создана функция loadSound, для проигрывания — функ
ция playSound.
var context = new AudioContext();
Управление звуком
109
На основании встроенного объекта Web Audio API
(AudioContext) создается новая переменная context, ко
торая будет использоваться в функциях loadSound и
playSound.
Функция loadSound загружает звук из файла (url) с
помощью асинхронного запроса с использованием AJAX
технологий. Запросы этого типа уже рассматривались в
данном учебном пособии, поэтому остановимся только на
отличиях. Создается новая переменная request для отправ
ки запроса на сервер, настраивается метод отправки зап
роса.
request.responseType = 'arraybuffer';
В качестве типа ответа устанавливается «arraybuffer»,
который указывает, что с сервера будет получен поток
байт.
request.onload = function () {
}
Настраивается функция onload запроса, которая бу
дет выполнена после окончания загрузки файла в браузер
пользователя.
context.decodeAudioData(request.response, function (buffer)
{ playSound(buffer); });
После окончания загрузки файла в браузер в поле
request.response хранится загруженный поток байт, ко
торый передается встроенной функции decodeAudioData
аудиоконтекста. Данная функция принимает дополни
тельный параметр — функцию, которая будет обрабаты
вать поток байт (playSound(buffer)). Затем вызывается
send для отправки запроса на сервер.
Функция playSound принимает в качестве параметра
поток байт (buffer) и обеспечивает проигрывание аудио
файла.
var sound = context.createBufferSource();
С использованием встроенной функции createBuffer
Source аудиоконтекста создается источник звука, кото
рый сохраняется в новой переменной sound.
sound.buffer = buffer;
110
Глава 7
Указывается, какой звук будет проигрываться (на
страивается поле buffer).
sound.connect(context.destination);
С использованием встроенного поля destination аудио
контекста выполняется подключение звука к колонкам.
Дело в том, что звук до проигрывания может быть пропу
щен через специальные обработчики, в данном случае звук
напрямую отправляется на проигрывание.
if(!sound.start) sound.start = sound.noteOn;
Для поддержки «старых» браузеров перенастраивает
ся функция start, в предыдущей версии Web Audio API
проигрывание звука осуществлялось с помощью функции
noteOn.
sound.start(0);
С помощью функции start выполняется запуск аудио
файла на проигрывание. В качестве параметра передает
ся время в секундах, через какое должно начаться проиг
рывание аудиофайла. В данном случае — через 0 с, т. е.
немедленно.
loadSound("effects/boom.wav");
Функция loadSound загружает файл «effects/boom.
wav» и выполняет его проигрывание.
При разработке игры может оказаться недостаточным
просто проигрывать звуки, необходимо иметь возмож
ность как минимум изменять их громкость, для этого Web
Audio API предоставляет соответствующие механизмы.
ПРОИГРЫВАНИЕ АУДИОФАЙЛОВ
С НАСТРОЙКОЙ ГРОМКОСТИ ЗВУКА
<html>
<body>
<script>
var context = new AudioContext(); // ñîçäàíèå êîíòåêñòà çâóêà
var gainNode = context.createGain ? context.createGain() :
context.createGainNode();
gainNode.connect(context.destination); // ïîäêëþ÷åíèå
// ê äèíàìèêàì