Simple AndEngine Game V2.0 [more awesomeness]

Aaaaaand I finally managed to start writing this tutorial .. sorry for the delay [was busy wasting my time and others’ too].

if you haven’t checked my previous 2 tutorials, you may need to do so to keep up, this tutorial will continue after my second one:

1 – AndEngine Simple Android Game Tutorial

2 – Simple AndEngine Game V1.5 [using pools]

This tutorial will cover:
– Moving Sprites with touch [follow your finger]
– Animating Sprites [AnimatedSprite]
– Enabling MultiTouch
– Simple Cooldown class
– Moving background [AutoParallaxBackground]

If you lost your project or modified it, you can download the one I provided at the end of the pools tutorial which I’ll base my tutorial on.

One final note, the Sprites I’m providing will be to support the hdpi resolution [480*800 to be precise] and may not [won’t] look good on other resolutions.

[Note: while changing sprites your game my crash , right click on your project and refresh then click on project -> clean project].

Now that’s all clear, let’s get started.

Follow Me !

The ninja is bored, The ninja wanna move, The ninja gets what he wants, The ninja should move.
Before we start, I suggest you comment out the method call for fail() so you don’t get it while testing.

We want to make our ninja follow the touch finger when we drag it, and it will only move on the y-axis [only up and down].

Go to your onLoadScene() method and scroll down to the deceleration of player and change it to.

player = new Sprite(PlayerX, PlayerY, mPlayerTextureRegion) {
    public boolean onAreaTouched(TouchEvent pSceneTouchEvent,float pTouchAreaLocalX, float pTouchAreaLocalY) {
        this.setPosition(this.getX(), pSceneTouchEvent.getY()- this.getHeight() / 2);
        return true;
    }
};

We made the player’s sprite a TouchArea [overriden the onAreaTouched of the Sprite class] it change it’s position to where the finger is dragging it.
then add those two lines.

mMainScene.registerTouchArea(player);
mMainScene.setTouchAreaBindingEnabled(true);

The first registers the player as a touchArea for the scene, without the second line the sprite won’t follow you when your finger drags fast, you may try to run the game without the second line and see how it behaves.

Now you may run your game and move your mighty ninja !

Your ninja now follows your finger, you’ll notice that you cannot shoot while moving the ninja as we haven’t enabled multiTouch yet, you’ll also notice that the bullets are acting weirdly.. so let’s solve that one first.

The problem is with our [my] usage of the pool, we were creating the objects with the base position of the player , and when the bullet is reused it starts from the same base position of when it was created, let’s fix that and clean some stuff up while we are at it.

[Optional] Open your ProjectilePool class and modify your onAllocatePoolItem() to return a sprite at position 0,0

return new Sprite(0, 0, mTextureRegion.deepCopy());

Then now you can remove the static deceleration from the player [check your player sprite deceleration] and can put it back to private.[/Optional]

Go to shootProjectile method and after obtaining the projectile from the pool , change it’s position to the player’s position.

projectile.setPosition(player.getX() + player.getWidth(), player.getY());

This should fix the issue for you, back to throwing proper bullets.

Can’t move and throw at the same time ? I’m a freakin ninja !! [MultiTouch]

Calm down, we’ll get to that now, AndEngine doesn’t support multi touch by itself , you’ll need to download an extension for it.

Remember how we downloaded the AndEngine source code ? you can do the same thing with the multiTouch from this link and create your own jar file , I did face some trouble doing that but ended with a jar file of my own which you can use.

As before, put it in your lib folder and in eclipse right click on it build path -> add to build path.
You’ll also need to remove the andengine.jar file [if you are using my jar file] as mine contains the andengine too

Right click on your project -> properties -> Java Build Path , and remove the andengine.jar file.

Enabling MultiTouch is pretty easy, first we need to modify a li’l bit of what we did before , go to your onLoadEngine() method and modify the return statement it to become:

final Engine mEngine = new Engine(new EngineOptions(true,ScreenOrientation.LANDSCAPE, new RatioResolutionPolicy(cameraWidth, cameraHeight), mCamera).setNeedsSound(true).setNeedsMusic(true));
return mEngine;

This way we can modify the engine before sending it, now to enable multiTouch put this directly above the return statement:

// enabling MultiTouch if available
try {
    if (MultiTouch.isSupported(this)) {
        mEngine.setTouchController(new MultiTouchController());
    } else {
    Toast.makeText(this,"Sorry your device does NOT support MultiTouch!\n\n(Falling back to SingleTouch.)",Toast.LENGTH_LONG).show();
    }
} catch (final MultiTouchException e) {
    Toast.makeText(this,"Sorry your Android Version does NOT support MultiTouch!\n\n(Falling back to SingleTouch.)",Toast.LENGTH_LONG).show();
}

[hint: if you pasted the above code and using eclipse then use the shortcut ctrl+shift+o to auto import].

