Part 15. Level complete window.

We created basic game play, giving you some ideas to create your own game, now lets take care about simple level complete window, showing us rating/score after completing level, we will use approach used in many games, ratting player by 1-3 stars.

  • We will use this art as a level complete window (yeap, I know my art skills are beautiful!)
  • plus this tiled sprite to display amount of starts as a rating (1-3 stars) image below is a tiled sprite, with 2 tiles.
We will attach 3 tiled sprites to the level complete window, and will change tile index, based on how much stars layer received as a rating (1-3)
1. Loading needed resources:
  • Open our ResourcesManager class, create two new fields for our texture regions (one is tiled texture region, will be used for stars)

// Level Complete Window
public ITextureRegion complete_window_region;
public ITiledTextureRegion complete_stars_region;

  • Inside loadGameGraphics() load those regions:

complete_window_region = BitmapTextureAtlasTextureRegionFactory.createFromAsset(gameTextureAtlas, activity, "levelCompleteWindow.png");
complete_stars_region = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(gameTextureAtlas, activity, "star.png", 2, 1);

We are loading files called levelCompleteWindow.png and star.png from assets/gfx/game
2. Creating level complete window:
For purposes of this article, I quickly created this simple class, responsible for creating and displaying our custom level complete window. Check code, and below you will find info.

package com.matimdev.extras;

import org.andengine.engine.camera.Camera;
import org.andengine.entity.scene.Scene;
import org.andengine.entity.sprite.Sprite;
import org.andengine.entity.sprite.TiledSprite;
import org.andengine.opengl.vbo.VertexBufferObjectManager;

import com.matimdev.manager.ResourcesManager;

public class LevelCompleteWindow extends Sprite
{
    private TiledSprite star1;
    private TiledSprite star2;
    private TiledSprite star3;
    
    public enum StarsCount
    {
        ONE,
        TWO,
        THREE
    }
    
    public LevelCompleteWindow(VertexBufferObjectManager pSpriteVertexBufferObject)
    {
        super(0, 0, 650, 400, ResourcesManager.getInstance().complete_window_region, pSpriteVertexBufferObject);
        attachStars(pSpriteVertexBufferObject);
    }
    
    private void attachStars(VertexBufferObjectManager pSpriteVertexBufferObject)
    {
        star1 = new TiledSprite(150, 150, ResourcesManager.getInstance().complete_stars_region, pSpriteVertexBufferObject);
        star2 = new TiledSprite(325, 150, ResourcesManager.getInstance().complete_stars_region, pSpriteVertexBufferObject);
        star3 = new TiledSprite(500, 150, ResourcesManager.getInstance().complete_stars_region, pSpriteVertexBufferObject);
        
        attachChild(star1);
        attachChild(star2);
        attachChild(star3);
    }
    
    /**
     * Change star`s tile index, depends on stars count.
     * @param starsCount
     */
    public void display(StarsCount starsCount, Scene scene, Camera camera)
    {
        // Change stars tile index, based on stars count (1-3)
        switch (starsCount)
        {
            case ONE:
                star1.setCurrentTileIndex(0);
                star2.setCurrentTileIndex(1);
                star3.setCurrentTileIndex(1);
                break;
            case TWO:
                star1.setCurrentTileIndex(0);
                star2.setCurrentTileIndex(0);
                star3.setCurrentTileIndex(1);
                break;
            case THREE:
                star1.setCurrentTileIndex(0);
                star2.setCurrentTileIndex(0);
                star3.setCurrentTileIndex(0);
                break;
        }
        
        
        // Hide HUD
        camera.getHUD().setVisible(false);
        
        // Disable camera chase entity
        camera.setChaseEntity(null);
        
        // Attach our level complete panel in the middle of camera
        setPosition(camera.getCenterX(), camera.getCenterY());
        scene.attachChild(this);
    }
}

  • We used Sprite as a extension, we changed constructor (simplified) using previously loaded texture region for our level complete window.
  • created method responsible for creating 3 tiled sprites (stars) and attaching them to our level complete window.
  • created method responsible for displaying our window, we also created enum to specify how many stars should we display (ONE, TWO or THREE) Depends on amount of stars specified as a parameter while calling our display() method, we are changing our stars tile index (so if you will put TWO in constructors, two stars will be yellow, and one grey) quite simple I believe. We also take Camera and Scene as a parameters, we need camera object to set HUD to invisible and disable camera`s chasing entity while displaying our window.
3. Initializing level complete window:

Okay, we have created code for our window, now lets initialize it, open our GameScene class, create new field for window.

private LevelCompleteWindow levelCompleteWindow;

  • initialize it inside createScene() method:

levelCompleteWindow = new LevelCompleteWindow(vbom);

4. Displaying level complete window:


Now we need to create something which will handle displaying our window, in our example, we will create sprite, after touching it with our player, level complete window will be displayed.

  • We will load it from xml, like we do for platforms and coins, firstly create new tag:

private static final Object TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_LEVEL_COMPLETE = "levelComplete";

  • put new check inside code responsible for parsing level (same like platforms, coin etc)

else if (type.equals(TAG_ENTITY_ATTRIBUTE_TYPE_VALUE_LEVEL_COMPLETE))
{
    levelObject = new Sprite(x, y, resourcesManager.complete_stars_region, vbom)
    {
        @Override
        protected void onManagedUpdate(float pSecondsElapsed) 
        {
            super.onManagedUpdate(pSecondsElapsed);

            if (player.collidesWith(this))
            {
                levelCompleteWindow.display(StarsCount.TWO, GameScene.this, camera);
                this.setVisible(false);
                this.setIgnoreUpdate(true);
            }
        }
    };
    levelObject.registerEntityModifier(new LoopEntityModifier(new ScaleModifier(1, 1, 1.3f)));
}

What it does, is creating new sprite (with star texture region) on every update it checks if it collide with player, and if does, we display level complete window, in this case with 2 stars as a rating (you can change it, by changing parameter)

To demonstrate how does it work, modify your 1.lvl file (level data file) and replace it with:

<?xml version="1.0" encoding="utf-8"?>
<level width="1400" height="780">    
    <entity x="100" y="100" type="platform1"/>
    <entity x="200" y="200" type="platform1"/>
    <entity x="400" y="200" type="platform2"/>
    <entity x="530" y="200" type="platform2"/>
    <entity x="660" y="200" type="platform2"/>
    <entity x="880" y="240" type="platform3"/>
    <entity x="1100" y="330" type="platform3"/>
    <entity x="400" y="270" type="coin"/>
    <entity x="500" y="400" type="coin"/>
    <entity x="600" y="400" type="coin"/>
    <entity x="1280" y="550" type="levelComplete"/>
    <entity x="60" y="140" type="player"/>
</level>

I just modified this level a little bit, to be more play-able, and added level complete object at the end of the "level" test it to see how does it work, level complete window should be displayed (with 2 yellow and one grey start as a example) 
Download full game source code:
jumper_game_tutorial.rar
File Size: 1649 kb
File Type: rar
Download File
Keep in mind that as I MENTIONED IN FIRST ARTICLE you need andengine gles2 anchor center branch (Same for box2d physics extensions) I have to remind it because loads of people are using GLES2 branch and keep complaining that they have errors.

Note: attached code might be used only for educational purposes, can not be used for different purposes without agreement.
HTML Comment Box is loading comments...