day 10 – tilemapsTag 10 – Tilemaps

veröffentlicht am: 10. Dezember 2012

To create tilemaps we first need to install the Tiled Map Editor: http://www.mapeditor.org/
(when you have linux you may have to compile it yourself. everything you need to know is in the README file)
Um Tilemaps zu erstellen installieren wir als erstes den Tiled Map Editor: http://www.mapeditor.org/
(unter Linux dürfen wir nun selber kompilieren, alles wichtige dazu steht in der entsprechenden README)

After we start the program, we create a new map via File > New. Here we have to specify the size of the map and the size of the tiles.

Now we need tiles, that our map consists of. I downloaded this tileset and put it into a new subfolder maps of my stuff folder.
In Tiled we now click Map > New Tileset and select our tilesetfile to be the tileset.


In the right collumn we can see the layers and the tiles.
We create a layer for objects and one layer for the ground and then create a nice little map. To draw a tile, just select the layer and the tile and then click into the left part of the screen on the fitting place.

Then we save our map as a .tmx file into the stuff/maps folder where our tileset-Image is.

As for textures there is a map-packer in libgdx:

java -classpath [path tol ibgdx]/gdx.jar:[path to libgdx]/extensions/gdx-tools.jar:[path to libgdx]/extensions/gdx-tiled-preprocessor.jar com.badlogic.gdx.tiledmappacker.TiledMapPacker [path to stuff]/maps [path to testgame-android]/assets/maps 

If the map is packed in our assets-folder, it’s really easy to draw it:

TiledMap map;
TileAtlas atlas;
TileMapRenderer tileMapRenderer;
OrthographicCamera camera;
public IngameScreen(){
	// load tilemap
	map = TiledLoader.createMap(Gdx.files.internal("maps/testmap.tmx"));
	atlas = new TileAtlas(map, Gdx.files.internal("maps"));
	tileMapRenderer = new TileMapRenderer(map, atlas, 8, 8); // handles rendering the tile map. 8x8 is the chunk size to preload
	camera=new OrthographicCamera(800,480);
}

@Override
public void render(float delta) {
	Gdx.gl.glClearColor(1,1,1, 1);

	// move map
	if(Gdx.input.isKeyPressed(Keys.LEFT)){
		camera.position.x=camera.position.x-Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.RIGHT)){
		camera.position.x=camera.position.x+Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.DOWN)){
		camera.position.y=camera.position.y-Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.UP)){
		camera.position.y=camera.position.y+Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.PLUS)){
		camera.zoom-=Gdx.graphics.getDeltaTime();
	}
	if(Gdx.input.isKeyPressed(Keys.MINUS)){
		camera.zoom+=Gdx.graphics.getDeltaTime();
	}		
	camera.update();

	Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
	// render map
	tileMapRenderer.render(camera);	
}


Seems pretty easy to me. If you though got problems, write a comment.

Wenn wir das Programm starten, erstellen wir mit File > New eine neue Karte. Hier müssen wir die Größe der Karte und die Größe der einzelnen Kacheln (tiles) angeben.

Nun brauchen wir aber noch Tiles, aus denen unsere Map besteht. Ich habe mir dieses Tileset runtergeladen und in einen neuen Unterordner maps von meinem stuff Ordner getan.
In Tiled klicken wir nun Map > New Tileset und wählen unsere Datei aus.

In der rechten Spalte haben wir nun die Ebenen(Layer) und die Tiles.
Wir erstellen einen Layer für objekte und einen layer für den Boden und basteln uns dann eine nette Map. Man wählt zum malen einfach die entsprechende Ebene und das Tile, das man malen will aus und drückt dann im linken Teil auf die richtige Stelle.

Dann speichern wir unsere Map als .tmx Datei in den stuff/maps Ordner.

Wie für Texturen gibt es auch einen speziellen Map-Packer:

