【Godot4.2】2D导航04 - TileMap导航的逻辑

基于NavigationRegion2D

我们基于NavigationRegion2D的逻辑一文的场景结构，但是将NavigationRegion2D删除，更改为TileMap节点。

为TileMap创建Tileset，并创建一个导航层。在TileSet面板中，为草地和黄色泥土地面图块绘制可通行区域（整个矩形）。这样做的含义是只有这连个图块允许通行，其余图块全是障碍物。

切换至TileMap面板，利用矩形和直线绘制方式绘制一个简单的有出口的地图。

运行场景，会发现基于NavigationAgent2D的导航在TileMap上依旧是可行的。
## 基于AStarGrid2D
可以看出基于NavigationRegion2D的导航总还是有些不尽如人意的地方，偶尔就卡在了半路上。
AStarGrid2D本身基于网格，那么它与TileMap组合可以说是“天作之合”。
删除Player的NavigationRegion2D以及脚本。

查看icon.svg可以发现其图片大小为128×128，而我们的tileset的cell_size为16×16，所以为了将玩家显示在一个网格里，我们需要将icon.svg缩放为16×16。
128/16=8，所以我们需要将其设为原来的1/8，也就是缩小到原来的0.125倍。相应调整碰撞形状的大小。

移动玩家到某个单元格内。

将world2的脚本改成如下：

# world2.gd
extends Node2D

@onready var player = $Player
@onready var tile_map = $TileMap
var astar_grid = AStarGrid2D.new()
var move_speed = 200.0
var path:PackedVector2Array
var solids:PackedVector2Array

func _ready():
	# 获取tile_map包含所有已绘制图块的矩形
	var rect = tile_map.get_used_rect()
	# 构建AStarGrid2D
	astar_grid.size = rect.size
	astar_grid.cell_size = tile_map.tile_set.tile_size
	astar_grid.offset = astar_grid.cell_size/2
	astar_grid.update()
	# 获取所有已经绘制的图块的数组
	var cells = tile_map.get_used_cells(0)
	for cell in cells:
    	# TileData包含图块的信息
		var data:TileData = tile_map.get_cell_tile_data(0,cell)
		if !data.get_navigation_polygon(0): # 如果图块没有设置导航
			solids.append(cell)
			astar_grid.set_point_solid(cell,true) # 设为障碍物

# 左键点击，获取导航目标位置
func _input(event):
	if event is InputEventMouseButton:
		if event.button_index == MOUSE_BUTTON_LEFT and event.is_pressed():
			# TileMap的local_to_map()用于将屏幕坐标转化为TileMap的网格坐标
			var p1 = tile_map.local_to_map(player.position)
			var p2 = tile_map.local_to_map(get_global_mouse_position())
			path = astar_grid.get_point_path(p1,p2)
			queue_redraw()

# 实现沿着路径行走
func _process(delta):
	if path.size() > 0:
		var target_pos = path[0]
		if target_pos.distance_to(player.position)>2:
			player.velocity = player.position.direction_to(target_pos) * move_speed
			player.move_and_slide()
		else:
			path.remove_at(0)
		queue_redraw()

# 绘制路径信息
func _draw():
	var grid_width = astar_grid.size.x * astar_grid.cell_size.x
	var cell_width = astar_grid.cell_size.x
	var cell_height = astar_grid.cell_size.y
	
	# 绘制路径和其上的点
	if path.size() > 0:
		for pot in path:
			draw_circle(pot,5,Color.YELLOW)
				
		draw_polyline(path,Color.YELLOW,2)

开启显示碰撞区域和导航。

运行后的效果如下：
基本的导航还是可以的。
:::success
提示
默认由于TileMap是world2的子节点，所以world2上用_draw绘制的内容会被TileMap绘制的地图覆盖而无法显示。解决方法是将TileMap的z_index设为-1。

:::