If your device doesn’t support multitouch, this will show you a message telling you that and falls back to single touch, avoiding crashing.

You may test again and see that you can now move and shoot at the same time, if you are seeing some abnormal behavior when multi touching it’s because your phone got issues [htc ?] this works fine on my Galaxy S I9000 but doesn’t act properly on a nexus one though.

Hold Fire ! [CoolDown]

Not sure if this is the proper naming for this, but I’ll use it anyway.. CoolDown.

If you played around with what you have now , you’ll notice that if you tap with 2 fingers , you get 2 bullets .. and if your phone supports multiTouch properly you can get a high number [I could get 5 bullets at a time], so we need to solve that.

The Solution that I came with was to add a delay not allowing more than one bullet to be issued during a certain period , it’ll also make the game a li’l bit harder so you’d stop spraying bullets all over the place [your ninja doesn’t like that].

Create a new class and call it “CoolDown” then paste the following:

public class CoolDown {
    private boolean valid;
    private Timer timer;
    private long delay = 100;
    private static CoolDown instance = null;

    public static CoolDown sharedCoolDown() {
        if (instance == null) {
            instance = new CoolDown();
        }
        return instance;
    }

    private CoolDown() {
        timer = new Timer();
        valid = true;
    }

    public boolean checkValidity() {
        if (valid) {
            valid = false;
            timer.schedule(new Task(), delay);
            return true;
        }
        return false;
    }

    class Task extends TimerTask {
        public void run() {
            valid = true;
        }
    }
}

Even though this is a java thingie and not quite related to AndEngine directly, I’ll still explain it though.

I wanted to create a singleton class, so you only have one instance of this type in your whole program [special thanks to Mazyod, check out his blog, he blabbers about lots of useless stuff] thus it explains the sharedCoolDown() method behavior [and why the constructor is private].

You call checkValidity() it should return to you true if you can have a bullet and false if you can’t, the valid flag is the one that decides it, if it’s true then it gets toggled and a timer gets a new Task that runs after a certain delay , 100ms in our case here [you can change that if you want] and then returns true telling you that you can have a bullet.

Task is a class that extends TimerTask, it just makes valid true again when called [will be called by the timer after 100ms].

Now go back to your shootProjectile() method and add this at the top of the method.

if (!CoolDown.sharedCoolDown().checkValidity()) {
    return;
}

That snippet just returns if you want to shoot a projectile while still on the countdown ditching the call.

No More Ghosts ! Braaa~ains ! [AnimatedSprite]

Well .. I asked my awesome friend Hashimoto (@HHajyah) to draw some sprites for me and he did an amazing job, and because zombies are awesome we will have our ninja kill some zombies [also special thanks goes to ZHA for making the sprites into proper sprite sheets] I suck at graphics 😛

I got 2 versions , one with a height of 100px and one with a height of 50px , if you are using an hdpi device [800 x 480] or higher then use the 100px sprites , else use the 50px sprites.

Save them into your /assets/gfx/ director and rename them to “target.png” and delete the old ghosts sprites.
As you can see , this is a walking zombie , so it should be animating .. let’s get started on that !

[Note: if you want to use your own sprites , you have to make sure that your sprite sheet is properly indented as that AndEngine cuts the images automatically].

Change the type of the “mTargetTextureRegion” from “TextureRegion” to “TiledTextureRegion” and declare a new variable of type “BitmapTextureAtlas” called “sheetBitmapTextureAtlas”.

private BitmapTextureAtlas sheetBitmapTextureAtlas;
private TiledTextureRegion mTargetTextureRegion;

Then in onLoadResources() , initialize the sheetBitmapTextureAtlas.

sheetBitmapTextureAtlas = new BitmapTextureAtlas(512, 512);

The change the initialization of the texture region to the following:

mTargetTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(sheetBitmapTextureAtlas, this,"target.png", 0, 0, 3, 1);

We just loaded the image properly and told AndEngine that we have 3 columns and 1 row so it can cut it down into 3 images properly.

Now have the Engine load the textures:

mEngine.getTextureManager().loadTexture(sheetBitmapTextureAtlas);

And let’s proceed to the TargetsPool class and make some simple modifications changing to TiledTextureRegion and AnimatedSprites instead of TextureRegion and Sprites:

public class TargetsPool extends GenericPool {
    private TiledTextureRegion mTextureRegion;

    public TargetsPool(TiledTextureRegion mTargetTextureRegion) {
        if (mTargetTextureRegion == null) {
            throw new IllegalArgumentException("The texture region must not be NULL");
        }
        mTextureRegion = mTargetTextureRegion;
    }

    protected AnimatedSprite onAllocatePoolItem() {
        return new AnimatedSprite(0, 0, mTextureRegion.deepCopy());
    }

