libGDX: Simple Frame Animation
4 likes4,685 views
The document discusses framerate independence in games using libGDX. It explains that using delta time ensures games run at the same speed regardless of framerate. It provides an example of moving an object at a constant speed of 1 pixel per frame by multiplying the object's speed by delta time. The document also covers creating and rendering animations in libGDX using the Animation class and TextureRegions. It provides tips on extending the Sprite class to create customized sprite objects and animate them by calling animate() each frame.
![Split
.png
into
TextureRegions
walkSheet = new Texture(Gdx.files.internal(”image.png"));
TextureRegion[][] tmp = TextureRegion.split(
walkSheet,
walkSheet.getWidth() / FRAME_COLS,
walkSheet.getHeight() / FRAME_ROWS );](https://image.slidesharecdn.com/libgdx-simple-animation-140911025622-phpapp02/85/libGDX-Simple-Frame-Animation-8-320.jpg)
![2D
array
-‐>
1D
private TextureRegion[] transformTo1D(TextureRegion[][] tmp) {
TextureRegion [] 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];
}
}
return walkFrames;
}](https://image.slidesharecdn.com/libgdx-simple-animation-140911025622-phpapp02/85/libGDX-Simple-Frame-Animation-9-320.jpg)
libGDX: Simple Frame Animation
- 1. libGDX: Simple Anima0on Jussi Pohjolainen Tampere University of Applied Sciences
- 3. Framerate Indepence • Games run at same speed no ma6er the framerate • In slow computers; 30 fps, fast computers 60 fps – No need to go over 60 fps.. • Example – Fast computer, 60 fps, move object 1 px at a =me – Slow computer, 30 fps, move object 2 px at a =me – => constant speed no maNer the framerate! • The key to framerate indepence is delta-‐'me – Time in seconds since the last 0ck (last render() call) • 100 fps => 1/100 => 0.01 dt
- 4. Moving Object • At 30 fps vs 60 fps this object will move at different speeds – int speedX = 1; – batch.draw(texture, x += speedX, 0); • This will move the object at constant speed regardless of fps – int speedX = 60; – batch.draw(texture, x += speedX * deltaTime, 0); • If fps 60, deltaTime 60/1 = 0.0166 secs – x += 60 * 0.016666, x += 1 • If fps 30, deltaTime 30/1 = 0.0333 secs – x += 60 * 0.033333, x += 2
- 5. libGDX, delta and fps • Querying FPS – Gdx.graphics.getFramesPerSecond() • Querying Delta – Gdx.graphics.getDeltaTime()
- 6. Anima0on • Use Anima0on class – Animation walkAnimation = new Animation(frameDuration, frames); • Frame dura0on? 1 / 60 fps • Frames? – TextureRegion array • TextureRegion? – Part of texture
- 8. Split .png into TextureRegions walkSheet = new Texture(Gdx.files.internal(”image.png")); TextureRegion[][] tmp = TextureRegion.split( walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS );
- 9. 2D array -‐> 1D private TextureRegion[] transformTo1D(TextureRegion[][] tmp) { TextureRegion [] 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]; } } return walkFrames; }
- 10. Rendering public void render() { // stateTime was initialized to 0.0f stateTime += Gdx.graphics.getDeltaTime(); // stateTime is used to calculate the next frame // frameDuration! currentFrame = walkAnimation.getKeyFrame(stateTime, true); spriteBatch.begin(); spriteBatch.draw(currentFrame, 150, 150); spriteBatch.end(); }
- 11. TIPS
- 12. Extend Sprites • For each Sprite in screen, create own class – class Monster extends Sprite • Add Monster aNributes like – speedX, speedY, sounds, … • If using anima0on (previous slides) you could create animate() method which is called from the game on every frame • When crea0ng the Sprite, remember to call also setRegion to set the ini0al region for the sprite