{"id":8425,"date":"2013-02-12T10:00:33","date_gmt":"2013-02-12T08:00:33","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=8425"},"modified":"2013-02-12T11:12:58","modified_gmt":"2013-02-12T09:12:58","slug":"android-game-development-with-libgdx-animation-part-2","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2013\/02\/android-game-development-with-libgdx-animation-part-2.html","title":{"rendered":"Android Game Development with libgdx \u2013 Animation, Part 2"},"content":{"rendered":"

This is the second part of the Building a Game with LibGdx series. Make sure you read the first part<\/a> before starting on the second. There will be a lot of stuff covered in the following articles so I will try to break them down in more digestible sizes. We left off with a basic world and Bob gliding back on forth when using the arrow keys or touching the screen. Let\u2019s add some realism to the movement and animate the character whenever it is moving.<\/p>\n

Character Animation<\/h2>\n

To animate Bob, we will use the simplest technique called sprite animation<\/a>. The animation is nothing more than a sequence of images shown at a set interval to create
\n 
\nthe illusion of movement. The following sequence of images is used to create the running animation. <\/p>\n

\"bob<\/a><\/p>\n

. I have used Gimp to create the running character by playing Star Guard<\/a> a lot and analysing its running sequence. To create animations is quite simple. We want to display each frame for a certain amount of time and then switch to the next image. When we reached the end of the sequence we start again. This is called looping<\/strong>. We need to determine the frame duration<\/strong> which the amount of time the frame will be displayed for. Let\u2019s say we are rendering the game at 60 FPS, meaning we render a frame every 1 \/ 60 = 0.016 s. We have just 5 frames to animate a full step. Considering a typical athlete\u2019s cadence<\/a> of 180, we can work out how much time we show each frame to make the running realistic.<\/p>\n

The math of running<\/h2>\n

A cadence of 180 means 180 steps per minute. To calculate the number of steps per second we have 180 \/ 60 = 3. So every second we have need to take 3 steps. Our 5 frames make up one full step so we need to show 3 * 5 = 15 frames every second to simulate a professional athlete\u2019s running. This is not sprinting by the way. Our frame duration will be 1 \/ 15 = 0.066 second. That is 66 ms.<\/p>\n

Optimising the images<\/h2>\n

Before we add it to the game, we will optimise the images. Currently the project has the images as separate png files under the assets\/images<\/code> directory in the star-assault-android<\/code> project. We are currently using block.png<\/code> and bob_01.png<\/code>. There are a few more images, namely bob_02 - 06.png<\/code>. These images make up the animation sequence. Because libgdx is using OpenGL under the hood, it\u2019s not optimal to give the framework lots of images as textures to work with. What we will do, is to create a so called Texture Atlas<\/code>. A texture atlas is just an image which is big enough to fit all the images on it and it has a descriptor holding each individual image\u2019s name, position in the atlas and size. The individual images are called regions<\/strong> in the atlas. It there are many images, the atlas can have multiple pages<\/strong>. Each page gets loaded into the memory as a singe image and the regions are used as individual images. Don\u2019t need to know all this but this makes the application more optimal, will load more quickly and will run more smoothly. Libgdx has a utility called TexturePacker2<\/a> to create these atlases. It can be run from the command line or used programatically. To run it from Java use the following program:

<\/div> <\/div><\/p>\n
package net.obviam.starassault.utils;\r\n\r\nimport com.badlogic.gdx.tools.imagepacker.TexturePacker2;\r\n\r\npublic class TextureSetup {\r\n\r\n\tpublic static void main(String[] args) {\r\n\t\tTexturePacker2.process('\/path-to-star-guard-assets-images\/', 'path-to-star-guard-assets-images', 'textures.pack');\r\n\t}\r\n}<\/pre>\n
Make sure that you add gdx-tools.jar<\/code> to your libs<\/code> directory. Change the attributes of the process<\/code> method to point to the directory where the assets are located.<\/p>\n
Note:<\/h4>\n
 Also rename the files that contain the underscore \u201c_\u201d character because the TexturePacker2 uses it as a delimiter and we currently don\u2019t need that. Replace the underscore character with the hyphen \u201c-\u201d character. Processing the images in our directory should produce 2 files: textures.png<\/code> and textures.pack<\/code>. The texture atlas should look similar to the following image <\/p>\n
\"texture<\/a><\/p>\n
The directory structure I am using is the following: \"Assets<\/a><\/p>\n
Now that we have worked out what our animation will be, the frame duration and optimised the assets, let\u2019s add it to the game. We will modify Bob.java<\/code> first as this is the smallest bit<\/p>\n
public class Bob {\r\n\r\n\t\/\/ ... omitted ... \/\/\r\n\r\n\tfloat\t\tstateTime = 0;\r\n\r\n\t\/\/ ... omitted ... \/\/\r\n\r\n\tpublic void update(float delta) {\r\n\t\tstateTime += delta;\r\n\t\tposition.add(velocity.tmp().mul(delta)); \r\n\t}\r\n}<\/pre>\n
We added an attribute called stateTime<\/code>. This will track Bob\u2019s time in a particular state. We will be using it to provide the time spent by Bob in the game. It is important for the animation to work out which frame to show. Don\u2019t worry about it now. If you really want to understand, think of each frame of the animation as a state. Bob goes through state_frame_1, state_frame_2 and so on. Each one of these states lasts for 0.066 seconds. Once the state time exceeded 0.066 seconds, Bob goes into the next state. The animation class knows which image to provide to be displayed for the current state. It is also called the key frame<\/strong>. The WorldRenderer.java<\/code> suffers the most changes. The following snippet contains all the changes.<\/p>\n
public class WorldRenderer {\r\n\r\n\t\/\/ ... omitted ... \/\/\r\n\r\n\tprivate static final float RUNNING_FRAME_DURATION = 0.06f;\r\n\r\n\t\/** Textures **\/\r\n\tprivate TextureRegion bobIdleLeft;\r\n\tprivate TextureRegion bobIdleRight;\r\n\tprivate TextureRegion blockTexture;\r\n\tprivate TextureRegion bobFrame;\r\n\r\n\t\/** Animations **\/\r\n\tprivate Animation walkLeftAnimation;\r\n\tprivate Animation walkRightAnimation;\r\n\r\n\t\/\/ ... omitted ... \/\/\r\n\r\n\tprivate void loadTextures() {\r\n\t\tTextureAtlas atlas = new TextureAtlas(Gdx.files.internal('images\/textures\/textures.pack'));\r\n\t\tbobIdleLeft = atlas.findRegion('bob-01');\r\n\t\tbobIdleRight = new TextureRegion(bobIdleLeft);\r\n\t\tbobIdleRight.flip(true, false);\r\n\t\tblockTexture = atlas.findRegion('block');\r\n\t\tTextureRegion[] walkLeftFrames = new TextureRegion[5];\r\n\t\tfor (int i = 0; i < 5; i++) {\r\n\t\t\twalkLeftFrames[i] = atlas.findRegion('bob-0' + (i + 2));\r\n\t\t}\r\n\t\twalkLeftAnimation = new Animation(RUNNING_FRAME_DURATION, walkLeftFrames);\r\n\r\n\t\tTextureRegion[] walkRightFrames = new TextureRegion[5];\r\n\r\n\t\tfor (int i = 0; i < 5; i++) {\r\n\t\t\twalkRightFrames[i] = new TextureRegion(walkLeftFrames[i]);\r\n\t\t\twalkRightFrames[i].flip(true, false);\r\n\t\t}\r\n\t\twalkRightAnimation = new Animation(RUNNING_FRAME_DURATION, walkRightFrames);\r\n\t}\r\n\r\n\tprivate void drawBob() {\r\n\t\tBob bob = world.getBob();\r\n\t\tbobFrame = bob.isFacingLeft() ? bobIdleLeft : bobIdleRight;\r\n\t\tif(bob.getState().equals(State.WALKING)) {\r\n\t\t\tbobFrame = bob.isFacingLeft() ? walkLeftAnimation.getKeyFrame(bob.getStateTime(), true) : walkRightAnimation.getKeyFrame(bob.getStateTime(), true);\r\n\t\t}\r\n\t\tspriteBatch.draw(bobFrame, bob.getPosition().x * ppuX, bob.getPosition().y * ppuY, Bob.SIZE * ppuX, Bob.SIZE * ppuY);\r\n\t}\r\n\t\/\/ ... omitted ... \/\/\r\n}<\/pre>\n
#05<\/strong> \u2013 declaring the RUNNING_FRAME_DURATION constant which controls how long a frame in the running\/walking cycle will be displayed
\n#08 \u2013 #11<\/strong> \u2013 TextureRegion<\/code>s for Bob\u2019s different states. bobFrame<\/code> \u2013 will hold the region that will be displayed in the current cycle.
\n#14 \u2013 #15<\/strong> \u2013 the two Animation<\/code> objects that are used to animate Bob when walking\/running.<\/p>\n
Loading the images from a TextureAtlas<\/code><\/strong><\/p>\n
#19<\/strong> \u2013 the new loadTextures()<\/code> method
\n#20<\/strong> \u2013 loading the TextureAtlas form the internal file. This is the .pack<\/code> file resulted from TexturePacker2<\/code>.
\n#21<\/strong> \u2013 assigning the region named \u201cbob-01? (this is the actual png name without extension \u2013 see TexturePacker2) to the bobIdleLeft<\/code> variable.
\n#22 \u2013 #23<\/strong> \u2013 creating a new TextureRegion<\/code> (note the use of copy constructor, we need a copy, not a reference) and flipping it on the X axis so we have the same image but mirrored for Bob\u2019s idle state but when facing right. The flipping is very useful as we don\u2019t need to load an extra image, we create one from an existing one.
\n#24<\/strong> \u2013 assign the corresponding region to the block
\n#25 \u2013 #28<\/strong> \u2013 we create an array of TextureRegion<\/code>s that will make up the animation. We know that there are 5 frames and their names: bob-02, bob-03, bob-04, bob-05<\/code> and bob-06<\/code>. We use a for loop for convenience.
\n#29<\/strong> \u2013 This is where the animation for the walking left state is defined. The first parameter is the duration of each frame from the sequence expressed in seconds (0.06) and the second parameter takes the ordered list of frames making up the animation.
\n#31 \u2013 #38<\/strong> \u2013 Creating the animation for the walking right state. It is a copy of the animation for the walking left state but each frame is flipped. It is important to make a copy of the frames and not flipping them as the originals get flipped too.
\n#40<\/strong> \u2013 the changed drawBob()<\/code> method.
\n#42<\/strong> \u2013 setting the active frame to one of the idle frames depending on Bob\u2019s facing
\n#44<\/strong> \u2013 in case Bob is in a walking state, we extract the corresponding frame for one of the walking sequences based on Bob\u2019s current state time and assign it to bobFrame which will be drawn to the screen. Running the StarAssaultDesktop<\/code> application, we should see the Bob animation in action. It should look something like this:<\/p>\n