![\"runner\"](\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2015\/08\/runner.gif\")
<\/a>For example, if we want to show a running character, we should have a serie of images, each with a little advance over the previous image, so as when they are displayed them sequentially, we can see the character moving:<\/p>\n The class responsible of the management of frame by frame animations is This class needs these four elements to work:<\/p>\n Normally, in videogames, each character will have several animations which will be drawn depending of character’s state (walking, running, jumping, etc.). In order to make this example the most clear possible, I will not use states, and I am going to show only one element with one animation.<\/p>\n <\/p>\n For this example i’m going to use the file (charset.png<\/a>) which stores all the images that compose the animation:<\/p>\n This way, we can easily get all frames that compose the animation:<\/p>\n <\/p>\n Once we have loaded the images that compose the animation, we can build it. For this example we want to play it for ever, so we use the play mode <\/p>\n At the time to draw, the object <\/p>\n Combining all of the above, the class looks like this:<\/p>\n <\/p>\n <\/p>\n You can get the sample project from my GitHub repository<\/a>.<\/p>\n <\/p>\n Regards,<\/p>\n","protected":false},"excerpt":{"rendered":" Intoduction When we need to animate our game objects, one of the methods we have is the frame by frame animations. It’s the classic animation method, and consists on drawing a serie of images that, when they are showed in Seguir leyendo Frame by frame animations in LibGDX<\/span><\/a><\/p>\n
\n <\/p>\nFrame by frame animations in LibGDX<\/h1>\n
La Animation class<\/h2>\n
Animation<\/code>. Its work involves in calculate the frame that must rendered at each time, being us the responsibles of draw the result.<\/p>\n\n
Animation.PlayMode<\/code>. It tells to our Animation<\/code> object the order in which the frames must be rendered. The possible modes are:\n\n
NORMAL<\/code>: The frames are displayed from first to last. Without looping. So when the animation gets to the last frame, then always is returned the last frame.<\/li>\nREVERSED<\/code>: The frames are displayed from last to first. Without looping. So when the animation gets to the first frame, then always is returned the first frame.<\/li>\nLOOP<\/code>: The frames are displayed from first to last. With looping. So when the animation gets to the last frame, then starts again with the first one.<\/li>\nLOOP_REVERSED<\/code>: The frames are displayed from last to first. With looping. So when the animation gets to the first frame, then starts again with the last one.<\/li>\nLOOP_PINGPONG<\/code>: The frames are displayed from first to last. When it gets to the last one, it starts to draw from last to first, and then again from first to last, last to first, …, ping pong \ud83d\ude42<\/li>\nLOOP_RANDOM<\/code>: The frames are displayed randomly, without a defined order.<\/li>\n<\/ul>\n<\/li>\nAnimation<\/code>, and it return us the frame to draw depending on the elapsed time and the play mode.<\/li>\n<\/ul>\n
\n <\/p>\nExample<\/h2>\n
Images<\/h3>\n
<\/a>Also I will make the file charset.atlas<\/a>, knowing that each frame takes 80 pixels for width and 120 for height. In the atlas, I use the same name for all the frames, and I assign an index to each one of them. The file looks like this:<\/p>\ncharset.png\r\nformat: RGBA8888\r\nfilter: Linear,Linear\r\nrepeat: none\r\nrunning\r\n rotate: false\r\n xy: 0, 0\r\n size: 80, 120\r\n orig: 80, 120\r\n offset: 0, 0\r\n index: 0\r\nrunning\r\n rotate: false\r\n xy: 80, 0\r\n size: 80, 120\r\n orig: 80, 120\r\n offset: 0, 0\r\n index: 1\r\nrunning\r\n rotate: false\r\n xy: 160, 0\r\n size: 80, 120\r\n orig: 80, 120\r\n offset: 0, 0\r\n index: 2\r\n(continue ...)\r\n<\/pre>\n
public class GdxAnimationExample extends ApplicationAdapter {\r\n ...\r\n \/\/ Atlas with all the frames defined in \"charset.atlas\"\r\n private TextureAtlas charset;\r\n ...\r\n \r\n @Override\r\n public void create () {\r\n ...\r\n \/\/ Frames loading from \"charset.atlas\"\r\n charset = new TextureAtlas( Gdx.files.internal(\"charset.atlas\") );\r\n \r\n \/\/ Getting the images for \"running\" animation\r\n ArrayBuilding the animation<\/h3>\n
PlayMode.LOOP<\/code>:<\/p>\npublic class GdxAnimationExample extends ApplicationAdapter {\r\n ...\r\n \/\/ Time which each frame keeps on screen\r\n private static float FRAME_DURATION = .05f;\r\n\r\n \/\/ Running animation\r\n private Animation runningAnimation;\r\n ...\r\n \r\n @Override\r\n public void create () {\r\n ...\r\n \/\/ Building of the animation\r\n runningAnimation = new Animation(FRAME_DURATION, runningFrames, PlayMode.LOOP);\r\n ...\r\n }\r\n ...\r\n}\r\n<\/pre>\nDrawing each frame<\/h3>\n
runningAnimation<\/code> will return us the frame that we need to draw depending of the elapsed time. For this reason we have a local variable, elapsed_time<\/code>, where we store the elapsed time from de beginning of the animation:<\/p>\npublic class GdxAnimationExample extends ApplicationAdapter {\r\n ...\r\n \/\/ Frame that must be rendered at each time\r\n private TextureRegion currentFrame;\r\n\r\n \/\/ Elapsed time\r\n private float elapsed_time = 0f;\r\n\r\n \/\/ Auxiliar variables to know where to draw the picture to center it on the screen\r\n private float origin_x, origin_y;\r\n ...\r\n \r\n @Override\r\n public void render () {\r\n ...\r\n \/\/ Elapsed time\r\n elapsed_time += Gdx.graphics.getDeltaTime();\r\n \r\n \/\/ Getting the frame we must draw at this moment\r\n currentFrame = runningAnimation.getKeyFrame(elapsed_time);\r\n\r\n \/\/ Drawing on the screen\r\n batch.begin();\r\n batch.draw(currentFrame, origin_x, origin_y);\r\n batch.end();\r\n ...\r\n }\r\n ...\r\n}\r\n<\/pre>\nComplete example<\/h3>\n
\/**\r\n * Frame-by-frame animation example with LibGDX:\r\n * \r\n * http:\/\/www.pixnbgames.com\/blog\/libgdx\/frame-by-frame-animations-in-libgdx\/\r\n * \r\n * @author angel\r\n *\/\r\npublic class GdxAnimationExample extends ApplicationAdapter {\r\n \r\n \/\/ Time while each frame keeps on screen\r\n private static float FRAME_DURATION = .05f;\r\n \r\n \/\/ To draw on screen\r\n private SpriteBatch batch;\r\n \r\n \/\/ Atlas with the definition of the frames \"charset.atlas\"\r\n private TextureAtlas charset;\r\n \r\n \/\/ Frame that must be rendered at each time\r\n private TextureRegion currentFrame;\r\n \r\n \/\/ Running animation\r\n private Animation runningAnimation;\r\n \r\n \/\/ Elapsed time\r\n private float elapsed_time = 0f;\r\n \r\n \/\/ Auxiliar variables to know where to draw the picture to center it on the screen\r\n private float origin_x, origin_y;\r\n \r\n \r\n @Override\r\n public void create () {\r\n batch = new SpriteBatch();\r\n \r\n \/\/ Frames loading from \"charset.atlas\"\r\n charset = new TextureAtlas( Gdx.files.internal(\"charset.atlas\") );\r\n \r\n \/\/ Frames that compose the animation \"running\"\r\n ArraySource code<\/h2>\n