libGDX学习之路02：利用Tiled绘制游戏地图

简介

开始做游戏之后，我们免不了得先画一个游戏地图出来，可是这个地图怎么做呢。libGDX官方也给我们推荐了一个2D地图制作工具——Tiled

贴上官网

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

入门

下载完成后，我们首先打开官方为我们准备好的地图文件

文件 -> 打开文件或项目 ->  Tiled安装目录/examples -> desert.tsx 

然后用同样的方式打开 desert.tmx

TMX和TSX是Tiled独有的文件格式，.TMX是地图文件，.TSX是瓦片集

打开之后我们可以看到官方准备好的一张沙漠地图和沙漠素材集

界面

首先我们来介绍一下这个界面有些什么信息

①界面右下角可以看到地形集和图块集，我们在这里可以选择相应的素材，选中之后放到地图上

②界面右上角工作栏可以选择查看迷你地图、对象或是图层。

• 迷你地图层可以用来查看并快速拖拽到地图上的任意一个角落 
• 对象层主要放一些NPC、宝箱、主角、金币等，可以让对象移动、显示或是隐藏
• 图层这个用过PS的朋友们应该很熟悉了，越是在上级的图层优先级就越高，简单来说就是上层的图片会把下层的图片遮挡，一般用于放置不会移动的图像

③这里是工具栏，左边部分主要是文件操作，新建、打开、保存等，中间部分是可以用在素材上的操作，默认工具是图章刷，往后是地形刷、填充、形状填充、橡皮擦等等工具

④这里可以看到当前地图的属性，宽度和高度是代表整张地图有多少个格子，图块宽度和图块高度是每一个格子的宽度和长度，地图的长度就是(40*32)*(40*32)=1280*1280

新建一张地图

文件 -> 创建新地图

在这我们可以根据自己的需求确定地图的大小

 地图的基本分类  
1.正常（俯视图或者说是平视图）可以用于RPG游戏地图，也可考虑用于类似超级玛丽一样的横版过关游戏。 
2.45度（地图顺时针旋转45度）可用于RPG游戏地图，也可以考虑战棋类游戏 
3.45度交错（地图呈现为四边形边界位置使用1/2的三角形地图块呈现） 
4.六角形交错（Hexagonal Staggered）展现方式类似于45度交错地图

此外在创建地图的时候还有2个重要的参数 
图层保存格式：XML、Base64（无压缩、gzip、zlib）、CSV 
地图坐标方向：默认是Right Down（右下）也就是说左上角为顶点向右为X轴，向下为Y轴

点击OK之后我们就创建好了一张新的地图，左键选中沙漠地块，左键点击填充，左键点击空白地图，我们就把地基铺好了 

 

 然后根据自己的需要添加一些素材

 做好地图之后，按下保存会提示你把地图文件保存到某个位置，然后就可以在项目中使用这张地图了！

项目中使用地图

新建一个libGDX项目，把地图资源放入assets中，包含tmx和tsx还有图片格式的文件

 建议这里打开.tmx和.tsx文件，把<image source>中的图片路径改为相对路径

"tmw_desert_spacing.png"，否则会提示文件未找到错误File not found

然后就可以在core的游戏类中载入地图了

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;//地图
	private TmxMapLoader mapLoader;//地图加载器
	private OrthographicCamera camera;//相机
	private OrthogonalTiledMapRenderer renderer;//相机渲染
@Override
	public void create() {
		//加载地图
		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();
	}
}

在桌面入口类设置窗口大小

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

设置完成后点击运行，地图就显示出来啦！