Sprite Animation to create effect using Atlas

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 :
See Mel Mendes

See Mel Mendes

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 :smiley:
Almost there baby xD
:smiley:

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(int,%20int,%20int,%20int)

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.

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.

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

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:


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.


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:


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.

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.

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).

Im having issues :

[quote]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.(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.
[/quote]
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 :

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;
    }
}

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:

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 :slight_smile:

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

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.

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

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.

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/

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.

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 :

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;
    }
}

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++)?

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

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

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

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() {
    }
}