java -classpath [path tol ibgdx]/gdx.jar:[path to libgdx]/extensions/gdx-tools.jar:[path to libgdx]/extensions/gdx-tiled-preprocessor.jar com.badlogic.gdx.tiledmappacker.TiledMapPacker maps [path to testgame-android]/assets/maps

Wenn die Map sich nun gepackt in unseren assets befinden, können wir sie ganz einfach malen:

TiledMap map;
TileAtlas atlas;
TileMapRenderer tileMapRenderer;
OrthographicCamera camera;
public IngameScreen(){
	// load tilemap
	map = TiledLoader.createMap(Gdx.files.internal("maps/testmap.tmx"));
	atlas = new TileAtlas(map, Gdx.files.internal("maps"));
	tileMapRenderer = new TileMapRenderer(map, atlas, 8, 8);
	camera=new OrthographicCamera(800,480);
}

@Override
public void render(float delta) {
	Gdx.gl.glClearColor(1,1,1, 1);
	
	// move map
	if(Gdx.input.isKeyPressed(Keys.LEFT)){
		camera.position.x=camera.position.x-Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.RIGHT)){
		camera.position.x=camera.position.x+Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.DOWN)){
		camera.position.y=camera.position.y-Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.UP)){
		camera.position.y=camera.position.y+Gdx.graphics.getDeltaTime()*300;
	}
	if(Gdx.input.isKeyPressed(Keys.PLUS)){
		camera.zoom-=Gdx.graphics.getDeltaTime();
	}
	if(Gdx.input.isKeyPressed(Keys.MINUS)){
		camera.zoom+=Gdx.graphics.getDeltaTime();
	}		
	camera.update();
	
	
	Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
	// render map
	tileMapRenderer.render(camera);	
}


Sollte eigentlich alles ziemlich selbstverständlich sein. Falls noch Fragen bestehen, schreib sie in die Kommentare.

geposted in libgdx

4 Antworten zu “day 10 – tilemapsTag 10 – Tilemaps

  1. M sagt:

    When I try to run the texture packer I got the following. Any clues?
    Exception in thread „main“ java.lang.NoClassDefFoundError: 4
    Caused by: java.lang.ClassNotFoundException: 4
    at java.net.URLClassLoader$1.run(Unknown Source)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    Could not find the main class: 4. Program will exit.

    • dem n00bz sagt:

      Der TiledMapPacker will nicht laufen. Egal was ich mache, ich erhalte nur folgende Meldung:

      Exception in thread „main“ java.lang.NoClassDefFoundError: com/badlogic/gdx/tiledmappacker/TiledMapPacker
      Caused by: java.lang.ClassNotFoundException: com.badlogic.gdx.tiledmappacker.TiledMapPacker
      at java.net.URLClassLoader$1.run(URLClassLoader.java:217)
      at java.security.AccessController.doPrivileged(Native Method)
      at java.net.URLClassLoader.findClass(URLClassLoader.java:205)
      at java.lang.ClassLoader.loadClass(ClassLoader.java:321)
      at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:294)
      at java.lang.ClassLoader.loadClass(ClassLoader.java:266)
      Could not find the main class: com.badlogic.gdx.tiledmappacker.TiledMapPacker. Program will exit.

      • dem n00bz sagt:

        Looool
        I know what’s wrong:
        It’s not extensions/gdx-tools.jar, the jar is in another folder with the same name!
        The full command looks like this for me:

        java -classpath /home/marcel/Downloads/libgdx-0.9.8/gdx.jar:/home/marcel/Downloads/libgdx-0.9.8/extensions/gdx-tools/gdx-tools.jar:/home/marcel/Downloads/libgdx-0.9.8/extensions/gdx-tiled-preprocessor/gdx-tiled-preprocessor.jar com.badlogic.gdx.tiledmappacker.TiledMapPacker $1 $2

        • dem n00bz sagt:

          The only problem i encounter now is that it doesnt render anything. I dont get any error messages, everything seems to work. But the screen stays black :( src is the same

Hinterlasse eine Antwort