    protected void onHandleRecycleItem(final AnimatedSprite target) {
        target.clearEntityModifiers();
        target.clearUpdateHandlers();
        target.setVisible(false);
        target.detachSelf();
        target.reset();
    }
}

You’ll need to fix everything related too , change every Sprite object used with the targets to AnimatedSprite including the linkedlists you have then inside your addTarget() method and before attaching the target to the scene add this line:

target.animate(300);

Which animates the target for you , you can change the number to change the animation speed to whatever you want.

Those Are NOT Shurikens !! [Sprite Modifiers]

Hide your kids , hide your wife , the ninja noticed that he’s throwing fake shurikens and will go on an ALL CAPS RAGE !!!

let’s give him real shurikens shall we ? As before, there are 2 versions of the Sprite:

assets/gfx , rename to “projectile.png” and delete the old one this just changes the projectile sprite , if you wanna test then go ahead but it ain’t worth it .. not yet at least.

proceed to shootProjectile() and swap the MoveModifier you have with this MoveByModifier:

MoveByModifier movMByod = new MoveByModifier(realMoveDuration, realX, realY);

The difference is that this one doesn’t take the movement’s start point , it moves the sprite from wherever it is to that point .. this will prove to be useful later on.

No respectable shuriken gets thrown without being rotated , so we’ll have to add this line too:

LoopEntityModifier loopMod = new LoopEntityModifier(new RotationModifier(0.5f, 0, -360));

LoopEntityModifier takes an EntityModifier and keeps on looping on it, if you didn’t specify a count then it’ll keep on doing this till the end of time .. in another word .. it’s a while(true) with no breaks or exists !! [i.e infinite loop].
So we provide the loopMod with a RotationModifier which will rotate from degree 0 till degree -360 [counter clock-wise] in half a second, the loop will make sure that this happens till infinity [and beyond !!].
One last Modifier is needed which is called ParallelEntityModifier:

final ParallelEntityModifier par = new ParallelEntityModifier(mod, loopMod);

This one runs couple of modifiers in parallel [duh !] so we added our movByMod and the loopMod so we get the rotation effect while the shuriken is thrown.
Now just make sure you register the new modifier and then run !

projectile.registerEntityModifier(par.deepCopy());

Sayonara Ninja-sama [New Hero]

The ninja has reached the end of his journey, it’s time for goodbye .. and to introduce our new hero.
THE URBAN NINJA !! [he’s still a ninja somehow !].

2 versions of the sprite sheet for you , here you go 😀

Put it in the assets/gfx director and name it “hero.png” [the name player is still dedicated to our old ninja , can’t be reused or he’ll get mad].
You’ll also have to change the deceleration for the sheetBitmapTextureAtlas to:

sheetBitmapTextureAtlas = new BitmapTextureAtlas(2048, 512);

Introduce a new “TiledTextureRegion” and an animatedSprite:

private TiledTextureRegion mHeroTextureRegion;
public AnimatedSprite hero;

Then inside onLoadResources() [notice we have 11 columns here, keep that in mind for now]:

mHeroTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(sheetBitmapTextureAtlas, this,"hero.png", 0, 212, 11, 1);

Remove the old “mPlayerTextureRegion” and start fixing the code, remove it from onLoadResources first , then in onLoadScene , fix the PlayerX and PlayerY to these:

final int PlayerX = (mHeroTextureRegion.getWidth() / 20);
final int PlayerY = (int) ((mCamera.getHeight() - mHeroTextureRegion.getHeight()) / 2);

There is no exact reason for the /20 , I just put there cause it looked nice on my screen 😀
We’ll have a new AnimatedSprite instead of the old Sprite [which you will have to delete].

hero = new AnimatedSprite(PlayerX, PlayerY, mHeroTextureRegion) {
    public boolean onAreaTouched(TouchEvent pSceneTouchEvent, float pTouchAreaLocalX, float pTouchAreaLocalY) {
        this.setPosition(this.getX(), pSceneTouchEvent.getY()- this.getHeight() / 2);
            return true;
    }
};

Now delete the deceleration for the Sprite player, and replace it’s occurrence in the code with hero [also remove the setScale if you have it]
Go the end of shootProjectile() and add this line:

hero.animate(50, false);

Which animates the hero, giving 50ms for each frame and only happens once [looping is set to false] , now’s a good time to modify the CoolDown class changing the delay to 600.
We have 11 frames , each is 50ms that’s 550ms , let’s add another 50ms which gives us the 600ms CoolDown duration , making sure we don’t cut down the animation in the middle , test and see how your hero ninja animates when throwing.

How Come He’s Throwing Before Throwing ? [some clean ups]

If you are actually following this tutorial and writing the code instead of just reading and pretending that you know everything and it’d be easy to write this cause you are awesome anyway ..
You’d have noticed that the shuriken gets thrown before the animation finishes , we don’t want that , do we ?
To be honest, I wasn’t exactly sure how to solve this, and did create some kind of a work around .. not sure if it’s the best method or not , but it worked so I’m happy and I don’t care what you think.

