1. Серія контенту:
2. Цей контент є частиною серії: Розробка 2D-ігор на HTML5
3. падіння
4. Малюнок 1. Падіння з краю платформи
5. Малюнок 2. Падіння в кінці стрибка
6. Лістинг 1. Маніпулятори бігуна
7. Лістинг 2. Метод fall () бігуна
8. Горизонтальна швидкість бігуна
9. Реалізація гравітації
10. Лістинг 3. Константи, що визначають силу тяжіння і швидкість падіння
11. Лістинг 4. Падіння в кінці стрибка
12. Лістинг 5. Завдання швидкості спрайту і обчислення вертикальної швидкості бігуна для поточного кадру
13. Лістинг 6. Метод execute () маніпулятор падіння
14. Лістинг 7. Виявлення випадання бігуна з гри або падіння бігуна нижче його поточної доріжки
15. Лістинг 8. Визначення наявності платформи під бігуном і приземлення бігуна на платформу
16. Лістинг 9. Метод stopFalling () маніпулятора падіння
17. Призупинення при падінні бігуна
18. Лістинг 10. Призупинення та відновлення маніпулятора падіння
19. Управління звуковими ефектами і музикою
20. Малюнок 3. Органи управління звуком і музикою
21. Лістинг 11. Прапорці Sound і Music гри Snail Bait
22. Лістинг 12. Оброблювачі подій прапорців Sound і Music
23. Лістинг 13. Запуск гри
24. Лістинг 14. Призупинення відтворення музики
25. Реалізація звукових ефектів
26. HTML-елементи audio
27. Лістинг 15. Елементи audio гри Snail Bait
28. Лістинг 16. Звернення до елементів audio гри Snail Bait в JavaScript-коді
29. рівень гучності
30. Лістінг 17. Завдання рівнів гучності для звуків гри Snail Bait
31. Лістинг 18. Завдання рівнів гучності для звуків Snail Bat
32. Одночасне відтворення декількох звуків
33. Лістинг 19. Відтворення звуків за допомогою аудиотреков Snail Bat
34. Відтворення звукових ефектів в грі Snail Bat
35. Лістинг 20. Звук, вироблений бігуном при стрибку
36. Лістинг 21. Вибухи
37. Лістинг 22. Звуки, асоційовані з падіннями
38. Лістинг 23. Звуки зіткнення
39. У наступній статті даного циклу
40. Ресурси для скачування

Розробка 2D-ігор на HTML5

Анімація реалістичних падінь; додавання музики і звукових ефектів

Серія контенту:

Цей контент є частиною # з серії # статей: Розробка 2D-ігор на HTML5

http://www.ibm.com/search/csass/search/?sn=dw&lang=ru&cc=RU&en=utf&hpp=20&dws=rudw&lo=ru&q=%D0%A0%D0%B0%D0%B7%D1%80% D0% B0% D0% B1% D0% BE% D1% 82% D0% BA% D0% B0 + 2D-% D0% B8% D0% B3% D1% 80 +% D0% BD% D0% B0 + HTML5 & Search = % D0% 9F% D0% BE% D0% B8% D1% 81% D0% BA

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Розробка 2D-ігор на HTML5

Слідкуйте за виходом нових статей цієї серії.

Тепер, коли гра Snail Bait здатна виявляти зіткнення - ця можливість була реалізована в попередній статті даного циклу, - необхідно навчити її обробляти важлива подія, що не відноситься до категорії зіткнень: ситуацію, коли бігун промахується повз платформи. У цьому випадку він починає падати. У цій статті я покажу, як врахувати гравітацію для реалізації реалістичного падіння. Гравітація і падіння - це завершальні механічні аспекти геймплея, необхідні грі Snail Bait. Після цього я зміню тему і покажу, як включити в гру звук (в тому числі музику). Повний демонстраційний код для цієї статті можна завантажити з засланні .

падіння

У грі Snail Bait бігун падає в тому випадку, якщо забігає за край платформи або стикається з платформою знизу (див. Рис. 1).

Малюнок 1. Падіння з краю платформи

Крім того, бігун падає в тому випадку, якщо промахується повз платформи в кінці фази зниження при стрибку (див. Рис. 2).

