六边形地图素材-六边形地图

步骤如下

1首先要准备一张白纸,将白纸折叠成四分之一,然后在折叠的边缘上画出一个六边形,使它的边缘与纸张的边缘对齐

2将六边形的边缘分割成六个等分,然后在每个等分的中心点上画出一个小圆

3在六边形的中心点上画出一个大圆

4将六边形的边缘分割成六个等分,然后从每个等分的中心点开始,画一条直线到六边形的中心点

5将六边形的边缘分割成六个等分,然后从每个等分的中心点开始,画一条直线到六边形的边缘

6最后,画出六边形的边缘,就可以得到一张老六图了。

六边形地图相较四方地图的优势:只有6个邻居而且每个邻居到中心的距离都是一样的。而四方地图有8个邻居包含2种情况,一种是边邻居,一种是角邻居,难以统一处理。

开始之前先确定一下六边形的大小。假定边长是10个单位。因为六边形由6个等边三角形组成,所以外径就是边长。内径就是三角的高,√3/2*10=5√3,这些值用静态变量存起来。

接下来确定6个点相对中心的位置。注意到有2种摆放六边形的方式,角朝上或者边朝上。我们选择角朝上。从这个角开始,其它角顺时针摆放。顺着XZ平面摆放,六边形们就能贴着地面方向了。

然后来做网格。创建一个空对象把HexGrid组件给它。

我们从一个常规的方形网格开始。把单元存在数组里方便访问。

默认的单元大小是10X10,把每个格子依次加上偏移量。

一个严丝合缝的10X10网格。但是看不出哪是哪。

2.1显示坐标

创建一个Canvas然后将他变成Grid的子对象。渲染模式变成World Space,绕X轴旋转90度让Canvas躺在地上。

为了显示坐标,创建一个文本对象通过GameObject/ui/text然后变成prefab。

在HexGrid里创建一个变量CellLablePrefab

2.2六边形位置

现在我们可以可视地定位每个格子了,来摆放它们吧!我们知道相邻格子间的沿X轴的距离等于内径的2倍。而距离下一行的距离是1.5倍的外径。

当然格子们不是直直的放成一行行的而是交错放的,每行的在X轴的偏移量是内径

3.渲染六边形

我们用一个Mesh去画整个网格。创建一个HexMesh组件来创建Mesh。需要一个mesh filter, mesh renderer, mesh,有顶点和三角面列表。

创建一个新的子对象绑上HexMesh。然后给一个默认材质。

既然六边形是用三角面组成的,那就创建一个快捷方法给定三个顶点就能添加三角面。注意第一个点的索引就是添加点之前点列表的长度,先存起来。

来画第一个三角形

循环画6个,但是i+1会超。所以存corner的时候复制第一个元素在最后面,就省得判断有没有超出了。

六边形坐标

上面那张图,Z轴表现得挺好的,但是 X轴弯弯曲曲的。

我们来添加一个六边形坐标系结构用来转换不同的坐标系

二维坐标可以很明确的用来描述6个方向中的4个。变化X就是X轴方向的变化 ,变化Z就是左下到右上的位置。这意味着我们需要第三维,只要把X坐标取反就得到了Y坐标

由于X,Y轴是对方的镜像,所以保持Z不变,把坐标加起来总是得到同一个值。实际上,如果把所有坐标都相加会得到0.如果你增加一个坐标,就要减少另外一个。这个属性非常像立方体坐标系,同样都是3个维度,拓扑结构类似于立方体。

因为总共为0,所以得知其中两个就能推算出剩下那个,所以Y不必存。

4.1 Inspector里的坐标

定义一个属性绘制器。创建 HexCoordinatesDrawer 脚本然后放在Editor文件夹下。类继承自 而且需要 把它关联到正确的类型上。

Property drawers通过 OnGUI 渲染其内容。提供了屏幕坐标、系列化属性和属性名称标签。

用来加前缀标签,并且返回新的位置

用 实现,前提是给 HexMesh 一个mesh collider。

在 triangulating后把mesh给collider

现在需要确定点击到的是哪个格子。在 HexCoordinates 定义一个 FromPosition 进行转化。

如果Z等于0的话,X,Y互为相反数。

沿着z轴移动,每二行就出现X-1,Y-1的情况。

取整

加个LOG验证

发生问题的是当点是靠近在格子边缘的时候(注:X和Z算行数的时候2行之前是有交叠的部分的),取整导致的问题。离格子中心越远则误差越大。那可以认为误最大的那个方向是错的。

5.1给六边形着色

给 HexGrid 一个默认色和点击色

给 HexCell 一个颜色字段。并在创建格子的时候把默认色给它

还得把颜色信息给 HexMesh

在triangulating的时候。我们顺便把颜色信息设置了。另外写个方法AddTriangleColor来处理这事

回到 。首页找到格子坐标在数组里的正确索引,如果是个方形的地图,那就应该是(X+Z)*WIDTH。但我们这种情况,还需要加上半个Z的偏移。然后取出相应的格子,改变颜色 。再重新triangulate一遍。其实也并不用重新triangulate,之后优化的教程会说到

虽然改变了颜色 ,但是并没有看到效果。因为默认的shader不会用的顶点颜色。创建 Assets / Create / Shader / Default Surface Shader。改两个地方: input加上color属性,albedo* color。只关心RGB,因为我们是不透明的。然后新建个材质用这个shader。

注:如果阴影扭曲或者动来动去的话,是因为Z值冲突。调整方向光的shadow bias 就能解决。

相对于平常的网格图,六边形格点图有时更方便于定位,因此常常被用做游戏的地图中。同时,蜂窝也大抵由六边形组成,因而将六边形格点图也常称作为蜂窝图,该格点运用在装饰上也十分的美观。目前,很少有大小、格式符合自己所需的蜂窝图模板,运用各类设计软件制作也不方便,因此小编在这里为大家推荐一个十分简单便捷的方法。

工具/原料

draw hex gird

方法/步骤

1

网页搜索draw hex grid软件,下载。

下载之后你会发现,软件仅仅由一两个文件组成,十分精巧便捷。

2

打开软件(如果无法正常运行请使用管理员身份运行),你需要填写你所需要的六边形格点纸的格式(输入数据后按回车)。内容分别如下:

1.格子每边的像素大小,输入数字

2.格子构筑是尖端朝上还是横边朝上,分别输入h 或者 v

3.输入地图每行的格数

4.输入地图每列的格数

5.格子中间是不是有点、没有点,或者有十字,分别输入d,n或者c

6.选择是否打印格子的编号

7.选择编号字体,默认为MS Serif

8.选择字体大小

9.选择字体格式,纯数字还是夹杂字母

10.选择编号在上部还是下部

11.选择格边的粗细

输入完成后再次按回车,软件即开始生成图片文件(格式为bmp)

3

不用多少时间,格点纸便会生成并在所示地址自动保存。

END

附:格点纸边框颜色太深怎么办?

1

由于软件只提供了格点纸边框的粗细选项,并不能调整其它参数,如果你有更多需求的话,可以通过后期解决。

2

打开任何可以对图像进行编辑的软件,例如Word。微调其图片亮度(通常调高到80%),格点边框便能变浅了。