游戏开发笔记 - 地图编辑器

2023-01-30

全文 ≈ 981字 | 预计阅读时长 4分钟

之前在学习数据结构与算法 - AStar(A*)等寻路算法的过程中提到过网格地图时由类似0是可移动节点、1是障碍节点的网格组成的一张地图，这些地图信息是怎样生成出来的呢？

引言

地图编辑器是一种所见即所得的游戏地图制作工具，它辅助设计和输出地图数据，包括创建、编辑、存储和管理游戏地图数据。

如何生成地图数据

只考虑 2D 地图，一般来说有两种方式：

PhotoShop
打开原始地图文件，按照网格大小进行标注类型
地图编辑器
2D 游戏有很多成熟的编辑器，比如：tiled editor，但本着“造轮子”的原则就是开发一套啦！

地图编辑器使用什么技术来开发，选择也很多样性。

考虑学习成本问题，这里使用 Cocos Creator + Typescript 来开发一套简易的地图编辑器。

实现步骤

加载贴图文件
根据指定网格大小进行划分网格
可以对网格填充不同的颜色（可行走、不可行走）
导出结果

地图编辑器是游戏开发中最入门的部分，简单粗暴！

加载贴图文件

创建一个用于显示地图的Sprite节点。

const { ccclass, property } = cc._decorator;

@ccclass
export default class main extends cc.Component {
	// 地图贴图节点
	@property(cc.Node)
	mapNode: cc.Node = null;

	start() {}

	onLoad() {
		// init logic
		cc.resources.load("textures/4006", cc.SpriteFrame, (err, frame: cc.SpriteFrame) => {
			if (err) {
				console.error(err.message || err);
				return;
			}
			this.mapNode.getComponent(cc.Sprite).spriteFrame = frame;
		});
	}
}

划分网格

在 Sprite 节点下创建一个绘图子节点Graphics。

// 绘图节点
@property(cc.Graphics)
mapGraphics: cc.Graphics = null;

// 地图原始尺寸
originWidth: number = 2862;
originHeight: number = 2304;

// 网格大小
gridWidth: number = 20;
gridHeight: number = 20;

之后在Graphics节点进行绘制。

this.mapGraphics.clear(); // 清除所有绘制
this.mapGraphics.strokeColor = cc.Color.RED; // 红色
this.mapGraphics.lineWidth = 1; // 线宽度
// 画竖线
let xMax: number = Math.floor(this.mapNode.width / this.gridWidth);
// console.log("xMax = width / gridWidth", xMax, this.mapNode.width, this.gridWidth)
for (let i: number = 0; i < xMax; i++) {
	let x = i * this.gridWidth;
	this.mapGraphics.moveTo(x, 0);
	this.mapGraphics.lineTo(x, this.mapNode.height);
}
// 画横线
let yMax: number = Math.floor(this.mapNode.height / this.gridHeight);
// console.log("yMax = height / gridHeight", yMax, this.mapNode.height, this.gridHeight)
for (let i: number = 0; i < yMax; i++) {
	let y = i * this.gridHeight;
	this.mapGraphics.moveTo(0, y);
	this.mapGraphics.lineTo(this.mapNode.width, y);
}
this.mapGraphics.stroke();

填充颜色

监听触屏事件TOUCH_START、TOUCH_MOVE。

1
2
3

// mouse event
this.mapNode.on(cc.Node.EventType.TOUCH_START, this.updateGrid, this);
this.mapNode.on(cc.Node.EventType.TOUCH_MOVE, this.updateGrid, this);

事件触发，给鼠标所在坐标的网格填充颜色。这里需要注意的小知识点坐标系的转换，可分为：世界坐标、本地坐标、像素坐标。

const eventPos: cc.Vec2 = event.getLocation();
let pos = this.mapNode.convertToNodeSpaceAR(eventPos); // 转换至节点坐标
let x: number = Math.floor(pos.x / this.gridWidth);
let y: number = Math.floor(pos.y / this.gridHeight);
this.mapGraphics.rect(x * this.gridWidth, y * this.gridHeight, this.gridWidth, this.gridHeight);
this.mapGraphics.fillColor = cc.Color.BLUE;
this.mapGraphics.fill();

导出结果

导出结果逻辑很简单，需要在填充颜色时记录对应网格的类型，最后输出到文件。

生成 x*y 个网。

1 2	// 网格信息 grids: Array<Array<number>>;

记录网格信息。

// 记录格子信息
this.grids = new Array(xMax);
for (let i: number = 0; i < xMax; i++) {
	this.grids[i] = new Array(yMax);
	for (let j: number = 0; j < yMax; j++) {
		this.grids[i][j] = 1; // 默认不可行走
	}
}

输出到文件

const v: object = {
	map: {
		originWidth: this.originWidth,
		originHeight: this.originHeight,
		width: this.mapNode.width,
		height: this.mapNode.height,
	},
	grid: {
		width: this.gridWidth,
		height: this.gridHeight,
	},
	data: this.grids,
};
if (cc.sys.isBrowser) {
	let json = JSON.stringify(v);
	let blob = new Blob([json], { type: "application/json" });
	let aLink = document.createElement("a");
	aLink.download = "map.json";
	if (window.webkitURL != null) {
		aLink.href = window.webkitURL.createObjectURL(blob);
	}
	aLink.click();
} else {
	console.error("导出仅支持浏览器");
}

最后

附上完整代码：map-editor