Малюнок 2. Падіння в кінці стрибка

Падіння бігуна реалізується за допомогою об'єкту fall behavior (маніпулятора падіння). У лістингу 1 показана реалізація спрайту бігуна, специфікує масив "маніпулятор" (behavior).

Лістинг 1. Маніпулятори бігуна

Sprite = function () {... this.runner = new Sprite ( 'runner', // type this.runnerArtist, // artist [this.runBehavior, // behaviors this.jumpBehavior, this.collideBehavior, this.fallBehavior, ]); };

Гра Snail Bait викликає маніпулятор падіння бігуна - як і всі інші маніпулятори спрайту - в кожному кадрі анімації, в якому спрайт є видимим. Велику частину часу маніпулятор падіння нічого не робить. Поки атрибут falling бігуна має значення true, маніпулятор падіння інкрементного переміщує бігуна в вертикальному напрямку на кожному кадрі анімації, в результаті чого створюється враження його падіння. Значення цього атрибуту привласнює метод fall () бігуна (див. Лістинг 2).

Лістинг 2. Метод fall () бігуна

SnailBait.prototype = {... equipRunner: function () {... this.equipRunnerForJumping (); this.equipRunnerForFalling (); }, EquipRunnerForFalling: function () {... this.runner.fallAnimationTimer = new AnimationTimer (); this.runner.fall = function (initialVelocity) {// set attributes for the runner's fall behavior and // start the fall animation timer this.velocityY = initialVelocity || 0; this.initialVelocityY = initialVelocity || 0; this.falling = true; this.fallAnimationTimer.start (); }}, ...};

Горизонтальна швидкість бігуна

Єдине завдання маніпулятора падіння бігуна - установка положення бігуна по вертикалі. Маніпулятору падіння немає необхідності міняти горизонтальну швидкість бігуна, - хоча все виглядає так, як ніби бігун переміщається справа наліво (або зліва направо), насправді бігун не рухається в горизонтальному напрямку. Замість цього за бігуном переміщається фон, в результаті чого складається враження, що бігун рухається по горизонталі.

При запуску гри Snail Bait викликає свій метод equipRunner (), який, крім іншого, забезпечує можливості для стрибків і падінь бігуна. Метод equipRunnerForFalling () містить реалізацію методу fall () бігуна. Метод fall () задає початкову швидкість бігуна, привласнює його атрибуту falling значення true і запускає таймер анімації для відстеження часу, що пройшов з початку падіння бігуна.

Коли метод fall () бігуна привласнює атрибуту falling бігуна значення true, він перемикає тригер в маніпуляторі падіння бігуна. Після цього бігун падає до тих пір, поки гра не присвоїть атрибуту бігуна falling значення false. Інша частина розгляду гравітації в рамках даної статті присвячена реалізації цього маніпулятора.

Реалізація гравітації

Гравітація як окремий випадок

Гравітація породжує нелінійне рух, яке я розглядав в сьомий статті даного циклу. В тій статті я реалізував нелінійні стрибки за допомогою перетворювачів часу, які апроксимують гравітацію з допомогою інтерполяційних функцій ease-out і ease-in. Варіювання цих перетворювачів часу дозволяє сформувати нескінченний спектр нелінійних рухів. Таким чином, рух під впливом гравітації є окремим випадком нелінійного руху.

У поверхні Землі падаючі об'єкти набувають під дією гравітації прискорення 9,81 метрів в секунду за секунду (м / с / c), тобто за кожну секунду швидкість падаючого об'єкта збільшується майже на 10 м / с. З точки зору розробника ігор реалізація гравітації означає, що на додаток до обчислення положень спрайтів виходячи з їх швидкості необхідно також обчислювати швидкості спрайтів, коли вони падають.

Математика обчислення швидкості під впливом гравітації досить проста: потрібно помножити прискорення сили тяжіння на час, що минув з початку падіння спрайту, і додати отримане значення до початкової швидкості спрайту на той момент, коли він почав падати. Як нерідко буває в обчисленнях, складність полягає не в математичних формулах, а в одиницях виміру, оскільки результат попереднього рівняння виражається в метрах в секунду. Щоб зробити цей результат осмисленим, Snail Bait перетворює його в пікселі в секунду, використовуючи наступний алгоритм обчислення положення спрайту.

• На початку гри:
  1. Визначити ширину гри в пікселях.
  2. Задати ширину ігрової зони в метрах довільним чином.
  3. Розділити ширину в пікселях на ширину в метрах для отримання відносини "пікселі / метри"
• Потім для кожного кадру анімації:
  1. На основі прискорення вільного падіння (9,81 м / с / c) обчислити швидкість в метрах в секунду (м / с).
  2. Помножити швидкість в м / с на відношення пікселі / метри (обчислене на кроці 3 ) Для отримання розмірності "пікселі в секунду".
  3. Обчислити положення на основі значення швидкості, вираженої в пікселях в секунду.

Тепер можна перетворити наведений щойно алгоритм в програмний код. Перший крок полягає в завданні для гри сили тяжіння і відносини пікселі / метри (див. Лістинг 3).

Лістинг 3. Константи, що визначають силу тяжіння і швидкість падіння

var SnailBait = {// SnailBait constructor function ... this.GRAVITY_FORCE = 9.81, this.PIXELS_PER_METER = this.canvas.width / 10; // 10 meters, randomly selected width ...}

Коли бігун забігає за кінець платформи або стикається з платформою знизу, він починає падати з нульовою вертикальною швидкістю. Однак якщо бігун промахується повз платформи в кінці стрибка, він починає падіння з вертикальною швидкістю, яку він мав в кінці фази зниження цього стрибка. У лістингу 4 показано, як маніпулятор стрибка бігуна використовує константи GRAVITY_FORCE і PIXELS_PER_METER (задані в лістингу 3 ) Для обчислення цієї початкової швидкості.

Лістинг 4. Падіння в кінці стрибка

this.jumpBehavior = {... finishDescent: function (sprite) {sprite.stopJumping (); if (snailBait.isOverPlatform (sprite)! == -1) {sprite.top = sprite.verticalLaunchPosition; } Else {// The argument passed to the sprite's fall () method // is the sprite's initial velocity when it begins to fall sprite.fall (snailBait.GRAVITY_FORCE * (sprite.descendAnimationTimer.getElapsedTime () / 1000) * snailBait.PIXELS_PER_METER ); }}};

Вертикальна швидкість бігуна в кінці його зниження дорівнює прискоренню вільного падіння, помноженому на час, що минув з початку зниження, і на заданий для гри відношення пікселі / метри:

(9.81 m / s / s) * (час зниження в секундах) * (800 пікселів / 10 m)

Результат цього обчислення має розмірність пікселі в секунду і являє собою вертикальну швидкість бігуна в кінці фази зниження його стрибка (решту реалізації маніпулятора стрибка можна подивитися в шостий статті даного циклу).

Інше місце, де гра Snail Bait обчислює швидкість бігуна з використанням констант GRAVITY_FORCE і PIXELS_PER_METER, - це маніпулятор падіння бігуна (див. Лістинг 5).

Лістинг 5. Завдання швидкості спрайту і обчислення вертикальної швидкості бігуна для поточного кадру

this.fallBehavior = {... setSpriteVelocity: function (sprite) {sprite.velocityY = sprite.initialVelocityY + snailBait.GRAVITY_FORCE * (sprite.fallAnimationTimer.getElapsedTime () / 1000) * snailBait.PIXELS_PER_METER; }, CalculateVerticalDrop: function (sprite, fps) {return sprite.velocityY / fps; },};

Метод setSpriteVelocity () маніпулятора падіння встановлює швидкість бігуна в залежності від того, скільки часу він падав. Цей метод враховує початкову швидкість бігуна, яка могла бути встановлена ​​маніпулятором стрибка в лістингу 2 .

Метод calculateVerticalDrop () використовує рух, що залежить від часу - яке я розглядаю в розділі Рух на основі часу другої статті цього циклу - для обчислення вертикального падіння бігуна на основі швидкості, яка була обчислена методом setSpriteVelocity () і поточної частоти кадрів.

Як я докладно описав у п'ятої статті цього циклу, на кожному кадрі анімації гра Snail Bait перебирає всі свої спрайт. Для кожного видимого спрайту Snail Bait проходить по всім маніпуляторам цього спрайту і по черзі викликає метод execute () для кожного з цих маніпуляторів. У лістингу 6 показаний метод execute () для маніпулятора падіння бігуна.

Лістинг 6. Метод execute () маніпулятор падіння

this.fallBehavior = {execute: function (sprite, time, fps) {// sprite is the runner var deltaY; if (sprite.jumping) {return; } If (this.isOutOfPlay (sprite) || sprite.exploding) {if (sprite.falling) {sprite.stopFalling (); } Return; } If (! Sprite.falling) {if (! Sprite.exploding &&! This.isPlatformUnderneath (sprite)) {sprite.fall (); } Return; } This.setSpriteVelocity (sprite); deltaY = this.calculateVerticalDrop (sprite, fps); if (! this.willFallBelowCurrentTrack (sprite, deltaY)) {sprite.top + = deltaY; } Else {// will fall below current track if (this.isPlatformUnderneath (sprite)) {this.fallOnPlatform (sprite); sprite.stopFalling (); } Else {sprite.top + = deltaY; sprite.track--; }}}},

Коли бігун стрибає, випадає з гри або вибухає, метод execute () маніпулятора падіння ініціює або зупиняє падіння, а потім повертає керування. Якщо бігун випадає з гри або вибухає при падінні, то метод execute () викликає метод stopFalling (). Якщо в даний момент часу бігун не падає, не вибухає і не має під собою платформи, то метод execute () здійснює виклик методу fall () бігуна.

Виходячи з вищевикладених умов метод execute () маніпулятора падіння обчислює поточну швидкість і положення бігуна. Якщо нове положення бігуна чи не знаходиться нижче його поточної платформи, даний метод переміщує бігуна в це положення. В іншому випадку, якщо бігун впав нижче платформи, цей метод перевіряє, чи не перебуває під бігуном інша платформа. Якщо така платформа є, метод поміщає бігуна на цю платформу і зупиняє його падіння. Якщо бігун падає нижче своєї платформи і під ним не надається ніякої іншої платформи, метод переміщує бігуна в нове положення і зменшує на одиницю номер його поточної доріжки.

Метод execute () маніпулятора падіння використовує чотири допоміжних методу. Два методу в лістингу 7 визначають, не випав чи бігун з гри або не впаде він нижче своєї поточної доріжки.

Лістинг 7. Виявлення випадання бігуна з гри або падіння бігуна нижче його поточної доріжки

this.fallBehavior = {isOutOfPlay: function (sprite) {return sprite.top> snailBait.TRACK_1_BASELINE; }, WillFallBelowCurrentTrack: function (sprite, deltaY) {return sprite.top + sprite.height + deltaY> snailBait.calculatePlatformTop (sprite.track); }, ...};

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

Лістинг 8. Визначення наявності платформи під бігуном і приземлення бігуна на платформу

this.fallBehavior = {isPlatformUnderneath: function (sprite) {return snailBait.isOverPlatform (sprite)! == -1; }, FallOnPlatform: function (sprite) {sprite.top = snailBait.calculatePlatformTop (sprite.track) - sprite.height; sprite.stopFalling (); }, ...};

Необхідно усвідомлювати, що метод execute () маніпулятора падіння переміщує бігуна по вертикалі тільки в тому випадку, коли його атрибут falling має значення true. Метод бігуна stopFalling () присвоює цього атрибуту значення false (див. Лістинг 9), присвоює вертикальної швидкості бігуна значення 0 і зупиняє таймер анімації падіння бігуна:

Лістинг 9. Метод stopFalling () маніпулятора падіння

SnailBait.prototype = {... equipRunnerForFalling: function () {... this.runner.stopFalling = function () {this.falling = false; this.velocityY = 0; this.fallAnimationTimer.stop (); }}, ...};

Призупинення при падінні бігуна

Як було описано в розділі призупинення маніпуляторів сьомої статті даного циклу, в маніпуляторах повинні бути реалізовані методи pause () і unpause (), які дозволяють припиняти і відновлювати маніпулятори відповідно до грою в цілому. Маніпулятор падіння бігуна відповідає цій вимозі (див. Лістинг 10).

Лістинг 10. Призупинення та відновлення маніпулятора падіння

var SnailBait = function () {... this.fallBehavior = {pause: function (sprite) {sprite.fallAnimationTimer.pause (); }, Unpause: function (sprite) {sprite.fallAnimationTimer.unpause (); },} ...}

Маніпулятор падіння відстежує минулий час падіння за допомогою таймера анімації падіння бігуна. На підставі цієї величини методи pause () і unpause () цього маніпулятора просто припиняють або знову запускають цей таймер.

Тепер, коли ви дізналися, як в грі Snail Bait реалізується падіння бігуна, розглянемо зовсім інший аспект гри - звукові ефекти і музику.

Управління звуковими ефектами і музикою

Гра Snail Bait може одночасно відтворювати музичний супровід і генерувати звукові ефекти. У нижньому лівому кутку малюнка 3 розташовані прапорці Sound (звук) і Music (музика), які дозволяють користувачеві включати в грі звукові ефекти і / або музику.

Малюнок 3. Органи управління звуком і музикою

У лістингу 11 показаний HTML-код для прапорців.

Лістинг 11. Прапорці Sound і Music гри Snail Bait

<Div id = 'sound-and-music'> <div class = 'checkbox-div'> Sound <input id = 'sound-checkbox' type = 'checkbox' checked /> </ div> <div class = 'checkbox -div '> Music <input id =' music-checkbox 'type =' checkbox '/> </ div> </ div>

Для управління первісної установкою прапорця можна використовувати атрибут checked прапорця (без значення). Якщо цей атрибут є, то прапорець початково присутній, в іншому випадку, він відсутній (див. Мал. 3 і лістинг 11 ).

У лістингу 12 гра Snail Bait програмним способом звертається до елементів прапорців і підтримує дві змінні - soundOn і musicOn - які синхронізуються з прапорцями за допомогою обробників подій. Крім того, обробник подій прапорця Music відтворює або призупиняє музичний супровід гри, яке (на відміну від звукових ефектів) у безперервний спосіб відтворюється у фоновому режимі.

Лістинг 12. Оброблювачі подій прапорців Sound і Music

var SnailBait = function () {... this.soundCheckbox = document.getElementById ( 'sound-checkbox'); this.musicCheckbox = document.getElementById ( 'music-checkbox'); this.soundOn = this.soundCheckbox.checked; this.musicOn = this.musicCheckbox.checked; ...}; ... snailBait.soundCheckbox.onchange = function (e) {snailBait.soundOn = snailBait.soundCheckbox.checked; }; snailBait.musicCheckbox.onchange = function (e) {snailBait.musicOn = snailBait.musicCheckbox.checked; if (snailBait.musicOn) {snailBait.soundtrack.play (); } Else {snailBait.soundtrack.pause (); }};

Метод startGame () гри Snail Bait відтворює музику при встановленому прапорці Music (див. Лістинг 13).

Лістинг 13. Запуск гри

SnailBait.prototype = {SnailBait.prototype = {... startGame: function () {if (this.musicOn) {this.soundtrack.play (); } RequestNextAnimationFrame (this.animate); }, ...

Крім того, я змінив метод togglePaused () гри таким чином, щоб припиняти і відновлювати відтворення музики в залежності від того, припинена чи сама гра (див. Лістинг 14).

Лістинг 14. Призупинення відтворення музики

SnailBait.prototype = {... togglePaused: function () {... if (this.paused && this.musicOn) {this.soundtrack.pause (); } Else if (! This.paused && this.musicOn) {this.soundtrack.play (); }}};

Реалізація звукових ефектів

Гра Snail Bait генерує звукові ефекти в різні моменти гри, - наприклад, коли бігун стикається з бджолою або з кажаном, - і іноді повинна відтворювати кілька звуків одночасно. Для реалізації звукових ефектів в грі Snail Bait використовуються HTML5-елементи audio.

HTML-елементи audio

Snail Bait створює елемент audio для кожного зі своїх звуків (див. Лістинг 15).

Лістинг 15. Елементи audio гри Snail Bait

<! DOCTYPE html> <html> <head> <title> Snail Bait </ title> <link rel = 'stylesheet' href = 'game.css' /> </ head> <body> <audio id = 'soundtrack' > <source src = 'sounds / soundtrack.mp3' type = 'audio / mp3'> <source src = 'sounds / soundtrack.ogg' type = 'audio / ogg'> </ audio> <audio id = 'plop- sound '> <source src =' sounds / plop.mp3 'type =' audio / mp3 '> <source src =' sounds / plop.ogg 'type =' audio / ogg '> </ audio> <audio id =' chimes-sound '> <source src =' sounds / chimes.mp3 'type =' audio / mp3 '> <source src =' sounds / chimes.ogg 'type =' audio / ogg '> </ audio> <audio id = 'whistle-down-sound'> <source src = 'sounds / whistledown.mp3' type = 'audio / mp3'> <source src = 'sounds / whistledown.ogg' type = 'audio / ogg'> </ audio > <audio id = 'thud-sound'> <source src = 'sounds / thud.mp3' type = 'audio / mp3'> <source src = 'sounds / thud.ogg' type = 'audio / ogg'> < / audio> <audio id = 'jump-sound'> <source src = 'sounds / jump.mp3' type = 'audio / mp3'> <source src = 'sounds / jump.ogg' type = 'audio / ogg' > </ audio> <audio id = 'coin-sound'> <source src = 'sounds / coin.mp3' type = 'audio / mp 3 '> <source src =' sounds / coin.ogg 'type =' audio / ogg '> </ audio> <audio id =' explosion-sound '> <source src =' sounds / explosion.mp3 'type =' audio / mp3 '> <source src =' sounds / explosion.ogg 'type =' audio / ogg '> </ audio> ... </ body> </ html>

Усередині кожного елемента audio я визначаю два звукових файлу в різних форматах; браузер вибирає той з цих форматів, який він здатний відтворювати. Формати MP3 і OGG охоплюють всі варіанти сучасних браузерів; в розділі ресурси наведені посилання на додаткову інформацію про форматах HTML5 audio.

Крім того, Snail Bait звертається до кожного елементу audio в JavaScript-коді за допомогою методу getElementById () в об'єкті document (див. Лістинг 16).

Лістинг 16. Звернення до елементів audio гри Snail Bait в JavaScript-коді

SnailBait = function () {... this.coinSound = document.getElementById ( 'coin-sound'), this.chimesSound = document.getElementById ( 'chimes-sound'), this.explosionSound = document.getElementById ( 'explosion- sound '), this.fallingWhistleSound = document.getElementById (' whistle-down-sound '), this.plopSound = document.getElementById (' plop-sound '), this.jumpWhistleSound = document.getElementById (' jump-sound ') , this.soundtrack = document.getElementById ( 'soundtrack'), this.thudSound = document.getElementById ( 'thud-sound'), ...};

рівень гучності

Для кожного відтвореного звуку гра Snail Bait визначає рівень гучності в діапазоні від 0.0 (немає звуку) до 1.0 (максимальна гучність). У лістингу 17 показані константи, задані в грі Snail Bait для різних звуків (я підібрав їх дослідним шляхом).

Лістінг 17. Завдання рівнів гучності для звуків гри Snail Bait

SnailBait = function () {// Sound-related constants this.COIN_VOLUME = 1.0, this.CHIMES_VOLUME = 1.0, this.EXPLOSION_VOLUME = 0.25, this.FALLING_WHISTLE_VOLUME = 0.10, this.JUMP_WHISTLE_VOLUME = 0.05, this.PLOP_VOLUME = 0.20, this. SOUNDTRACK_VOLUME = 0.12, this.THUD_VOLUME = 0.20, ...};

При запуску гри Snail Bait проводиться ініціалізація елементів audio з використанням посилань на ці елементи і констант, що представляють рівні гучності (див. Лістинг 18).

Лістинг 18. Завдання рівнів гучності для звуків Snail Bat

SnailBait.prototype = {... initializeSounds: function () {this.coinSound.volume = this.COIN_VOLUME; this.chimesSound.volume = this.CHIMES_VOLUME; this.explosionSound.volume = this.EXPLOSION_VOLUME; this.fallingWhistleSound.volume = this.FALLING_WHISTLE_VOLUME; this.plopSound.volume = this.PLOP_VOLUME; this.jumpWhistleSound.volume = this.JUMP_WHISTLE_VOLUME; this.soundtrack.volume = this.SOUNDTRACK_VOLUME; this.thudSound.volume = this.LANDING_VOLUME; }, Start: function () {this.createSprites (); this.initializeImages (); this.initializeSounds (); this.equipRunner (); this.splashToast ( 'Good Luck!'); ...}, ...};

Одночасне відтворення декількох звуків

HTML5-елементи audio мають простий API-інтерфейс, в тому числі такі методи, які використовуються в грі Snail Bat для відтворення звуків:

Крім того, в грі Snail Bait використовуються наступні атрибути елемента audio:

У лістингу 19 можна побачити використання всіх попередніх методів і атрибутів (за винятком методу pause (), який використовується в лістингу 12 и в лістингу 14 ):

Лістинг 19. Відтворення звуків за допомогою аудиотреков Snail Bat

SnailBait = function () {... this.soundOn = true, this.audioTracks = [// 8 tracks is more than enough new Audio (), new Audio (), new Audio (), new Audio (), new Audio (), new Audio (), new Audio (), new Audio ()], ... // Playing sounds ........................ ............................... soundIsPlaying: function (sound) {return! sound.ended && sound.currentTime> 0; }, PlaySound: function (sound) {var track, index; if (this.soundOn) {if (! this.soundIsPlaying (sound)) {sound.play (); } Else {for (i = 0; index <this.audioTracks.length; ++ index) {track = this.audioTracks [index]; if (! this.soundIsPlaying (track)) {track.src = sound.currentSrc; track.load (); track.volume = sound.volume; track.play (); break; }}}}}, ...};

Щоб відтворювати кілька звуків одночасно, гра Snail Bait створює масив з восьми елементів audio. Метод playSound () гри Snail Bait виконує обхід цього масиву і активізує перший елемент audio, який зараз не зайнятий відтворенням звуку.

Необхідно розуміти, що гра Snail Bait ніколи не відтворює звукові ефекти за допомогою вихідних елементів audio специфіковані в HTML-коді в лістингу 15 . Замість цього гра відтворює звукові ефекти за допомогою восьми елементів audio, які вона створює програмним способом в лістингу 19 . Гра завантажує звук з вихідного елемента audio в програмно створений елемент, а потім відтворює цей програмно створений елемент.

Відтворення звукових ефектів в грі Snail Bat

У лістингах 20 - 23 показані фрагменти коду, які відтворюють звукові ефекти гри Snail Bat в різних її точках. Я вже описав весь код цих лістингів в попередніх статтях даного циклу, тому зараз не буду повторювати ці описи. Для контексту я залишив достатню частину логіки, навколишнього виклики playSound ().

Коли бігун стрибає, гра Snail Bat грає свистячий звук (див. Лістинг 20).

Лістинг 20. Звук, вироблений бігуном при стрибку

var SnailBait = function () {... this.equipRunnerForJumping: function () {... this.runner.jump = function () {if (this.jumping) // 'this' is the runner return; this.runAnimationRate = 0; this.jumping = true; this.verticalLaunchPosition = this.top; this.ascendAnimationTimer.start (); snailBait.playSound (snailBait.jumpWhistleSound); }; },

Під час вибуху спрайту гра Snail Bait відтворює звук explosionSound (див. Лістинг 21).

Лістинг 21. Вибухи

SnailBait.prototype = {... explode: function (sprite, silent) {if (sprite.runAnimationRate === 0) {sprite.runAnimationRate = this.RUN_ANIMATION_RATE; } Sprite.exploding = true; this.playSound (this.explosionSound); this.explosionAnimator.start (sprite, true); // true means sprite reappears}, ...};

Коли спрайт приземляються на платформу, вони видають глухий звук, а при падінні під доріжки - свистячий звук (не такий, як свист при стрибку).

Лістинг 22. Звуки, асоційовані з падіннями

SnailBait = function () {... this.fallBehavior = {... fallOnPlatform: function (sprite) {sprite.top = snailBait.calculatePlatformTop (sprite.track) - sprite.height; sprite.stopFalling (); snailBait.playSound (snailBait.thudSound); }, Execute: function (sprite, time, fps) {var deltaY; if (! this.willFallBelowCurrentTrack (sprite, deltaY)) {sprite.top + = deltaY; } Else {// will fall below current track if (this.isPlatformUnderneath (sprite)) {this.fallOnPlatform (sprite); sprite.stopFalling (); } Else {sprite.track--; sprite.top + = deltaY; if (sprite.track === 0) {snailBait.playSound (snailBait.fallingWhistleSound); }}} ...}}; ...};

При зіткненнях спрайтів відтворюються різні звуки в залежності від того, які спрайт залучені в це зіткнення (див. Лістинг 23).

Лістинг 23. Звуки зіткнення

var SnailBait = function () {... this.collideBehavior = {... processCollision: function (sprite, otherSprite) {if (otherSprite.value) {// Modify Snail Bait sprites so they have values ​​// Keep score .. .} if ( 'coin' === otherSprite.type || 'sapphire' === otherSprite.type || 'ruby' === otherSprite.type || 'button' === otherSprite.type || 'snail bomb '=== otherSprite.type) {otherSprite.visible = false; if ( 'coin' === otherSprite.type) {snailBait.playSound (snailBait.coinSound); } If ( 'sapphire' === otherSprite.type || 'ruby' === otherSprite.type) {snailBait.playSound (snailBait.chimesSound); }} If ( 'bat' === otherSprite.type || 'bee' === otherSprite.type || 'snail' === otherSprite.type || 'snail bomb' === otherSprite.type) {snailBait .explode (sprite); } If (sprite.jumping && 'platform' === otherSprite.type) {this.processPlatformCollisionDuringJump (sprite, otherSprite); }}}, ProcessPlatformCollisionDuringJump: function (sprite, platform) {var isDescending = sprite.descendAnimationTimer.isRunning (); sprite.stopJumping (); if (isDescending) {sprite.track = platform.track; sprite.top = snailBait.calculatePlatformTop (sprite.track) - sprite.height; } Else {// Collided with platform while ascending snailBait.playSound (snailBait.plopSound); sprite.fall (); }}, ...};

У наступній статті даного циклу

У наступній статті цього циклу я завершу цикл Розробка 2D-ігор на HTML5 . Зокрема, я опишу підсумковий геймплей і додам завершальні штрихи, такі як переходи між життями бігуна і анімація в кінці гри.

Ресурси для скачування

Схожі тими

• Оригінал статті: HTML5 2D game development: Implement gravity and add sound .
• формати HTML5 Audio : Офіційна документація.
• Core HTML5 Canvas : (David Geary, Prentice Hall, 2012): в книзі Девіда Джири наведено детальний огляд API Canvas і методів розробки ігор. відвідайте також супутній веб-сайт і блог .
• Snail Bait : Гра Snail Bait працює в онлайновому режимі в будь-якому браузері з підтримкою HTML5 (найкраще підійде Chrome версії 18 і вище).
• Mind-blowing apps with HTML5 Canvas (Запаморочливі додатки з застосуванням HTML5 Canvas): виступ Девіда Джири на конференції Strange Loop 2011 року.
• HTML5 Game Development (Розробка HTML5-ігор): виступ Девіда Гирі на конференції норвезьких розробників NDC-2011.
• Platform games стаття у Вікіпедії про ігри-платформер.
• Side-scroller video games стаття у Вікіпедії про ігри-сайдскроллерах.
• Strategy стаття у Вікіпедії про це шаблоні проектування.
• основи HTML5 : Вивчіть основи HTML5 в рамках навчальної програми developerWorks.
• Replica Island : Завантажте відкритий вихідний код цього популярного платформера для Android. Велика частина спрайтів Snail Bait взята з Replica Island (використовується з дозволу).
• Розділ для веб-розробників на ресурсі developerWorks . статті з різних веб-рішень. Читайте також матеріали по веб-розробці в технічній бібліотеці : Великий асортимент технічних статей, рекомендацій, посібників, навчальних посібників і стандартів, а також посібників серії IBM Redbook.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів