Назад Вперед

Часть 10. Немного музыки.

Займусь музыкальным оформлением мини-игры. В первую очередь нужно подготовить сами аудио-ресурсы. Мне всего понадобится пока три файла для проекта. Первый — фоновая музыка. Второй и третий — короткие звуки для удара об платформу и вылета шара за пределы игровой сцены. Более-менее подходящие файлы нашел на сайтах, где предоставляется бесплатная музыка для скачивания и возможности использования в своих проектах. Благо, пока таких сайтов хватает, но опять же, всегда нужно смотреть на каких условиях предоставляется музыка. И понятно, что для более крупных проектов, такой вариант уже немного не подходит.

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

Программа Audacity

После того, как файлы готовы и находятся в том самом виде, в котором уже можно использовать, перехожу к добавлению их в проект. Сначала скидываю все аудио-ресурсы в папку assets/audio. После чего открываю файл сцены, где загружал изображения и где теперь буду загружать аудио-файлы.

Загрузка аудио-ресурсов

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

Файл preloader.js:


    ...
    this.load.audio('fonSound', './assets/audio/fonSound.mp3');
    this.load.audio('hitBall', './assets/audio/ballAudio.wav');
    this.load.audio('noHitBall', './assets/audio/loseAudio.wav');
    ...
 

Загрузка ресурсов

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

Файл game.js:


    ...
    this.fonAudio = this.sound.add('fonSound');
    ...
 

Следом для это переменной вызываю метод play(), с указанными определенными параметрами. Первый — проигрывание без остановки, второй — громкость (фоновая музыка будет тише звучать остальных звуков).

Файл game.js:


    ...
    this.fonAudio = this.sound.add('fonSound');
    this.fonAudio.play({
        loop: true,
        volume: 0.5
    });
    ...
 

Еще один метод добавлю, который будет выключать музыку, когда открыта другая вкладка в браузере. Выглядит он следующим образом:

Файл game.js:


    ...
    this.fonAudio = this.sound.add('fonSound');
    this.fonAudio.play({
        loop: true,
        volume: 0.5
    });
    this.sound.pauseOnBlur = true;
    ...
 

Фоновая музыка

Сохранив и открыв игру с помощью локального сервера, проверяю, что фоновая музыка играет. Теперь, добавлю метод, который останавливает ее в том же месте, где и прописана остановка шара и платформ в функции update().

Файл game.js:


    ...
    this.fonAudio.stop();
    ...
 

Остановка фоновой музыки

С фоновой музыкой все, теперь добавлю звук удара об платформу. Нахожу функцию callBall() и прямо в ней записываю одну строчку кода для добавления и для проигрывания звука.

Файл game.js:


    ...
    this.sound.add('hitBall').play();
    ...
 

Звук удара

И на этом все с этим звуком. Теперь момент вылета шара за пределы игрового пространства, т.е. звук проигрыша. Его буду добавлять и проигрывать в функции update(), в том месте, где проверяю положение шара по оси Х. Добавляю туда метод для звукового файла. В параметрах указал громкость больше, так как он у меня изначально был тихим по звучанию.

Файл game.js:


    ...
    this.sound.add('noHitBall').play({
        volume: 3
    });
    ...
 

Звук вылета

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

Спасибо за внимание!

Назад Вперед