Libgdx learning road 02: draw game map with tiled

brief introduction

After playing the game , We have to draw a game map first , But how to make this map .libGDX The official also recommended one to us 2D Map making tools ——Tiled

Post on the official website

Tiled | Flexible level editorFlexible level editorhttps://www.mapeditor.org/

introduction

When the download is complete , We first open the map file prepared by the official for us

file -> Open a file or project ->  Tiled The installation directory /examples -> desert.tsx 

Then open it in the same way desert.tmx

TMX and TSX yes Tiled Unique file format ,.TMX It's a map file ,.TSX It's a collection of tiles

After opening, we can see a desert map and desert material collection prepared by the official

Interface

First of all, let's introduce the information in this interface

① Terrain set and block set can be seen in the lower right corner of the interface , Here we can choose the corresponding material , Select it and put it on the map

② You can choose to view the mini map in the work bar in the upper right corner of the interface 、 Object or layer .

• The mini map layer can be used to view and quickly drag to any corner of the map  
• The object layer mainly puts some NPC、 Treasure chest 、 Lead 、 Gold coins, etc. , You can make objects move 、 Show or hide
• This layer has been used PS My friends should be familiar with , The higher the priority of the upper layer , Simply put, the pictures on the upper layer will block the pictures on the lower layer , It is generally used to place images that will not move

③ Here is the toolbar , The left part is mainly about file operation , newly build 、 open 、 Save, etc , The middle part is the operation that can be used on the material , The default tool is stamp brush , Next is the terrain brush 、 fill 、 Shape filling 、 Eraser and other tools

④ Here you can see the properties of the current map , Width and height represent how many grids there are in the whole map , Block width and block height are the width and length of each grid , The length of the map is (40*32)*(40*32)=1280*1280

Create a new map

file -> Create a new map

Here we can determine the size of the map according to our own needs

  Basic classification of maps  
1. normal （ Top view or top view ） It can be used for RPG Game map , It can also be used in the horizontal version of the game like super Mary . 
2.45 degree （ The map rotates clockwise 45 degree ） Can be used for RPG Game map , You can also consider playing chess games  
3.45 Degree interleaving （ The map is rendered as a quadrilateral boundary location using 1/2 The triangular map block of ） 
4. Hexagonal staggered （Hexagonal Staggered） The presentation is similar to 45 Degree staggered map

In addition, when creating maps, there are 2 An important parameter  
Layer save format ：XML、Base64（ No compression 、gzip、zlib）、CSV 
Map coordinate direction ： The default is Right Down（ The lower right ） That is to say, the top left corner is the vertex and the right corner is X Axis , Down is Y Axis

Click on OK Then we created a new map , Left click to select desert land , Left click fill , Left click on the blank map , We will lay the foundation  

 

  Then add some materials according to your own needs

  After making the map , Pressing save will prompt you to save the map file to a certain location , Then you can use this map in the project ！

Use maps in the project

Create a new one libGDX project , Put map resources into assets in , contain tmx and tsx There are also picture format files

  It is suggested to open here .tmx and .tsx file , hold <image source> Change the image path in to a relative path

"tmw_desert_spacing.png", Otherwise, you will be prompted that the file is not found File not found

And then you can do it in core Map is loaded into the game class of

package com.tdsss.game;

import com.badlogic.gdx.ApplicationAdapter;
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;
import com.badlogic.gdx.utils.ScreenUtils;

public class demo4 extends ApplicationAdapter{

	private TiledMap map;// Map 
	private TmxMapLoader mapLoader;// Map Loader 
	private OrthographicCamera camera;// The camera 
	private OrthogonalTiledMapRenderer renderer;// Camera rendering 
@Override
	public void create() {
		// Loading the map 
		mapLoader = new TmxMapLoader();
		map = mapLoader.load("map/desertdemo.tmx");
		renderer = new OrthogonalTiledMapRenderer(map,1f);
		camera = new OrthographicCamera();
		camera.setToOrtho(false,1280,1280);
		camera.update();
	}
	@Override
	public void render() {
		ScreenUtils.clear(225f,225f,225f,0.4f);
		renderer.setView(camera);
		renderer.render();
	}
}

Set the window size in the desktop entry class

package com.tdsss.game;

import com.badlogic.gdx.backends.lwjgl3.Lwjgl3Application;
import com.badlogic.gdx.backends.lwjgl3.Lwjgl3ApplicationConfiguration;

// Please note that on macOS your application needs to be started with the -XstartOnFirstThread JVM argument
public class DesktopLauncher {
	public static void main (String[] arg) {
		Lwjgl3ApplicationConfiguration config = new Lwjgl3ApplicationConfiguration();
		config.setWindowedMode(1280,920);
		config.setForegroundFPS(60);
		config.setTitle("demo4");
		new Lwjgl3Application(new demo4(), config);
	}
}

After setting, click Run , The map is displayed ！