Audio.html (7324B)
1 <h1 id="content-title">Audio</h1> 2 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Audio</h1> 3 <p> 4 The game's making great progress, but it still feels a bit empty as there's no audio whatsoever. In this chapter we're going to fix that. 5 </p> 6 7 <p> 8 OpenGL doesn't offer us any support for audio capabilities (like many other aspects of game development). We have to manually load audio files into a collection of bytes, process and convert them to an audio stream, and manage multiple audio streams appropriately for use in our game. This can get complicated pretty quick and requires some low-level knowledge of audio engineering. 9 </p> 10 11 <p> 12 If it is your cup of tea then feel free to manually load audio streams from one or more audio file extensions. We are, however, going to make use of a library for audio management called <strong>irrKlang</strong>. 13 </p> 14 15 <h2>Irrklang</h2> 16 17 <img src="/img/in-practice/breakout/irrklang.png" class="right" alt="Irrklang logo"/> 18 <p> 19 IrrKlang is a high level 2D and 3D cross platform (Windows, Mac OS X, Linux) sound engine and audio library that plays WAV, MP3, OGG, and FLAC files to name a few. It also features several audio effects like reverb, delay, and distortion that can be extensively tweaked. 20 </p> 21 22 <note> 23 3D audio means that an audio source can have a 3D position that will attenuate its volume based on the camera's distance to the audio source, making it feel natural in a 3D world (think of gunfire in a 3D world; most often you'll be able to hear where it came from just by the direction/location of the sound). 24 </note> 25 26 <p> 27 IrrKlang is an easy-to-use audio library that can play most audio files with just a few lines of code, making it a perfect candidate for our Breakout game. Note that irrKlang has a slightly restrictive license: you are allowed to use irrKlang as you see fit for non-commercial purposes, but you have to pay for their pro version whenever you want to use irrKlang commercially. 28 </p> 29 30 <p> 31 You can download irrKlang from their <a href="http://www.ambiera.com/irrklang/downloads.html" target="_blank">download</a> page; we're using version 1.5 for this chapter. Because irrKlang is closed-source, we cannot compile the library ourselves so we'll have to do with whatever irrKlang provided for us. Luckily they have plenty of precompiled library files. 32 </p> 33 34 <p> 35 Once you include the header files of irrKlang, add their (64-bit) library (<code>irrKlang.lib</code>) to the linker settings, and copy the dll file(s) to the appropriate locations (usually the same location where the <code>.exe</code> resides) we're set to go. Note that if you want to load MP3 files, you'll also have to include the <code>ikpMP3.dll</code> file. 36 </p> 37 38 <h3>Adding music</h3> 39 <p> 40 Specifically for this game I created a small little audio track so the game feels a bit more alive. You can find the audio track <a href="/audio/in-practice/breakout/breakout.mp3" target="_blank">here</a> that we'll use as the game's background music. This track is what we'll play whenever the game starts and that continuously loops until the player closes the game. Feel free to replace it with your own tracks or use it in any way you like. 41 </p> 42 43 <audio controls> 44 <source src="/audio/in-practice/breakout/breakout.mp3" type="audio/mpeg"> 45 Your browser does not support the audio element. 46 </audio> 47 48 <p> 49 Adding this to the Breakout game is extremely easy with the irrKlang library. We include the irrKlang header file, create an <code>irrKlang::ISoundEngine</code>, initialize it with <fun>createIrrKlangDevice</fun>, and then use the engine to load and play audio files: 50 </p> 51 52 <pre><code> 53 #include <irrklang/irrKlang.h> 54 using namespace irrklang; 55 56 ISoundEngine *SoundEngine = createIrrKlangDevice(); 57 58 void Game::Init() 59 { 60 [...] 61 SoundEngine->play2D("audio/breakout.mp3", true); 62 } 63 </code></pre> 64 65 66 <p> 67 Here we created a <var>SoundEngine</var> that we use for all audio-related code. Once we've initialized the sound engine, all we need to do to play audio is simply call its <fun>play2D</fun> function. Its first parameter is the filename, and the second parameter whether we want the file to loop (play again once it's finished). 68 </p> 69 70 <p> 71 And that is all there is to it! Running the game should now cause your speakers (or headset) to violently blast out sound waves. 72 </p> 73 74 <h3>Adding sounds</h3> 75 <p> 76 We're not there yet, since music by itself is not enough to make the game as great as it could be. We want to play sounds whenever something interesting happens in the game, as extra feedback to the player. Like when we hit a brick, or when we activate a powerup. Below you can find all the sounds we're going to use (courtesy of freesound.org): 77 </p> 78 79 <p> 80 <a href="/audio/in-practice/breakout/bleep.mp3" target="_blank"><strong>bleep.mp3</strong></a>: the sound for when the ball hit a non-solid block. 81 </p> 82 83 <audio controls> 84 <source src="/audio/in-practice/breakout/bleep.mp3" type="audio/mpeg"> 85 Your browser does not support the audio element. 86 </audio> 87 88 <p> 89 <a href="/audio/in-practice/breakout/solid.wav" target="_blank"><strong>solid.wav</strong></a>: the sound for when the ball hit a solid block. 90 </p> 91 92 <audio controls> 93 <source src="/audio/in-practice/breakout/solid.wav" type="audio/mpeg"> 94 Your browser does not support the audio element. 95 </audio> 96 97 <p> 98 <a href="/audio/in-practice/breakout/powerup.wav" target="_blank"><strong>powerup.wav</strong></a>: the sound for when we the player paddle collided with a powerup block. 99 </p> 100 101 <audio controls> 102 <source src="/audio/in-practice/breakout/powerup.wav" type="audio/mpeg"> 103 Your browser does not support the audio element. 104 </audio> 105 106 <p> 107 <a href="/audio/in-practice/breakout/bleep.wav" target="_blank"><strong>bleep.wav</strong></a>: the sound for when we the ball bounces of the player paddle. 108 </p> 109 110 <audio controls> 111 <source src="/audio/in-practice/breakout/bleep.wav" type="audio/mpeg"> 112 Your browser does not support the audio element. 113 </audio> 114 115 <p> 116 Wherever a collision occurs, we play the corresponding sound. I won't walk through each of the lines of code where this is supposed to happen, but simply list the updated game code <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/9.game.cpp" target="_blank">here</a>. You should easily be able to add the sound effects at their appropriate locations. 117 </p> 118 119 <p> 120 Putting it all together gives us a game that feels a lot more complete. All together it looks (and sounds) like this: 121 </p> 122 123 <div class="video"> 124 <video width="600" height="450" controls> 125 <source src="/video/in-practice/breakout/audio.mp4" type="video/mp4" /> 126 </video> 127 </div> 128 129 <p> 130 IrrKlang allows for much more fine-grained control of audio controls like advanced memory management, audio effects, or sound event callbacks. Check out their simple C++ <a href="http://www.ambiera.com/irrklang/tutorials.html" target="_blank">tutorials</a> and try to experiment with its features. 131 </p> 132 133 </div> 134 135 <div id="hover"> 136 HI 137 </div> 138 <!-- 728x90/320x50 sticky footer --> 139 <div id="waldo-tag-6196"></div> 140 141 <div id="disqus_thread"></div> 142 143 144 145 146 </div> <!-- container div --> 147 148 149 </div> <!-- super container div --> 150 </body> 151 </html>