引言
传统的正方形网格地图如下图：
与许多传统战略游戏使用的正方形网格不同，《三国志战略版》采用了错位的正方形网格，可以理解成六边形网格的变种。
本文将给大家介绍《三国志战略版》中用到的六边形网格地图原理，以及如何在 Cocos Creator 中实现六边形网格地图！
什么是六边形网格地图？
想象一下蜜蜂的蜂巢，或者一些策略游戏的地图，那就是最典型的六边形网格。
它是由正六边形这一种图形，以边对边的方式无缝、无重叠地铺满整个平面。
六边形网格地图有什么特点？
以下是六边形网格地图的主要特点：
-
方向：比传统的方形网格多2个方向，即6个方向。
-
距离：一个格子有且只有6个邻居，且中心到所有邻居中心的距离完全相等。
了解特点后，我们一起来看下如何在 Cocos Creator 中实现一个六边形网格地图。
来实现一个六边形网格地图
我们根据以下的步骤一步一步来实现一个2D版本的六边形网格地图：
1. 环境
引擎版本：Cocos Creator 3.8.7
编程语言：TypeScript
2. 资源准备
简单找两个六边形格子分别表示地图格子的不同状态，再找一个其他图片作为主角。
然后将资源放进去项目，并且简单制作一下地图格子的预制体和主角的预制体，方便生成。
3. 编写代码
首先新建一个Main.ts脚本，简单预制一下地图数据用于演示，可以通过配置加载。
其中0=空地，1=障碍物，2=玩家起点
然后绑定一下预制体、图片和切换关卡按钮，以及一些常量的定义。
将脚本拖拽到节点上，然后就可以进行绑定：
然后在start中初始化游戏，以及绑定按钮事件。
点击模拟进入下一关。
其中初始化游戏包括：
-
清理上一关的内容
-
获取当前关卡配置数据
-
创建关卡
创建关卡的关键在于：
-
1. 格子坐标的计算
偶数行的格子向右偏移1/4个宽度。
-
2. 格子和主角的创建
instantiate克隆预制体。
addChild添加到游戏世界。
-
3. 突出主角
为了突出主角，我们给主角加个简单的上下动的tween动画。
4. 效果演示
结语
本文的核心在于格子坐标的偏移和获取。
感谢亿元程序员带来的分享，希望对大家有所帮助，更多干货内容可以在他的公众号获取！
推荐关注 Cocos 官方公众号
获取更多干货内容！