Welcome back to our ongoing HaxeFlixel Tutorial Series, today we are going to cover playing sound and music in HaxeFlixel. This title is a bit misleading, as they are both basically the same thing, they are all ultimately FlxSound objects. The single biggest challenge you are going to have with HaxeFlixel audio is file formats, so let’s start there.
The file format of your audio file depends entirely on the platform your code is going to run on. On the Flash player platform, all of your audio files need to be in mp3 format. However on other platforms the mp3 file format has a number of licensing issues, so they instead use Ogg Vorbis (ogg) files for long audio files, and WAV for shorter effects. Why two different formats? WAV files are much faster to load, but take up more system memory. They are ideal for frequently used but shorter sound files. Ogg files on the other hand are much more compressed, taking more CPU power to process but a great deal less space. This makes them ideal for longer audio files, such as your game’s music. In addition to the file format limitations, your sounds need to be encoded at 11025, 22050 or 44100kHz frequency. If you need to switch encoding frequencies, Audacity is a great free program (you can learn more about here) that can also be used to convert between the various file formats.
Using a default project, HaxeFlixel will automatically create sound and music folders in your asset directory. One thing you will notice in this example is when you start including multiple different audio files for different platforms, the warnings can become extremely irritating. Hearing that your mp3 file isn’t compatible with your platform, or that your WAV file wont work on Flash gets irritating quickly. Thankfully we have the ability to filter our files based on platform. In your Project.xml file, locate the Path Settings area and edit it like so:
<!-- _____________________________ Path Settings ____________________________ --> <set name="BUILD_DIR" value="export" /> <classpath name="source" /> <!-- <assets path="assets" /> --> <assets path="assets/music" include="*.mp3" if="flash" /> <assets path="assets/music" include="*.ogg|*.wav" unless="flash" /> <assets path="assets/sounds" include="*.mp3" if="flash" /> <assets path="assets/sounds" include="*.ogg|*.wav" unless="flash" />
This will cause Flash builds to only see mp3 files from the music and sound directories, while all other platforms will only see the ogg and wav format files. Ok, now lets move on to some actual code.
Playing music and sound effects is trivial in HaxeFlixel, but once again platform becomes a factor. In this case we are using conditional compilation to solve this problem, like so:
#if flash FlxG.sound.playMusic(AssetPaths.techno__mp3); soundEffect = FlxG.sound.load(AssetPaths.gunshot__mp3); #else FlxG.sound.playMusic(AssetPaths.techno__ogg); soundEffect = FlxG.sound.load(AssetPaths.gunshot__wav); #end
In this case the music file will play automatically, while the soundEffect needs to be triggered manually. Let’s take a look at how to do that in our update() method.
if(FlxG.keys.justPressed.G) soundEffect.play(true);
The true parameter causes the sound effect to replace any running instances. This will result in the sound starting from the beginning if you press the G key multiple times before a sound effect has finished playing.
You also have a fair bit of control over sound playback. The following code shows how to pause/resume sound as well as increasing and decreasing the volume. Volume is a value that ranges from 0.0 to 1.0, with 0.0 being complete silence while 1.0 is maximum volume.
if(FlxG.keys.justPressed.P) if(FlxG.sound.music.active) FlxG.sound.music.pause(); else FlxG.sound.music.resume(); if(FlxG.keys.justPressed.PLUS) FlxG.sound.changeVolume(0.1); if(FlxG.keys.justPressed.MINUS) FlxG.sound.changeVolume(-0.1);
HaxeFlixel also supports positional audio. Both by changing the X and Y position of a sound effect, or positioning it relative to another object. The latter is the approach we are going to take here, creating a virtual ear that is centered to the screen.
soundX = FlxG.width/2; soundY = FlxG.height/2; ear = new FlxObject(); ear.setPosition(FlxG.width/2, FlxG.height/2);
Now we can relocate the sound relative to the ear and it will change accordingly.
There is also
if(FlxG.keys.justPressed.LEFT) soundX -= 25; if(FlxG.keys.justPressed.RIGHT) soundX += 25; if(FlxG.keys.justPressed.UP) soundY -= 25; if(FlxG.keys.justPressed.DOWN) soundY += 25; FlxG.sound.music.proximity(soundX,soundY, ear,300,true);
It is also possible to tween audio, fading it in and out over time, like so:
if(FlxG.keys.justPressed.S) FlxG.sound.music.fadeOut(3.0);
You can also set up callback functions when a sound stops playing. This can be used to easily create a music or sound effect management system.
FlxG.sound.music.onComplete = function() { // This will only ever fire if you hit L to turn looping off trace("Song ended"); }
Now let’s show the complete source listing, which also illustrates a couple other features such as looping, muting and pausing audio.
package; import flixel.FlxG; import flixel.FlxSprite; import flixel.FlxState; import flixel.system.FlxSound; import flixel.FlxObject; class PlayState extends FlxState { var soundEffect:FlxSound; var soundX:Float; var soundY:Float; var ear:FlxObject; override public function create():Void { super.create(); #if flash FlxG.sound.playMusic(AssetPaths.techno__mp3); soundEffect = FlxG.sound.load(AssetPaths.gunshot__mp3); #else FlxG.sound.playMusic(AssetPaths.techno__ogg); soundEffect = FlxG.sound.load(AssetPaths.gunshot__wav); #end soundX = FlxG.width/2; soundY = FlxG.height/2; ear = new FlxObject(); ear.setPosition(FlxG.width/2, FlxG.height/2); FlxG.sound.music.onComplete = function() { // This will only ever fire if you hit L to turn looping off trace("Song ended"); } FlxG.sound.muted = true; } override public function update(elapsed:Float):Void { super.update(elapsed); if(FlxG.keys.justPressed.G) soundEffect.play(true); if(FlxG.keys.justPressed.P) if(FlxG.sound.music.active) FlxG.sound.music.pause(); else FlxG.sound.music.resume(); if(FlxG.keys.justPressed.PLUS) FlxG.sound.changeVolume(0.1); if(FlxG.keys.justPressed.MINUS) FlxG.sound.changeVolume(-0.1); if(FlxG.keys.justPressed.LEFT) soundX -= 25; if(FlxG.keys.justPressed.RIGHT) soundX += 25; if(FlxG.keys.justPressed.UP) soundY -= 25; if(FlxG.keys.justPressed.DOWN) soundY += 25; FlxG.sound.music.proximity(soundX,soundY, ear,300,true); if(FlxG.keys.justPressed.L) FlxG.sound.music.looped = false; if(FlxG.keys.justPressed.S) FlxG.sound.music.fadeOut(3.0); if(FlxG.keys.justPressed.M) FlxG.sound.muted = !FlxG.sound.muted; } }
The Video