{"id":461,"date":"2011-07-23T22:34:00","date_gmt":"2011-07-23T22:34:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-game-development-sprite-animation.html"},"modified":"2012-10-21T19:58:20","modified_gmt":"2012-10-21T19:58:20","slug":"android-game-development-sprite","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/07\/android-game-development-sprite.html","title":{"rendered":"Android Game Development – Sprite Animation"},"content":{"rendered":"
If you followed the series<\/a> so far we are pretty knowledgable in handling touches, displaying images and moving them around.<\/p>\n

But a moving image it\u2019s a pretty dull sight as it looks really fake and amateurish. To give the characters some life we will need to do more than that. That is what animation is all about. A rock is an inanimate object and even if it is thrown, it doesn\u2019t change its shape. A human on the other hand, is very animated. Try throwing one and you\u2019ll see twitching limbs and even screams in the air.<\/p>\n

Let\u2019s just resort to examining walking which is pretty complex in its own. Imagine a human crossing your way (just in 2D). You\u2019ll notice different displays of the body. Left foot in front, right hand in front while the oposite limbs are behind. This slowly changes so the left foot remains behind while the right progresses along with the body. But at one point the cycle repeats. If you don\u2019t close your eyes you see the person progressing smoothly. If you close your eyes and keep them closed for a bit and open them again the person already went on and is in a different position. Try blinking quite rapidly and you will see something like the old black and white comedies. That is low frame rate. More on FPS here<\/a>.<\/p>\n

Actually we do want a low frame rate walking for this tutorial, just like this.<\/p>\n

<\/a><\/div>\n

The walking presented above is a bit dodgy but it\u2019s a ripped off version of the sprites from Monkey Island. She\u2019s Elaine Marley.
\nThis is called a Sprite<\/strong>. It is a simple 2 dimensional image or animation.
\nTo be able to re-create the above animation, we need every frame from the walking cycle.<\/p>\n

<\/a><\/div>\n

It is a 150 pixels wide image and each frame is 30 pixels wide.
\nTo illustrate it better check the following image.<\/p>\n

<\/a><\/div>\n

To get the above animation in android (or iPhone or in any other program for that matter), we need to load up each frame as a separate image and display them at regular intervals one after each other. OR we can load up the big image containing all the frames and use the methods provided by android do slice and dice them on the fly and to display only the relevant frame.
\nTo do that is trivial. We know that we have 5 frames and each frame is 30 pixels wide. We define a rectangle (that will be our selection) which has the width of one frame and the height of the image.
\nThe following image shows how I cut out the first two frames. The rest you should fill in.<\/p>\n

<\/a><\/div>\n

Knowing all this let\u2019s go create the project. We will use the knowledge from some previous chapters, most notably about the game loop<\/a> and the one about the image display<\/a> (here we set up the thread that triggers the drawing of the graphics item every frame).<\/p>\n

We will need an object to animate. We use Elaine from Monkey Island so I will the class ElaineAnimated.java<\/i><\/strong>.<\/p>\n

public class ElaineAnimated {\r\n\r\n\tprivate static final String TAG = ElaineAnimated.class.getSimpleName();\r\n\r\n\tprivate Bitmap bitmap;\t\t\/\/ the animation sequence\r\n\tprivate Rect sourceRect;\t\/\/ the rectangle to be drawn from the animation bitmap\r\n\tprivate int frameNr;\t\t\/\/ number of frames in animation\r\n\tprivate int currentFrame;\t\/\/ the current frame\r\n\tprivate long frameTicker;\t\/\/ the time of the last frame update\r\n\tprivate int framePeriod;\t\/\/ milliseconds between each frame (1000\/fps)\r\n\r\n\tprivate int spriteWidth;\t\/\/ the width of the sprite to calculate the cut out rectangle\r\n\tprivate int spriteHeight;\t\/\/ the height of the sprite\r\n\r\n\tprivate int x;\t\t\t\t\/\/ the X coordinate of the object (top left of the image)\r\n\tprivate int y;\t\t\t\t\/\/ the Y coordinate of the object (top left of the image)\r\n\r\n}\r\n<\/pre>\n
The private attributes are commented but worth mentioning a few.<\/p>\n