文/枸杞忧天
这次想要一个简单且传统的战棋小游戏，大概的玩法是：在2D世界里创建一张由六边形地块组成的战斗地图，敌我双方依据体力在地图上轮流行动并向对方发动攻击，先消灭掉所有敌人的一方将获得胜利。
预计将分为以下几篇：
1、创建战场
根据预定尺寸生成战场地图，并随机一些障碍物。
2、添加战场地图功能
实现战场格子点击反馈，地图导航及范围选定。
3、添加对战双方
向战场中添加作战单位，作战单位按照一定规则轮流行动，可进行移动、攻击等。
4、加入玩家控制
添加可以随时显示战况的Hud、为作战单位添加血条等。
5、添加战场UI
添加可以随时显示战况的Hud、为作战单位添加血条等。
6、扩展作战单位
丰富作战单位的类型，添加职业，并加入若干不同类型的技能。
7、扩展战场地图
丰富战场地图，加入地形及道具等元素。
8、规范战斗配置
可以通过规范化的数据结构配置战场、职业、技能、道具等。
本次的主题是添加战场地图功能。
| 目标
实现一些后面所需的操作地图的基础功能，如：
1、点击战场后高亮显示被点中的格子；
2、点击两个位置实现从A到B的导航并在地图上显示路径；
3、设定一个移动半径，点中格子后显示出可移动范围。
实现后的效果如下图：
点击格子变红
红色向蓝色导航(黄色为路径，青色为探索过但没有采用的格子)
半径为2个单位的可移动范围
| 点击格子变红
我采用的方法是：
1、获取屏幕点击位置的世界坐标，并将其转换到格子的Root节点下；
2、用这个坐标推断出点击格子所在的行、列范围；
3、遍历这些推测格子的中心，找到距离最近的格子，即为点中的格子。
点击屏幕后推断的九个格子
| 调整地图瓦片渲染器的位置
为了方便计算格子的位置，这里调整了瓦片渲染器的位置，保证它在地块对象的中心，这样在设置、获取、计算坐标时，少一步转换的操作，也更容易被理解。
调整后地块对象坐标归零时正好显示为瓦片的中心
| 导航
这里采用的导航是A星算法，网上的介绍很多，就不再赘述了。在这只对六边形地图上两格之间最短移动距离的计算做个简单说明。
六边形格子的路程计算
与四边形地图差别不大，六边形地图也可理解为先做行移动，再做列移动。但它的差异是：在做行移动的同时，其列也可以在一定范围发生变化，因为它可以斜着走。
单元格坐标在仅计算行移动量的同时，列可移动范围是一个三角形。
起始点所在奇、偶行的差别，对覆盖三角形区域的计算是有影响的。
注：黑字表示格子的列，红字表示当前格子与出发格子的列差值。
综上，六边形地图下两格子之间的最近路程可以理解为：从起始位置先纵向移动，如果移动到与目标同行，但是目标格子又不在可到达格子范围内的话，再横向移动若干单位即可，如图：
需要注意的是，奇数、偶数行与首行是否“缩进”了半个格子有关。
| 调整数据结构
导航功能交给一个新的工具类：地图导航器来完成，但是原来地图中格子信息是直接保存在战斗数据对象中，现在我将地图数据从战斗数据中拆分出来，便于导航器集中处理数据。
旧 战斗数据的结构
新 战斗数据结构
调用接口
| 根据半径显示可移动范围
预设半径显示可移动范围，也可转换为在进行行偏移的同时，求列覆盖的最小和最大值。
如在计算移动半径为2的覆盖区域时，假设从中心点开始，推算下方的区域，本质上是：
1、行移动量为0时，覆盖纵坐标偏移[-2~2]的区域。
2、行移动量为1时，覆盖纵坐标偏移[-1,0] + [-1, 1]的区域，其中[-1, 2]为行移动量为1的格子覆盖区间，[-1, 1]为再横向移动一单位时的偏移增量。
3、行移动量为2时，覆盖纵坐标偏移[-1, 1]的区域。
在计算偏移区域时，使用了上述提到的计算两格子之间距离的方法。
添加战场地图的基本功能篇就介绍到这里，详细代码可以点击阅读原文下载。
来源：腾讯游戏学院
原地址：https://mp.weixin.qq.com/s/KPw5cihN4Sgpqoi86FAPkw
| 
发表于 2018-12-5 14:24:27
