Unity游戏选/创建角色界面中 职业能力图六角形

2016.8.22               孙广东

游戏选/创建角色界面中 职业能力图六角形

        主要说的是 UGUI 的实现方式！！！！！！

 

     下面这个六边形在很多游戏中都存在了（随便在网上找的， 一会就使用这个图片）。：

 

 

在  Asset Store 上搜索，  Chart  会得到相关的结果

     

 http://blog.csdn.net/u010019717/

 

先使用最简单的方式绘制Mesh多边形。

using UnityEngine;

using System.Collections;

 

public class MeshTest : MonoBehaviour {

 

    privateMeshFilter m_MeshFilter;

 

    void Start() {

        Meshmesh = new Mesh();

 

       mesh.vertices = new Vector3[] {

           new Vector3(0, 0, 0),       // 顶点：0

           new Vector3(1, 0, 0),       // 顶点：1

           new Vector3(1.5f, 1, 0),    // 顶点：2

           new Vector3(0.6f, 1.5f, 0), // 顶点：3

           new Vector3(-0.8f, 1, 0),    //顶点：4

        };

 

        //遵循顺时针三顶点确定一面

       mesh.triangles = new int[] {

           0, 2, 1, // 面：0, 2, 1

           0, 4, 2, // 面：0, 4, 2

           4, 3, 2, // 面：4, 3, 2

        };

 

 

       m_MeshFilter = GetComponent<MeshFilter>();

       m_MeshFilter.mesh = mesh;

    }

}

 

顶点和三角面 就组成这个多边形。 

 

 

这个功能肯定是 放在UI上，  对 UGUI

           首先大概介绍下uGUI的体系结构。在uGUI中，所有的UI组件都要放置在Canvas组件下，由Canvas来管理它的渲染和自适应屏幕等。uGUI提供了Graphic基类，运行时，Canvas会使用CanvasRenderer来渲染它的子级中全部的Graphic组件。所以，如果要自定义外观的控件，从Graphic继承是一个不错的选择。

 

 

        我们都知道，在unity中3d物体最终是转化成若干网格数据来渲染的，其实ui的渲染也是一样的方法(注意 是Unity5.3之后UGUI才引入  Mesh这个东东)。比如一个Image组件，内部其实是使用4个顶点构成的2个三角形网格外加一个Texture贴图来渲染的。那么要改变控件的外形，只要改变网格数据就可以了，对，就是这么个思路。

 

 

Graphic提供了一个虚方法

           protected virtual void OnPopulateMesh(VertexHelper vh);

 

           通过重写这个方法，即可修改或重新生成控件的网格数据，从而达到自定义控件显示外观的需求（Unity4为另一个接口OnFillVBO，不过原理是一致的）。而VertexHelper是unity提供的简化网格操作的辅助类，它提供的接口也很简单，诸如添加顶点、添加三角形、添加Quad等。

 

             需要注意的一点是，顶点的坐标是由控件的位置、大小和锚点等决定的，计算时需要综合考虑这些因素。

 http://blog.csdn.net/u010019717/

 

看 UGUI的源代码 ：

               说的是当该控件（例如Text,Image,RawImage）需要改变顶点的时候，就会自动调用