Sprite Animation to create effect using Atlas

[Andre Lopes]

Ok Guys! I finnaly did Atlas work and i was able to get the texture and paint on the screen.

Now, i have some questions and i would be very thankfulllllllll if anyone could light this darkness that i am now o0

How does this sprite animation works?
I mean, i want draw something like this :
http://media.photobucket.com/image/explosion%20gif/melzpoo/fire/Feuer46.gif

I need several images to do that or i need to create a SEQUENCE or i need a .gif already "prepared/ready" ?

Whats the correct/fastest way to do?


TY guys
Almost there baby xD

[jhffvcc]

The most common way creating sprite animations is to load one big image, which contains all other animation frames.
Afterwards you can create your final animation sequence for example with the built-in java function 'getSubImage'.

http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/image/BufferedImage.html#getSubimage%28int,%20int,%20int,%20int%29

In other words: You create an Image of 128x128. Now you want an animation that lets you character walk.
Therefore you draw a grid of the size of 16x16 on top of your image. Inside a cell of the grid you draw your animation frame.
If the current animation frame doesn't fill the entire cell with color you have two options:

Either you erase the background or you define programmatically the color which should be ignored while rendering the subImage.

[Jimmt]

jhffvcc, please read posts before you reply. First of all, he's using libGDX, not java2d. Second, he specifically said he was using Atlases, said nothing about individual spritesheets. He's asking how to make the animation in libgdx from the atlas.

Games published by our own members! Check 'em out!

[wreed12345]

To draw something like this it is normally done using a sprite sheet. Each frame of the animation a separate part of the sheet (image). This website is a great tutorial for doing this in libgdx https://code.google.com/p/libgdx/wiki/SpriteAnimation

[Jimmt]

Dammit, will you guys please read the post. He's using an ATLAS so he's trying compile the ANIMATION from the ATLAS. Just to stop the unhelpful posts, I'll explain. You have to use the Animation class of libgdx. Constructor:

1	explosionAnimation = new Animation(0.15f, explosionAnimationFrames); //0.15f is the frame duration, explosionAnimationFrames is the array of the different frames.

To use this, you need the array of frames. Now, since you are using a texture atlas, just make the explosionAnimationFrames array using the textures from the atlas.

1	Array<AtlasRegion> explosionAnimationFrames = textureAtlas.findRegions("names-of-regions"); //usually you would organize your textures in the atlas for easy loading, for example start all player textures with "player_"

If you are using the Image class, you will have to also make an array of drawables. To actually use the animation:

1   2   3   4   5   6   7   8   9   10

private float animationStateTime; public void foo(float delta){ //delta time, time inbetween frames - libgdx does this for you TextureRegion frame; if(condition to start playing animation){ frame = explosionAnimation.getKeyFrame(animationStateTime += delta, false); } explosionTexture = frame.getTexture(); }

Again, if you are using Image you will have to set the drawable and use your drawables array.

[Andre Lopes]

Alright , i found this image :
http://april-young.com/home/wp-content/uploads/2012/04/Explosion1spritesheet.png

How do i pack that in the Atlas?

I dont get how to tell libgdx that i want divide that in several parts.

[Jimmt]

So you are using singular sprite sheets? The purpose of the atlas is to pack together many individual images. In this case, go here - basically split your large spritesheet (Texture) into several small and equally sized regions (TextureRegions).

[Andre Lopes]

Im having issues :

run:
com.badlogic.gdx.utils.GdxRuntimeException: page size for 'Explosion2spritesheet' to small
   at com.badlogic.gdx.graphics.g2d.PixmapPacker.pack(PixmapPacker.java:163)
   at Atlas.Atlas.generateAtlas(Atlas.java:26)
   at Atlas.Explosions.<init>(Explosions.java:25)
   at Main.ShooterGame.create(ShooterGame.java:26)
   at com.badlogic.gdx.backends.jglJglfwApplication.initialize(JglfwApplication.java:156)
   at com.badlogic.gdx.backends.jglfw.JglfwApplication$1.run(JglfwApplication.java:72)
   at java.lang.Thread.run(Thread.java:722)
CONSTRUÍDO COM SUCESSO (tempo total: 0 segundos)
fw.JglfwApplication.start(JglfwApplication.java:161)
   at com.badlogic.gdx.backends.jglfw.

When i tried loading the image that i packed in atlas, that happened.

--

Thought, when i did this , it worked perfectly, i couldnt even bealive it :

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48

package Atlas; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.Animation; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureRegion; public class Explosions {     private static final int FRAME_COLS = 8;     private static final int FRAME_ROWS = 6;     Animation walkAnimation;     Texture walkSheet;     TextureRegion[] walkFrames;     SpriteBatch spriteBatch;     TextureRegion currentFrame;     float stateTime;     public Explosions() {         Atlas.generateAtlas();         walkSheet = new Texture(Gdx.files.internal("Explosion2spritesheet.png"));         TextureRegion[][] tmp = TextureRegion.split(walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS);         walkFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS];         int index = 0;         for (int i = 0; i < FRAME_ROWS; i++) {             for (int j = 0; j < FRAME_COLS; j++) {                 walkFrames[index++] = tmp[i][j];             }         }         walkAnimation = new Animation(0.025f, walkFrames);         spriteBatch = new SpriteBatch();         stateTime = 0f;     }             public TextureRegion getCurrentFrame()     {         stateTime += Gdx.graphics.getDeltaTime();                           currentFrame = walkAnimation.getKeyFrame(stateTime, true);                   return currentFrame;     } }

