libGDX:
Simple
Anima0on
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

FRAMERATE
INDEPENDENCE

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

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

libGDX,
delta
and
fps
• Querying
FPS
– Gdx.graphics.getFramesPerSecond()
• Querying
Delta
– Gdx.graphics.getDeltaTime()

Anima0on
• Use
Anima0on
class
– Animation walkAnimation = new
Animation(frameDuration, frames);
• Frame
dura0on?
1
/
60
fps
• Frames?
– TextureRegion
array
• TextureRegion?
– Part
of
texture

TextureRegion

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 );

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;
}

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();
}

TIPS

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