The idea here is , add the projectile on touch but make it invisible, then wait for a certain delay then make it visible and start animating it, so our whole work will be inside the shootProjectile() method.

After the ParallelEntityModifier deceleration , add this new modifier:

DelayModifier dMod = new DelayModifier(0.55f);

Which is a delay for 0.55s [not ms].
Then we’d have to add something called IModifierListener which gives you 2 methods that gets called before and after the modifier starts working, it’ll be like this:

dMod.addModifierListener(new IModifierListener() {
    @Override
    public void onModifierStarted(IModifier arg0, IEntity arg1) {
    }

    @Override
    public void onModifierFinished(IModifier arg0, IEntity arg1) {
        shootingSound.play();
        projectile.setVisible(true);
        projectile.setPosition(hero.getX() + hero.getWidth(), hero.getY()+ hero.getHeight() / 3);
        projectilesToBeAdded.add(projectile);
    }
});

You’ll also have to change the projectile’s Sprite to final, notice that we are setting the projectile’s position AFTER the delay is done.. if you didn’t do that then when you click and move the hero , the projectile will start moving from where hero was when you clicked not when the animation finished.

Also we are adding the projectile to the linked list here to avoid zombies dying from hitting the projectile before it goes visible, make sure you remove the linkedList addition from the end of shootProjectile() method [don’t add the same projectile twice !!!].

We’ll use one last modifier called SequenceEntityModifier which takes some modifiers and runs them one after the other , so your last lines in the shootProjectile() method will be [make sure you remove the old attachChild on top]:

SequenceEntityModifier seq = new SequenceEntityModifier(dMod, par);
projectile.registerEntityModifier(seq);
projectile.setVisible(false);
mMainScene.attachChild(projectile,1);

This should fix it for you, enjoy the perfect effect !

Move Move Move [AutoParallaxBackground]

This part will have a little issue, the images I created [yes I drew them with microsoft paint :P] are taken into consideration that the screen size is 800*480 , if you have a smaller screen then you may need to create your own image [or scale the ones I’m providing] if you want everything to appear perfect if not then you can set the camera width and height to static values and the openGL will scale everything up or down to fit into the screen.

I created 2 images , use whichever you like:

The Images resolution is 1100*480 , I did make the width bigger than the screen size so you don’t show the whole image at once , we’ll let the image scroll to give a moving effect for the hero.
Put whichever background you prefer in the assets/gfx directory and rename it to “background.png”.

Declare those new objects:

private BitmapTextureAtlas mAutoParallaxBackgroundTexture;
private TextureRegion mParallaxLayer;

Go to onLoadResources() and put this in:

mAutoParallaxBackgroundTexture = new BitmapTextureAtlas(1024, 1024,TextureOptions.DEFAULT);

mParallaxLayer = BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mAutoParallaxBackgroundTexture, this,"background.png", 0, 0);

Don’t forget to load the texture into the engine at the end of this method. [make sure the mParallaxLayer line is added AFTER setting the path for the BitmapTextureAtlasTextureRegionFactory].

Navigate to onLoadScene() and those lines inside:

// background preperations
final AutoParallaxBackground autoParallaxBackground = new AutoParallaxBackground(0, 0, 0, 10);
autoParallaxBackground.attachParallaxEntity(new ParallaxEntity(-25.0f, new Sprite(0,mCamera.getHeight() - this.mParallaxLayer.getHeight(),this.mParallaxLayer)));
mMainScene.setBackground(autoParallaxBackground);

Also remove the old setBackground we had.

In the above code, we created a new AutoParallaxBackground that changes on a rate of 5 parallex and we attached the background image and set it to go on a speed of -25 [move from right to left], mess around with it and see what you get 😀

Wrap Up [and code]

That ends the second tutorial , hope it was clear enough .. drop a comment when you are done reading , it gives me that nice feeling that someone is actually reading this and that it’s useful 😀

After I finished this I noticed that the position of the throwing was kinda off, maybe I’ll check that later on .. I’ll stop writing those tutorials for a while now till I finish my other projects, if you fixed the issue then drop a comment and I’ll update the post [and credit you too]. commenter “Diego” kindly provided the fix to this issue , check his fix in the comments below.

Also if you are an artist and would like to share sprites [or at least a proper background that’s not ugly and not made using Microsoft paint :P] drop them in the comments below and readers would rejoice [or something].

If there are any issues in the tutorial , let me know.

And here’s the Source Code I didn’t get to add lots of comments on it .. but I think it should be clear if you read the tutorial, you can use this however you want, but please give credit for that [If you made a game and released it on the market based on this one tell me, I’ll be happy to check it out :D]