[kutucuk]

This is very normal. I'll try to explain in my little knowledge.

When you pack Atlas using TexturePacker2 or pack them dynamically, libgdx has a way of knowing which image is which, and what their properties are.

But you use a singular file, which you did not pack and you don't have a file to read (or make libgdx read) about the image regions in that big image.
So while doing this:

1	TextureRegion[][] tmp = TextureRegion.split(walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS);

You assume that every frame has the same dimension. You cut the image in the program, add them into a TextureRegion array and then animate them. Because you knew (and assumed) all of your frames had  walkSheet.getWidth() / FRAME_COLS and walkSheet.getHeight() / FRAME_ROWS dimensions.

If you cut the big sprite sheet using GIMP or Photoshop, then add them to an atlas like you normally do and try what Jimmt did in his post, it would work.

I hope it helps

[Nate]

You could also use particles:
https://code.google.com/p/libgdx/wiki/ParticleEditor
It's uses less memory but more fillrate.

Games published by our own members! Check 'em out!

[Andre Lopes]

Hm, im trying to find that editor, but it seems im blind. lol;

i downloaded this : http://libgdx.googlecode.com/svn/jws/particle-editor.jnlp
but it doesnt open at all.

Im using java 7 . 21

Not sure where to find that editor.

[Andre Lopes]

IT says in website that is inside the library, i opened all .jar, including  setup but there wasnt any option for particle editor.

[Jimmt]

The link on the website is to a broken webstart file, iirc.
I've got a link on my tutorial: http://www.java-gaming.org/topics/particle-effects-in-libgdx/29484/msg/270708/view.html

It's also in the source, but I forget where.

[Nate]

The JWS works for me.

I've updated the wiki with a section on how to run it. Note I had to change the libgdx build as it was not including some resource files in the gdx-tools.jar. I've started a new build, so wait about an hour before trying to use the latest nightly as described in the wiki. Build status is here:
http://libgdx.badlogicgames.com:8080/

[Andre Lopes]

Alright, i will check once i get home from college.
Ty Nate.

btw You must be really important to edit wiki o0

--

I printed the tutorial so i will read it as well.

[Andre Lopes]

Ah i have another question.

How can i draw the explosion on the screen without stopping the main loop?

I mean, if i have to draw those several sprites, i would have to stay in a while loop on the explosion class or draw each sprite until the sequence is finished....

Is there any method to do that automatically or i need to work out the logic with a integer flag or something like that?

Heres my explosion class :

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48

package Atlas; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.Animation; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureRegion; public class Explosions {     private static final int FRAME_COLS = 8;     private static final int FRAME_ROWS = 6;     Animation walkAnimation;     Texture walkSheet;     TextureRegion[] walkFrames;     SpriteBatch spriteBatch;     TextureRegion currentFrame;     float stateTime;     public Explosions() {         Atlas.generateAtlas();         walkSheet = new Texture(Gdx.files.internal("Explosion2spritesheet.png"));         TextureRegion[][] tmp = TextureRegion.split(walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS);         walkFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS];         int index = 0;         for (int i = 0; i < FRAME_ROWS; i++) {             for (int j = 0; j < FRAME_COLS; j++) {                 walkFrames[index++] = tmp[i][j];             }         }         walkAnimation = new Animation(0.025f, walkFrames);         spriteBatch = new SpriteBatch();         stateTime = 0f;     }             public TextureRegion getCurrentFrame()     {         stateTime += Gdx.graphics.getDeltaTime();                           currentFrame = walkAnimation.getKeyFrame(stateTime, true);                   return currentFrame;     } }

[Jimmt]

