libGDX:  Tiled  Maps  

Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  

CREATING  TILED  MAPS    

Tiled  Maps  

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/

Isometric  (3D  effect)  

Isometric  vs  Isometric  staggered  

Create  Blesheet  png  

CreaBng  new  Map  

Layers  

•  Your  world  may  contain  layers  •  You  can  disable  and  enable  layers  during  runBme  

•  You  can  add  object  layers  for  easy  collision  detec@on  

USING  MAPS  

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

Render  and  Camera  @Overridepublic 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();}

MOVE  CAMERA  

Render  and  Camera  @Overridepublic 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();

}

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

COLLISION  DETECTION  

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

MOVING  OBJECT  

0,0  

32px  

32px  

32,32  

32,32  

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

37,32  

1.  Arrow  key  right  pressed  2.  Movement  x  =  x  +  5  3.  Crash!  

37,32  

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

37,32  

We  need  to  check  each  corner!  

69,32  !!  

69,64  37,64  

37,32  

Check  if  the  next  frame  collides  with  bg.  If  not,  move  to  next  frame  

69,32  !!  

69,64  37,64  

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  

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  

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  

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

Checking  all  Corners  upleft = isFree(leftXPos, upYPos); // truedownleft = isFree(leftXPos, downYPos); // trueupright = isFree(rightXPos, upYPos); // true downright = isFree(rightXPos, downYPos); // false

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  

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

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

...