Libgdx – Camera & Tilemap

In fact, almost every game requires background. For simple games often we chose a static image. However, more often is used a moving image following the player. There are many softwares for creating game background but for me well suited program is Tiled Map Editor.

Tiled Map Editor is a popular solution for creating levels in 2D using the TMX format and is available at https://www.mapeditor.org
Usage of the program itself is intuitive. Let’s create a new document, we can here choose type of map (Isometric, Ortagonal, Hexagonal) and the number of tiles and their size. We will continue to create classic top down shooter so let’s choose an orientation Ortagonal.

In order to create our maps we need the right set of tiles (Tileset) personally I used this one httpss: //vxresource.files.wordpress.com/2010/03/tilea2.png Choose map → new set of tiles and the source image. The editor itself is very simple, we select our tiles and draw them to the screen. For the purposes of this tutorial I created map as bellow, but certainly you are able to create something better


map.tmx

Let’s now see the source code, before we animate our background it is worth to mention here about the camera. Camera allows us to easily manage active view if our board consists of more than one segment. Its very simplest implementation is as follows:

public class MyGdxGame extends ApplicationAdapter {
	
	private OrthographicCamera camera;
	  private SpriteBatch batch;

	    private Sprite imageSprite;
	
	    @Override
	    public void create () {
	    	
	    	imageSprite = new Sprite(new Texture(Gdx.files.internal("bord.jpg")));
	        imageSprite.setSize(236, 270);   	
	    	
	    	camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
	    	camera.position.set(camera.viewportWidth / 2f, camera.viewportHeight / 2f, 0);
	    	 batch = new SpriteBatch();
	    
	    }

	    @Override
	    public void render () {
	    	camera.update();
	    	batch.setProjectionMatrix(camera.combined);

	        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

	        batch.begin();
	        imageSprite.draw(batch);
	        batch.end();
	    }
}

OrthographicCamera accepts two parameters height and width which specifies the width and height of our view. It is very convenient when working with different screen resolutions because we can specify the size of camera and its contents will be appropriately scaled by the library. camera.position allows us to determine the position of the middle of our camera. When rendering a view we constantly update our camera and inform our sprite batch about it and how should be image display by a method setProjectionMatrix (camera.combined).

Let’s go back to our background saved using Tiles software. File .tcx put to folders assets with tileset image. Let’s create two classes, one of them will be Background class and the second MyGdxGame which are as follows:

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.maps.tiled.TiledMap;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;

public class Background {
	private TiledMap map; 
	private OrthogonalTiledMapRenderer renderer;
	private float scale;
	
	public Background() {

		scale = Gdx.graphics.getWidth()/1280f;
		map = new TmxMapLoader().load("map.tmx");
		renderer = new OrthogonalTiledMapRenderer(map,scale);
	}

	public void update() {
	}

	public void render(OrthographicCamera camera) {
		renderer.setView(camera);
		renderer.render();
	}

	public void dispose() {
		map.dispose();
		renderer.dispose();
	}

	public TiledMap getMap() {
		return map;
	}

	public void setMap(TiledMap map) {
		this.map = map;
	}

	public OrthogonalTiledMapRenderer getRenderer() {
		return renderer;
	}

	public void setRenderer(OrthogonalTiledMapRenderer renderer) {
		this.renderer = renderer;
	}

}

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;

public class MyGdxGame extends ApplicationAdapter {
	
	private OrthographicCamera camera;
	private Background background;
	
	    @Override
	    public void create () {
	    	camera = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
	    	background = new Background();
	    	camera.position.set(camera.viewportWidth / 2f, camera.viewportHeight / 2f, 0);
	    }

	    @Override
	    public void render () {
	    	Gdx.gl.glClearColor(1, 0, 0, 1);
	        Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
	        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
	        
	        camera.update();
	    	background.render(camera);
	    	camera.translate(0, 25 * Gdx.graphics.getDeltaTime(), 0);
	    }
}

In the class Background we create three variables. scale used to scale the map (1280 is the width of our map), the object that holds our map and OrthogonalTiledMapRenderer which is responsible for drawing our map. Presented code is quite simple in function renderer we choose camera on which will be drawn image and make the rendering.

In class MyGdxGame like before creating the object of the camera and has recently written a class background. The method render add camera.translate method which allows you to move the camera along the x, y, z. If you’re wondering what method is used Gdx.graphics.getDeltaTime () is a method that returns the time elapsed since the last generated image. In the case of high-speed devices, our image would move faster and slower for the slower. By multiplying our value parameter deltaTime can cause that the speed will be the same on different devices. Finally, the result should be as follows (If you have a view horizontal see if the android manifesto or android: screenOrientation we have set to “portrait”).