34

从零点五开始用Unity做半个2D战棋小游戏(二)-腾讯游戏学院

 5 years ago
source link: http://gad.qq.com/article/detail/288730
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
好久不见。

这是第18篇与游戏开发有关的文章。

| 写在最前
这次想要一个简单且传统的战棋小游戏,大概的玩法是:在2D世界里创建一张由六边形地块组成的战斗地图,敌我双方依据体力在地图上轮流行动并向对方发动攻击,先消灭掉所有敌人的一方将获得胜利。

预计将分为以下几篇(调整后):

1、创建战场 (已完成)
根据预定尺寸生成战场地图,并随机一些障碍物。

2、添加战场地图功能
实现战场格子点击反馈,地图导航及范围选定。

3、添加对战双方
向战场中添加作战单位,作战单位按照一定规则轮流行动,可进行移动、攻击等。

4、添加战场UI
添加可以随时显示战况的Hud、为作战单位添加血条等。

5、扩展作战单位
丰富作战单位的类型,添加职业,并加入若干不同类型的技能。

6、扩展战场地图
丰富战场地图,加入地形及道具等元素。

7、规范战斗配置
可以通过规范化的数据结构配置战场、职业、技能、道具等。

本次的主题是:添加战场地图功能

项目代码会上传至我的Github:https://github.com/elsong823/HalfSLG,有兴趣的同学请自取。



| 目标
实现一些后面所需的操作地图的基础功能,如:
1、点击战场后高亮显示被点中的格子;
2、点击两个位置实现从A到B的导航并在地图上显示路径;
3、设定一个移动半径,点中格子后显示出可移动范围。

实现后的效果如下图:
5c061445b92c0.gif
点击格子变红

5c06145a50d2f.gif
红色向蓝色导航(黄色为路径,青色为探索过但没有采用的格子)

5c06146d473fc.gif
半径为2个单位的可移动范围



| 点击格子变红
我采用的方法是:
1、获取屏幕点击位置的世界坐标,并将其转换到格子的Root节点下;
2、用这个坐标推断出点击格子所在的行、列范围;
3、遍历这些推测格子的中心,找到距离最近的格子,即为点中的格子。
5c06149443b86.gif
点击屏幕后推断的九个格子

| 调整地图瓦片渲染器的位置
为了方便计算格子的位置,这里调整了瓦片渲染器的位置,保证它在地块对象的中心,这样在设置、获取、计算坐标时,少一步转换的操作,也更容易被理解。
5c0614a79bbe0.png
调整后地块对象坐标归零时正好显示为瓦片的中心



| 导航
这里采用的导航是A星算法,网上的介绍很多,就不再赘述了。在这只对六边形地图上两格之间最短移动距离的计算做个简单说明。

六边形格子的路程计算

与四边形地图差别不大,六边形地图也可理解为先做行移动,再做列移动。但它的差异是:在做行移动的同时,其列也可以在一定范围发生变化,因为它可以斜着走。

5c0614ba70819.png
单元格坐标在仅计算行移动量的同时,列可移动范围是一个三角形。

5c0614c517828.png
起始点所在奇、偶行的差别,对覆盖三角形区域的计算是有影响的。
注:黑字表示格子的列,红字表示当前格子与出发格子的列差值。

综上,六边形地图下两格子之间的最近路程可以理解为:从起始位置先纵向移动,如果移动到与目标同行,但是目标格子又不在可到达格子范围内的话,再横向移动若干单位即可,如图:
5c0614da7f122.png
需要注意的是,奇数、偶数行与首行是否“缩进”了半个格子有关。

| 调整数据结构
导航功能交给一个新的工具类:地图导航器来完成,但是原来地图中格子信息是直接保存在战斗数据对象中,现在我将地图数据从战斗数据中拆分出来,便于导航器集中处理数据。
5bf64e0927ede.png
旧 战斗数据的结构

5c06153b9ccd0.png
新 战斗数据结构

5c06154721f79.png
调用接口



| 根据半径显示可移动范围
预设半径显示可移动范围,也可转换为在进行行偏移的同时,求列覆盖的最小和最大值。

5c061554acde0.png
如在计算移动半径为2的覆盖区域时,假设从中心点开始,推算下方的区域,本质上是:
1、行移动量为0时,覆盖纵坐标偏移[-2~2]的区域。
2、行移动量为1时,覆盖纵坐标偏移[-1,0] + [-1, 1]的区域,其中[-1, 2]为行移动量为1的格子覆盖区间,[-1, 1]为再横向移动一单位时的偏移增量。
3、行移动量为2时,覆盖纵坐标偏移[-1, 1]的区域。

在计算偏移区域时,使用了上述提到的计算两格子之间距离的方法。



| 写在最后
至此,添加战场地图的基本功能篇就介绍到这里,详细代码可以移步Github下载。

感谢您能读到这里。

愿不忘初心。

下回见。

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK