libgdx: tiled maps
TRANSCRIPT
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); }
...