Android Game Development Tutorial in AndEngine - Part 5 - Resource Loading and Splash Screen

This part will show you how to load assets to memory and how to use them in a scene.

It's important to preload some resources, especially those that will be used all the time, but you can't load too many resources at once simply because you might run out of memory and the gamers could run out of patience waiting for everything to load. It is equally important to unload those resources that are no longer needed.

For the purpose of preloading resources a splash screen is usually displayed first. It is not necessary, but first you can show your brand or name and second it will give users something to look at while you are loading the resources in the background. You can also show some kind of progress bar, but splash works just fine.

Assets

Download these two pictures and save them as "badge.png" and "splash.png" in directory assets/gfx in your project. The directory assets is used to store graphics, music, sounds and other files like levels for you game.

Loading Resources

We will start loading textures. Here is what you have to understand about textures, texture regions, texture atlases, sprites and fonts:

Texture is a bitmap stored in your android device memory. The graphics hardware and OpenGL can draw the texture or it's part very quickly from the memory to the display.

Texture Region is simply a rectangle part of texture that will be displayed by AndEngine. A region can be as big as the whole texture.

Texture atlas is a basically a texture wrapper that allows you to build one big texture from several images.

Sprite is an object associated with with a texture region. It tells the engine where to draw the texture region, rotation and other transformations.

Font in AndEngine is a texture atlas with small texture regions, where each region is one letter. Font type is rendered onto a texture when you create it.

Now add this to the ResourceManager class:


  //splash
  public ITextureRegion splashRegion;
  public ITextureRegion badgeRegion;
  private BuildableBitmapTextureAtlas splashTextureAtlas; 
  

  //splash
  public void loadSplashResources() {
    BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");  
      splashTextureAtlas = new BuildableBitmapTextureAtlas(activity.getTextureManager(), 
          1024, 512, BitmapTextureFormat.RGBA_4444, TextureOptions.BILINEAR);
      
      splashRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(
          splashTextureAtlas, activity.getAssets(), "splash.png");
      
      badgeRegion = BitmapTextureAtlasTextureRegionFactory.createFromAsset(
          splashTextureAtlas, activity.getAssets(), "badge.png");  

    
    try {
      splashTextureAtlas.build(new BlackPawnTextureAtlasBuilder<IBitmapTextureAtlasSource, BitmapTextureAtlas>(0, 0, 0));
      splashTextureAtlas.load();
      
    } catch (final TextureAtlasBuilderException e) {
      throw new RuntimeException("Error while loading Splash textures", e);
    }  
  } 
  
  public void unloadSplashResources() {
    splashTextureAtlas.unload();
  }

We define two regions and one atlas here. We load both images to one atlas. We are using the BlackPawnTextureAtlasBuilder which is an algorithm that automatically places the images onto the atlas. You can do it manually if you need to, but the algorithm should be enough everytime. The most imporant is to make the texture atlas big enough. Our images are both 512x512. That's why we are creating 1024x512 texture atlas.

To maximize compatibility, you need to keep the texture atlases 2048x2048px or even 1024x1024px maximum. In case the placement of the images is not so obvious, make the atlas a bit bigger. And to prevent unwanted artifacts you need to create spacing between texture regions in the atlas. More about that later.

Splash Scene

And now to display the badge and the splash, we will create two sprites. Also we will use a DelayEntityModifier that will hide the badge after half time and show the logo. This is how we can show both images in sequence.

DelayEntityModifier is an EntityModifier that simply waits the specified time. Each EntityModifier can override onModifierStarted and onModifierFinished methods to perform some action before and after the modifier is active. Also you can register a listener that listens to these two events.

Add the following code and/or change the methods in the current SplashScene class:


  Sprite splash;
  Sprite badge;


  @Override
  public void loadResources() {
    res.loadSplashResources();
  }

  @Override
  public void create() {
    splash = new Sprite(Constants.CW2, Constants.CH2, res.badgeRegion, vbom);
    attachChild(splash);
    badge = new Sprite(Constants.CW2, Constants.CH2, res.splashRegion, vbom);
    badge.setVisible(false);
    attachChild(badge);
    
    splash.registerEntityModifier(new DelayModifier(Constants.SPLASH_DURATION / 2000f) {

      @Override
      protected void onModifierFinished(IEntity pItem) {
        Debug.d(Constants.TAG, "Changing splash!");
        super.onModifierFinished(pItem);
        splash.setVisible(false);
        badge.setVisible(true);
      }
      
    });
    
    
  }

  @Override
  public void unloadResources() {
    res.unloadSplashResources();
  }

You can run the app now. It should show you the AndEngine badge for two seconds and then the logo for another two seconds.

Current Code

This is how your project should look like after fifth part. Download it if you have any difficulties.

Next part

In the next chapter, I will cover the Menu Scene.

Greetings!

Tuesday, 5 November 2013