Sprite Animation in Android with OpenGL ES

Question

How to do a sprite animation in android using OpenGL ES?

What i have done :

Now I am able to draw a rectangle and apply my texture(Spritesheet) to it

What I need to know :

Now the rectangle shows the whole sprite sheet as a whole How to show a single action from sprite sheet at a time and make the animation

It will be very help full if anyone can share any idea's , links to tutorials and suggestions.

Advanced Thanks to All

Answer 1

AndEngine provides a good way to draw animated sprites. It has a class AnimatedSprite which will do a lot of work for you. Here are the steps :

1. Get the BitMapTextureAtlas

bitmapTextureAtlas = new BuildableBitmapTextureAtlas(getTextureManager(), 480, 200, TextureOptions.NEAREST);

2.Get the TiledTextureRegion for your spirtesheet

yourTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(bitmapTextureAtlas, context, "yourspritesheet.png", /*sprite rows*/, /*sprite columns*/);

3.Finally create the AnimatedSprite and attach it to the scene

AnimatedSprite yourSprite = new AnimatedSprite(40, 40, yourTextureRegion, this.getVertexBufferObjectManager());
yourSprite.animate(100);
yourScene.attachChild(yourSprite); /**attach this spirte to the scene**/

For further reference look : https://github.com/nicolasgramlich/AndEngineExamples

Answer 2

The optimized way would be to have one texture with all the steps in your animation, like movie frames. As it is a texture, each frames has initial coordinates and a common frame width and height. Draw one quad and change the uv coordinates of the quad to match the frame you want to draw in the texture. Marco Martilleni pointed to a good tutorial.

Answer 3

You need to adjust your uv coordinates. You want the top left uv to correspond with the location on the sprite sheet. Say your sprite sheet is 256x256 pixels and the frame you want starts at (32, 32).

You can think of the uv's as a percentage of the image. The horizontal percentage is 32/256. (12.5% of the sheet) so the u for the left vertices should be 0.125.

The u for the right vertices depends on how large each frame is. Lets say 16x16. Then the two right vertices' u's would be (32+16)/256 or 0.1875 of the sheet.

now for the v's. 0 is at the bottom, and the frame position is defined from the top. 32/256 would give us a percentage from the bottom of the image. What we need is (256-32)/256 to get the percentage from the bottom of the sheet to the top of the image - 0.875 (yay!)

The bottom vertices are an additional distance from the top of frame size. So (256-32-16)/256 or 0.8125.

So to recap, the uv coords for each vertex is:

top left : (frame.x / sheet.w , (sheet.h - frame.y) / sheet.h)
bottom left:(frame.x / sheet.w , (sheet.h - frame.y - frame.h) / sheet.h)
top right: ((frame.x + frame.w) / sheet.w , (sheet.h - frame.y) / sheet.h)
bottom right: ((frame.x + frame.w) / sheet.w , (sheet.h - frame.y - frame.h) / sheet.h)

where x = x position, y = y position, w = width, h = height all in pixels

If you see a mistake anywhere, please point it out. I'm actually about to implement this for my engine and explaining it helped me figure it out.

With this information you should be able to create a render function that takes some of these parameters and draws a subsection of the image. Then, you can just change the frame positions every animation step to animate the image.

Answer 4

You need to do the right UV mapping to be able to see only one frame of your sprite sheet.

For the animation the trick is to use

glMatrixMode(GL_TEXTURE);
glTranslatef(u, v, 0);

where u and v are the coordinates of the current frame in UV space.

You can find more info here: sprite animation in openGL