Wednesday, 25 June 2014

Adding Sound Effects with AndEngine

Recently, we've been hard at work on Alien Outlaw (our fastest growing game)! And we thought it was about time we brought it to another level by adding not only levels but sound too. But before you can add sound effects, you need sound effects... We used Bfxr to generate my sound effects. I then converted them to OGG using media.io. You don't need to use OGG but if you're interested in why it's a good option you can read about the differences between audio formats.

We're going to assume a basic knowledge of setting up an AndEngine activity. At some point we'll develop a full tutorial from start to finish but for now this is the best we can do. Also keep in mind that any ellipsis (...) mean that we omitted the details for brevity. First you will need to set in your onCreateEngineOptions that you will require sound using the following code:

EngineOptions options = new EngineOptions(...); options.getAudioOptions().setNeedsSound(true);

Next we need to specify the code for loading the sound, this should be placed in onCreateResources method as follows:

SoundFactory.setAssetBasePath("mfx/");
try {
this._explosionSound = SoundFactory.createSoundFromAsset(this.mEngine.getSoundManager(), this, "explosion.ogg");

} catch (final IOException e) {
Debug.e(e);

}


The first line specifies that out sound files are located in the "mfx" directory within the assets directory. Then within the try-catch statement we try to set our private field of type Sound (_explosionSound). If the file exists and is of the format expected then the Debug statement should never be executed.

Finally, wherever you want to play a sound you've loaded, you call .play() on the sound object. If you have any questions, just ask!

Top Tips for SVGs with AndEngine

Using SVGs to get a TextureRegion in AndEngine is surprisingly simple but there are a few tricks we picked up to maximise the quality of your game's graphics:
  1. Make sure you specify your target SDK and minimum SDK in your app's manifest. This ensures that Android can accurately get the host device's screen size. If you don't do this, graphics may be scaled down and then scaled back up resulting in pixelated images.
  2. Using your AndEngine camera's size, and the screen size of the host device, calculate a scale factor which you can use when creating your texture regions. This ensures they are optimally sized for the screen they are being displayed on.
  3. If you have texture bleeding, try setting the third parameter of your BlackPawnTextureAtlasBuilder to 1. This spaces the generated bitmaps out so that they don't interfere with each other.
  4. If you are noticing unwanted transparency between shapes in your SVG, ensure that the shapes are overlapping. This is important because if there is no overlap, this area may become slightly transparent in the process of converting it to a bitmap.
This is what we started with:



This was the final result:



If you have any other tips, please leave a comment!

Friday, 20 June 2014

Trip Wire Tries SVGs with AndEngine!

First up, big props to kenney.nl for his public domain graphics... They're great. If you don't know what an SVG is, it's a scalable vector graphic and they have the advantage of making your app look better on different screen resolutions. But they come with the trade-off of slightly more loading time.

Today, I'm going to be experimenting with adding SVGs to Alien Outlaw! I'll be using AndEngine, as this is what I used to develop Alien Outlaw and Intellij because I prefer it over Eclipse. The first step is to download the AndEngine source code, it may take some tinkering to get it to work so don't be put off if it doesn't work straight away... It will save you time in the long run! You will also need the AndEngineSVGTextureRegionExtension.

I'm going to assume prior knowledge of how to code an Activity for AndEngine and skip straight to the setup, because this is the part I always struggle with:
  1. Go to File > Project Structure... (or ctrl + alt + shift + s)
  2. Add a module by clicking the green plus icon, which will bring up this dialog:
  3. Click content root and browse for the directory where you downloaded AndEngine and select it.
  4. Then click Finish
  5. Now you have a module, you need to look at its dependencies. Ensure that AndEngine has a dependency of Android 4.0 or higher as shown:
    Note this doesn't mean our game can't support lower versions.
  6. Next you need to add AndEngine as a dependency to your project module. Do this by clicking on the module (in our case Alien Outlaw), then the dependencies tab and then the green icon to add a module dependency.
  7. This will then need to be repeated to add AndEngineSVGTextureRegionExtension. Then you will need to add AndEngine as a module dependency on AndEngineSVGTextureRegionExtension.
  8. If you apply your changes, and view your Facets. They should look something like this:


If you look at the AndEngine github page you are able to download AndEngineExamples, one of these is SVGTextureRegionExample. The method onCreateResources shows you how to create a buildable bitmap texture atlas from several SVGs, and onCreateScene shows you how to use the SVGs you loaded. As a side note, I used a dictionary for mapping strings to a texture region as it was more logical to me. Have fun creating better quality games with SVGs!