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 using the Animation class by splitting texture images into TextureRegions and cycling through the regions based on elapsed time.

1. libGDX:
Simple
Anima0on
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

2. FRAMERATE
INDEPENDENCE

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

7. TextureRegion

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