libGDX: Tiled Maps

1. libGDX:
Tiled
Maps
Jussi
Pohjolainen
Tampere
University
of
Applied
Sciences

2. CREATING
TILED
MAPS

3. Tiled
Maps

4. Tiled
Editor:
Tiled
• EdiBng
tools
for
stamp,
fill
and
terrain
brushes
• Rectangle,
ellipse,
polygon
and
image
objects
can
be
placed
• Support
for
orthogonal,
isometric
and
staggered
maps
• Download:
http://www.mapeditor.org/

5. Isometric
(3D
effect)

6. Isometric
vs
Isometric
staggered

7. Create
Blesheet
png

8. CreaBng
new
Map

9. Layers
• Your
world
may
contain
layers
• You
can
disable
and
enable
layers
during
runBme
• You
can
add
object
layers
for
easy
collision
detec@on

10. USING
MAPS

11. Loading
Map
• To
load
a
map
– TiledMap tiledMap = tiledMap = new
TmxMapLoader().load("runner.tmx");
• To
render
a
map,
use
TiledMapRenderer
– TiledMapRenderer tiledMapRenderer = new
OrthogonalTiledMapRenderer(tiledMap);

12. Render
and
Camera
@Override
public void render () {
batch.setProjectionMatrix(camera.combined);
// Sets the projection matrix and viewbounds from the given
// camera. If the camera changes, you have to call this method
// again. The viewbounds are taken from the camera's
// position and viewport size as well as the scale.
tiledMapRenderer.setView(camera);
// Render all layers to screen.
tiledMapRenderer.render();
}

13. MOVE
CAMERA

14. Render
and
Camera
@Override
public void render () {
batch.setProjectionMatrix(camera.combined);
// move camera (YOU HAVE TO IMPLEMENT THIS)
moveCamera();
// Update camera movement
camera.update();
// Which part of the map are we looking? Use camera's viewport
tiledMapRenderer.setView(camera);
// Render all layers to screen.
tiledMapRenderer.render();
}

15. moveCamera()
public void moveCamera() {
// Lot of possibilities.
// 1) Just move the camera to some direction:
camera.translate(1,0); // moves x++
// 2) Move to certain point
camera.position.x = 200;
// 3) Move to direction of some sprite
camera.position.x = player.getX();
}

16. COLLISION
DETECTION

17. Collision
Checking
/**
* Checks if player has collided with collectable
*/
private void checkCollisions() {
// Let's get the collectable rectangles layer
MapLayer collisionObjectLayer = (MapLayer)tiledMap.getLayers().get("collectable-rectangles");
// All the rectangles of the layer
MapObjects mapObjects = collisionObjectLayer.getObjects();
// Cast it to RectangleObjects array
Array<RectangleMapObject> rectangleObjects = mapObjects.getByType(RectangleMapObject.class);
// Iterate all the rectangles
for (RectangleMapObject rectangleObject : rectangleObjects) {
Rectangle rectangle = rectangleObject.getRectangle();
if (playerSprite.getBoundingRectangle().overlaps(rectangle)) {
clearCollectable();
}
}
}

18. MOVING
OBJECT

19. 0,0
32px
32px

20. 32,32

21. 32,32
1.
Arrow
key
right
pressed
2.
Movement
x
=
x
+
5

22. 37,32
1.
Arrow
key
right
pressed
2.
Movement
x
=
x
+
5
3.
Crash!

23. 37,32
if
x
=
x
+
5
does
not
collide
with
background
Does
37,32
collide?

24. 37,32
We
need
to
check
each
corner!
69,32
!!
69,64
37,64

25. 37,32
Check
if
the
next
frame
collides
with
bg.
If
not,
move
to
next
frame
69,32
!!
69,64
37,64

26. 37,32
if(Gdx.input.isKeyPressed(Input.Keys.RIGHT)
&&
!upRightCollision
&&
!downRightCollision)
{
//
try
to
move
player
to
right
//
this
is
NOT
done,
since
//
!downRightCollision
is
false!
playerSprite.translateX(-­‐1
*
moveAmount);
}
69,32
!!
69,64
37,64

27. ConverBng
Sprite
posiBon
to
Tiled
Map
index
32px
32px
250,120
0
1
2
3
4
5
6
7
8
9
8
7
6
5
4
3
2
1
0

28. ConverBng
Sprite
posiBon
to
Tiled
Map
index
32px
32px
250
/
32
=
7.8
-­‐>
7
120
/
32
=
3.8
-­‐>
3
0
1
2
3
4
5
6
7
8
9
8
7
6
5
4
3
2
1
0

29. isFree
-­‐
method
private boolean isFree(float x, float y) {
// Calculate coordinates to tile coordinates
// example, (34,34) => (1,1)
int indexX = (int) x / TILE_WIDTH;
int indexY = (int) y / TILE_HEIGHT;
TiledMapTileLayer wallCells = (TiledMapTileLayer)
tiledMap.getLayers().get("wall-layer");
// Is the coordinate / cell free?
if(wallCells.getCell(indexX, indexY) != null) {
// There was a cell, it's not free
return false;
} else {
// There was no cell, it's free
return true;
}
}

30. Checking
all
Corners
upleft = isFree(leftXPos, upYPos); // true
downleft = isFree(leftXPos, downYPos); // true
upright = isFree(rightXPos, upYPos); // true
downright = isFree(rightXPos, downYPos); // false

31. 37,32
if(Gdx.input.isKeyPressed(Input.Keys.RIGHT)
&&
!upRightCollision
&&
!downRightCollision)
{
//
try
to
move
player
to
right
//
this
is
NOT
done,
since
//
!downRightCollision
is
false!
playerSprite.translateX(-­‐1
*
moveAmount);
}
69,32
!!
69,64
37,64

32. getMyCorners
public void getMyCorners(float pX, float pY) {
// calculate all the corners of the sprite
float downYPos = pY;
float upYPos = playerSprite.getHeight() + downYPos;
float leftXPos = pX;
float rightXPos = playerSprite.getWidth() + leftXPos;
// update the attributes
upleft = isFree(leftXPos, upYPos);
downleft = isFree(leftXPos, downYPos);
upright = isFree(rightXPos, upYPos);
downright = isFree(rightXPos, downYPos);
}

33. movePlayer
private void movePlayer(float delta) {
// moveAmount
float moveAmount = SPEED * delta;
// Is there Room in left? THIS
// modifies the upleft, downleft, upright and upleft attributes!
getMyCorners(playerSprite.getX() + -1 * moveAmount,
playerSprite.getY());
// Move left IF there is room!
if(Gdx.input.isKeyPressed(Input.Keys.LEFT) &&
playerSprite.getX() > TILE_WIDTH &&
upleft && downleft) {
playerSprite.translateX(-1 * moveAmount);
}
...