I don't understand your question. Why do you need a while loop? What's wrong with for(int i = 0; i < entities.size; i++)?

[Andre Lopes]

I mean, the whole thread will have to wait for the animation drawing ends?

[Jimmt]

No...and why are you using a separate thread...just draw the explosion alongside everything else...

[Andre Lopes]

Yes but, it stays in a loop.
I will figure one way

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48   49   50   51   52   53   54   55   56   57   58   59   60   61   62   63   64   65   66

package Main; import Atlas.Atlas; import Atlas.Explosions; import com.badlogic.gdx.ApplicationListener; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.Sprite; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureAtlas; import java.util.ArrayList; /**  *  * @author André Lopes  */ public class ShooterGame implements ApplicationListener {     private Explosions explosions;     private SpriteBatch spritebatch;     private boolean fs;         @Override     public void create() {        explosions = new Explosions();        spritebatch = new SpriteBatch();        fs = false;     }     @Override     public void render() {                 Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);                 spritebatch.begin();         spritebatch.draw(explosions.getCurrentFrame(),50,50);         spritebatch.flush();         spritebatch.end();             }       //////////////////////////////////////////////////////////////////     //////////////////////////////////////////////////////////////////     //////////////////////////////////////////////////////////////////     @Override     public void resize(int width, int height) {     }     @Override     public void pause() {     }     @Override     public void resume() {     }     @Override     public void dispose() {     } }

[Andre Lopes]

Ok, i was thinking in making a timer but.. i noticed it will only gen more problems.
So i worked out this, please tell me what you think :p

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48   49   50   51   52   53   54   55   56   57   58   59   60   61   62   63   64   65   66   67   68   69   70   71   72   73   74   75

package Main; import Atlas.Atlas; import Atlas.Explosions; import com.badlogic.gdx.ApplicationListener; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.Sprite; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureAtlas; import java.util.ArrayList; /**  *  * @author André Lopes  */ public class ShooterGame implements ApplicationListener {     private Explosions explosions;     private SpriteBatch spritebatch;     @Override     public void create() {         explosions = new Explosions();         spritebatch = new SpriteBatch();               explosions.addExplosionsHappening(new Explosions(),20,25);         explosions.addExplosionsHappening(new Explosions(),100,185);     }     @Override     public void render() {         Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);                 explode();     }     public void explode() {         spritebatch.begin();         for (int i = 0; i < explosions.getExplosionsHappening().size(); i++)         {             Explosions getExp = explosions.getExplosionsHappening().get(i);             spritebatch.draw(getExp.getCurrentFrame(),getExp.posx, getExp.posy);         }         spritebatch.flush();         spritebatch.end();     }     //////////////////////////////////////////////////////////////////     //////////////////////////////////////////////////////////////////     //////////////////////////////////////////////////////////////////     @Override     public void resize(int width, int height) {     }     @Override     public void pause() {     }     @Override     public void resume() {     }     @Override     public void dispose() {     } }

And now the Explosion Class, i know the ArrayList shouldnt be here, but its just for a test anyway :

1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48   49   50   51   52   53   54   55   56   57   58   59   60   61   62   63   64   65

package Atlas; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.Animation; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureRegion; import java.util.ArrayList; public class Explosions {     private static final int FRAME_COLS = 8;     private static final int FRAME_ROWS = 6;     Animation walkAnimation;     Texture walkSheet;     TextureRegion[] walkFrames;     SpriteBatch spriteBatch;     TextureRegion currentFrame;     float stateTime;     private ArrayList<Explosions> explosionsHappening;     public int posx,posy;         public Explosions() {         //Atlas.generateAtlas();         explosionsHappening = new ArrayList<>();         walkSheet = new Texture(Gdx.files.internal("Explosion2spritesheet.png"));         TextureRegion[][] tmp = TextureRegion.split(walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS);         walkFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS];         int index = 0;         for (int i = 0; i < FRAME_ROWS; i++) {             for (int j = 0; j < FRAME_COLS; j++) {                 walkFrames[index++] = tmp[i][j];             }         }         walkAnimation = new Animation(0.025f, walkFrames);         spriteBatch = new SpriteBatch();         stateTime = 0f;     }             public TextureRegion getCurrentFrame()     {         stateTime += Gdx.graphics.getDeltaTime();                           currentFrame = walkAnimation.getKeyFrame(stateTime,false);                   return currentFrame;     }     public ArrayList<Explosions> getExplosionsHappening() {         return explosionsHappening;     }     public void addExplosionsHappening(Explosions exp,int posX,int posY) {         exp.posx = posX;         exp.posy = posY;         this.explosionsHappening.add(exp);     }         }