Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (487)
Games in Android Showcase (110)
games submitted by our members
Games in WIP (552)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Sprite Animation to create effect using Atlas  (Read 2779 times)
0 Members and 1 Guest are viewing this topic.
Offline Andre Lopes
« Posted 2013-05-12 20:49:35 »

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
Click to Play



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 Cheesy
Almost there baby xD
Cheesy
Offline jhffvcc

Senior Newbie







« Reply #1 - Posted 2013-05-12 21:31:52 »

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.
Offline Jimmt
« League of Dukes »

JGO Kernel


Medals: 128
Projects: 4
Exp: 3 years



« Reply #2 - Posted 2013-05-12 22:06:56 »

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!
Legends of Yore - The Casual Retro Roguelike
Offline wreed12345

JGO Knight


Medals: 24
Projects: 2
Exp: 2 years


http://linebylinecoding.blogspot.com/


« Reply #3 - Posted 2013-05-12 22:29:19 »

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

Offline Jimmt
« League of Dukes »

JGO Kernel


Medals: 128
Projects: 4
Exp: 3 years



« Reply #4 - Posted 2013-05-12 23:39:48 »

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.
Offline Andre Lopes
« Reply #5 - Posted 2013-05-13 02:04:58 »

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.
Offline Jimmt
« League of Dukes »

JGO Kernel


Medals: 128
Projects: 4
Exp: 3 years



« Reply #6 - Posted 2013-05-13 02:18:25 »

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).
Offline Andre Lopes
« Reply #7 - Posted 2013-05-13 02:42:37 »

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.<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;
    }
}
Offline kutucuk

Senior Member


Medals: 5
Exp: 3 years



« Reply #8 - Posted 2013-05-13 11:11:55 »

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 Smiley
Offline Nate

JGO Kernel


Medals: 145
Projects: 4
Exp: 14 years


Esoteric Software


« Reply #9 - Posted 2013-05-13 11:39:09 »

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!
Legends of Yore - The Casual Retro Roguelike
Offline Andre Lopes
« Reply #10 - Posted 2013-05-13 12:50:10 »

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.

Offline Andre Lopes
« Reply #11 - Posted 2013-05-13 16:14:03 »

IT says in website that is inside the library, i opened all .jar, including  setup but there wasnt any option for particle editor.
Offline Jimmt
« League of Dukes »

JGO Kernel


Medals: 128
Projects: 4
Exp: 3 years



« Reply #12 - Posted 2013-05-13 16:49:14 »

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.
Offline Nate

JGO Kernel


Medals: 145
Projects: 4
Exp: 14 years


Esoteric Software


« Reply #13 - Posted 2013-05-13 19:33:12 »

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/

Offline Andre Lopes
« Reply #14 - Posted 2013-05-13 20:45:11 »

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.
Offline Andre Lopes
« Reply #15 - Posted 2013-05-13 20:47:06 »

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;
    }
}
Offline Jimmt
« League of Dukes »

JGO Kernel


Medals: 128
Projects: 4
Exp: 3 years



« Reply #16 - Posted 2013-05-13 21:39:42 »

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++)?
Offline Andre Lopes
« Reply #17 - Posted 2013-05-14 02:44:11 »

I mean, the whole thread will have to wait for the animation drawing ends?
Offline Jimmt
« League of Dukes »

JGO Kernel


Medals: 128
Projects: 4
Exp: 3 years



« Reply #18 - Posted 2013-05-14 02:49:21 »

No...and why are you using a separate thread...just draw the explosion alongside everything else...
Offline Andre Lopes
« Reply #19 - Posted 2013-05-14 11:46:06 »

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


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() {
    }
}
Offline Andre Lopes
« Reply #20 - Posted 2013-05-14 12:13:18 »

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);
    }
   
   
}
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

CopyableCougar4 (23 views)
2014-08-22 19:31:30

atombrot (34 views)
2014-08-19 09:29:53

Tekkerue (30 views)
2014-08-16 06:45:27

Tekkerue (28 views)
2014-08-16 06:22:17

Tekkerue (18 views)
2014-08-16 06:20:21

Tekkerue (27 views)
2014-08-16 06:12:11

Rayexar (65 views)
2014-08-11 02:49:23

BurntPizza (41 views)
2014-08-09 21:09:32

BurntPizza (31 views)
2014-08-08 02:01:56

Norakomi (41 views)
2014-08-06 19:49:38
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!