Tag 8 – Frame Animationen

veröffentlicht am: 8. Dezember 2012

Meistens werden Figuren in Spielen animiert, in dem man ihre Bewegungen Bild für Bild zeichnet. Diese Bilder nennt man dann Frames. Weil ich selber nicht gut zeichnen kann, hab ich mir das Spritesheet der Mumie aus dem Mojam-Spiel Catacomb Snatch von Mojang geholt.

Diesen habe ich in die einzelnen Bilder unterteilt. Die Bilder, die zu einer Animation gehören (z.B. zum nach-rechts laufen) habe ich mit dem selben Namen (mommyright) versehen und dahinter _ZAHL gesetzt. Damit weiß der Texturepacker, dass diese Texturen zusammengehören und wir können Sie später alle auf einmal abfragen.

Das ganze als Animation zu definieren, ist nun sehr einfach:

Animation animUp=new Animation(0.2f,atlas.findRegions("mummyup"));

Die 0.2f ist die Anzahl der Sekunden, die jeder Frame sichtbar ist.
Nun können wir auch noch definieren, dass die Animation immer wiederholt werden soll.

animUp.setPlayMode(Animation.LOOP);

Animation.LOOP steht dann dafür, dass nach dem letzten wieder das erste kommt. Bei Animation.LOOP_PINGPONG wird nach dem letzten Frame die Reihenfolge wieder umgekehrt. Zusätzlich gibt es noch LOOP_REVERSED, LOOP_RANDOM, REVERSED und natürlich NORMAL.

Um jetzt den richtigen Frame zu malen, müssen wir in einer Variable die Zeit hochzählen und dann die entsprechende TexturRegion wieder malen:

float animTime;
// [...]
animTime+=Gdx.graphics.getDeltaTime();
stage.getSpriteBatch().draw(animUp.getKeyFrame(animTime), 50,50);

Wenn man das ganze dann mit ein bisschen Input-Logik kombiniert, kann man die Mumie in alle Richtungen bewegen lassen.

testAnimUp=new Animation(0.2f, atlas.findRegions("mummyup"));
testAnimLeft=new Animation(0.2f, atlas.findRegions("mummyleft"));
testAnimDown=new Animation(0.2f, atlas.findRegions("mummydown"));
testAnimRight=new Animation(0.2f, atlas.findRegions("mummyright"));
// [...]
if(Gdx.input.isKeyPressed(Keys.UP)){
	direction=0;
}else if(Gdx.input.isKeyPressed(Keys.LEFT)){
	direction=1;
}else if(Gdx.input.isKeyPressed(Keys.DOWN)){
	direction=2;
}else if(Gdx.input.isKeyPressed(Keys.RIGHT)){
	direction=3;
}
// [...]
switch(direction){
	case 0:
		stage.getSpriteBatch().draw(testAnimUp.getKeyFrame(animTime,true), 50,50);
		break;
	case 1:
		stage.getSpriteBatch().draw(testAnimLeft.getKeyFrame(animTime,true), 50,50);
		break;
	case 2:
		stage.getSpriteBatch().draw(testAnimDown.getKeyFrame(animTime,true), 50,50);
		break;
	case 3:
		stage.getSpriteBatch().draw(testAnimRight.getKeyFrame(animTime,true), 50,50);
		break;
}


Momentan versuche ich noch, diese Animationen mit den Actors von scene2d zu kombinieren. Falls ich das schaffe, füge ich das später heute hinzu.

geposted in libgdx

7 Antworten zu “Tag 8 – Frame Animationen”

  1. 0xg sagt:

    Nice tutorial. Thanks for sharing. Did you find out how to combine Animations with Stage / Actors?

    • bitowl sagt:

      Yes, but I’m at the moment too distracted by other things, so I did not write anything about it yet.

      In GitHub though, the animation already works with scene2d. Most important is a class called AnimationDrawable (that was given to me by „bach“ in the IRC). In the IngameScreen class you can find out how to use it.

  2. 0xg sagt:

    Are you really deleting my comments? It sounds too crazy to be true 😀

  3. 0xg sagt:

    Never mind! But your blog as some issues with displaying comments. Or maybe it is a validation system?

    • bitowl sagt:

      It’s the default validation-system of wordpress that requires me to approve your comments. I’m quite busy with our school server at the moment, so I didn’t visited the Dashboard of my blog the last days.

      greetings
      bitowl

  4. red_evilspirit sagt:

    Hi,
    i have some problem when running code. I write like your tut but it not working
    —————————————–
    Stage stage;
    Animation animUp;
    TextureAtlas atlas;
    float animTime;

    @Override
    public void create() {
    stage = new Stage();

    atlas = new TextureAtlas(Gdx.files.internal(„data/mummy.atlas“));
    animUp=new Animation(0.2f,atlas.findRegions(„mummyup“));
    animUp.setPlayMode(Animation.LOOP);
    }
    @Override
    public void dispose() {
    atlas.dispose();
    stage.dispose();
    }
    @Override
    public void render() {
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

    animTime+=Gdx.graphics.getDeltaTime();
    stage.getSpriteBatch().draw(animUp.getKeyFrame(animTime), 50,50);
    }
    ——————————–
    it break after line: stage.getSpriteBatch().draw(animUp.getKeyFrame(animTime), 50,50);
    could you help me fix that bug 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.