&&&&&&&&&&&&&&&孙广东游戏选/创建角色界面中 职业能力图六角形&&&&&&& 主要说的是&UGUI&的实现方式！！！！！！&&&&& 下面这个六边形在很多游戏中都存在了（随便在网上找的， 一会就使用这个图片）。：&&在& Asset Store 上搜索，& Chart&&会得到相关的结果&&&&& &http://blog.csdn.net/u/&先使用最简单的方式绘制Mesh多边形。using UnityE
using System.C
public class MeshTest : MonoBehaviour {
privateMeshFilter m_MeshF
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),
//遵循顺时针三顶点确定一面
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 =
&顶点和三角面 就组成这个多边形。& &&这个功能肯定是 放在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/u/&看 UGUI的源代码 ：&&&&&&&&&&&&&& 说的是当该控件（例如Text,Image,RawImage）需要改变顶点的时候，就会自动调用&&OnPopulateMesh。&&&&&&&&&&& 不过该函数是只有在该Craphic组件需要修改的时候才会调用，比如你修改Image的大小，或者它加载的时候才会调用。&&&&&&&&& 这样就导致我们没法及时在编辑器状态下看到我们对mesh的修改，& 比如用是将一张Image的四个角分别用四个对象表示，这四个对象的移动，会让这种Image发生形变。但是没法及时更新就没办法了。还好有 &&SetNativeSize()&&&这个方法，其实跟刷新差不多。&直接上代码：/// CreditCiaccoDavide
/// Sourced from - http://ciaccodavi.de/unity/UIPolygon
namespace UnityEngine.UI.Extensions
[AddComponentMenu(&UI/Extensions/Primitives/UI Polygon&)]
public class UIPolygon : UIPrimitiveBase
public bool fill =
public float thickness = 5;
[Range(3, 360)]
public int sides = 3;
[Range(0, 360)]
public float rotation = 0;
[Range(0, 1)]
public float[] VerticesDistances = newfloat[3];
private float size = 0;
public void DrawPolygon(int _sides)
VerticesDistances = newfloat[_sides + 1];
for (int i = 0; i & _ i++)VerticesDistances[i] = 1; ;
rotation = 0;
public void DrawPolygon(int _sides,float[] _VerticesDistances)
VerticesDistances =_VerticesD
rotation = 0;
public void DrawPolygon(int _sides,float[] _VerticesDistances, float _rotation)
VerticesDistances =_VerticesD
rotation = _
void Update()
size = rectTransform.rect.
if (rectTransform.rect.width &rectTransform.rect.height)
size =rectTransform.rect.
size =rectTransform.rect.
thickness =(float)Mathf.Clamp(thickness, 0, size / 2);
protected override voidOnPopulateMesh(VertexHelper vh)
vh.Clear();
Vector2 prevX = Vector2.
Vector2 prevY = Vector2.
Vector2 uv0 = new Vector2(0, 0);
Vector2 uv1 = new Vector2(0, 1);
Vector2 uv2 = new Vector2(1, 1);
Vector2 uv3 = new Vector2(1, 0);
Vector2 pos0;
Vector2 pos1;
Vector2 pos2;
Vector2 pos3;
float degrees = 360f /
int vertices = sides + 1;
if (VerticesDistances.Length !=vertices)
VerticesDistances = newfloat[vertices];
for (int i = 0; i & vertices- 1; i++) VerticesDistances[i] = 1;
// last vertex is also the first!
VerticesDistances[vertices - 1] =VerticesDistances[0];
for (int i = 0; i &i++)
float outer =-rectTransform.pivot.x * size * VerticesDistances[i];
float inner =-rectTransform.pivot.x * size * VerticesDistances[i] +
float rad = Mathf.Deg2Rad * (i* degrees + rotation);
float c = Mathf.Cos(rad);
float s = Mathf.Sin(rad);
uv0 = new Vector2(0, 1);
uv1 = new Vector2(1, 1);
uv2 = new Vector2(1, 0);
uv3 = new Vector2(0, 0);
pos0 = prevX;
pos1 = new Vector2(outer * c,outer * s);
pos2 = Vector2.
pos3 = Vector2.
pos2 = new Vector2(inner *c, inner * s);
pos3 = prevY;
prevX = pos1;
prevY = pos2;
vh.AddUIVertexQuad(SetVbo(new[]{ pos0, pos1, pos2, pos3 }, new[] { uv0, uv1, uv2, uv3 }));
&它继承自封装的基类：using S
namespaceUnityEngine.UI.Extensions
public class UIPrimitiveBase :MaskableGraphic, ILayoutElement, ICanvasRaycastFilter
[SerializeField]
private Sprite m_S
public Sprite sprite { get { returnm_S } set { if (SetPropertyUtility.SetClass(ref m_Sprite, value))SetAllDirty(); } }
[NonSerialized]
private Sprite m_OverrideS
public Sprite overrideSprite { get {return m_OverrideSprite == null ? sprite : m_OverrideS } set { if(SetPropertyUtility.SetClass(ref m_OverrideSprite, value)) SetAllDirty(); } }
// Not serialized until we supportread-enabled sprites better.
internal float m_EventAlphaThreshold =1;
public float eventAlphaThreshold { get{ return m_EventAlphaT } set { m_EventAlphaThreshold = } }
/// &summary&
/// Image's texture comes from theUnityEngine.Image.
/// &/summary&
public override Texture mainTexture
if (overrideSprite == null)
if (material != null&& material.mainTexture != null)
returnmaterial.mainT
return s_WhiteT
return overrideSprite.
public float pixelsPerUnit
float spritePixelsPerUnit =100;
if (sprite)
spritePixelsPerUnit =sprite.pixelsPerU
float referencePixelsPerUnit =100;
if (canvas)
referencePixelsPerUnit =canvas.referencePixelsPerU
return spritePixelsPerUnit /referencePixelsPerU
protected UIVertex[] SetVbo(Vector2[]vertices, Vector2[] uvs)
UIVertex[] vbo = new UIVertex[4];
for (int i = 0; i &vertices.L i++)
var vert = UIVertex.simpleV
vert.color =
vert.position = vertices[i];
vert.uv0 = uvs[i];
#region ILayoutElement Interface
public virtual voidCalculateLayoutInputHorizontal() { }
public virtual voidCalculateLayoutInputVertical() { }
public virtual float minWidth { get {return 0; } }
public virtual float preferredWidth
if (overrideSprite == null)
returnoverrideSprite.rect.size.x / pixelsPerU
public virtual float flexibleWidth {get { return -1; } }
public virtual float minHeight { get {return 0; } }
public virtual float preferredHeight
if (overrideSprite == null)
returnoverrideSprite.rect.size.y / pixelsPerU
public virtual float flexibleHeight {get { return -1; } }
public virtual int layoutPriority { get{ return 0; } }
#endregion
#region ICanvasRaycastFilter Interface
public virtual boolIsRaycastLocationValid(Vector2 screenPoint, Camera eventCamera)
if (m_EventAlphaThreshold &= 1)
Sprite sprite = overrideS
if (sprite == null)
RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform,screenPoint, eventCamera, out local);
Rect rect = GetPixelAdjustedRect();
// Convert to have lower leftcorner as reference point.
local.x += rectTransform.pivot.x *rect.
local.y += rectTransform.pivot.y *rect.
local = MapCoordinate(local, rect);
// Normalize local coordinates.
Rect spriteRect =sprite.textureR
Vector2 normalized = newVector2(local.x / spriteRect.width, local.y / spriteRect.height);
// Convert to texture space.
float x = Mathf.Lerp(spriteRect.x,spriteRect.xMax, normalized.x) / sprite.texture.
float y = Mathf.Lerp(spriteRect.y,spriteRect.yMax, normalized.y) / sprite.texture.
returnsprite.texture.GetPixelBilinear(x, y).a &= m_EventAlphaT
catch (UnityException e)
Debug.LogError(&UsingclickAlphaThreshold lower than 1 on Image whose sprite texture cannot be read.& + e.Message + & Also make sure to disable sprite packing for thissprite.&, this);
/// &summary&
/// Return image adjusted position
/// **Copied from Unity's Imagecomponent for now and simplified for UI Extensions primatives
/// &/summary&
/// ¶mname=&local&&&/param&
/// ¶mname=&rect&&&/param&
/// &returns&&/returns&
private Vector2 MapCoordinate(Vector2local, Rect rect)
Rect spriteRect = sprite.
return new Vector2(local.x *spriteRect.width / rect.width, local.y * spriteRect.height / rect.height);
Vector4 GetAdjustedBorders(Vector4border, Rect rect)
for (int axis = 0; axis &= 1;axis++)
float combinedBorders =border[axis] + border[axis + 2];
if (rect.size[axis] &combinedBorders && combinedBorders != 0)
float borderScaleRatio =rect.size[axis] / combinedB
border[axis] *=borderScaleR
border[axis + 2] *=borderScaleR
#endregion
&&将脚本拖拽到& Canvas 下的一个空对象上。&&&&&&&&&&& 然后设置参数（六边形，随便着色、为了和背景图一直旋转了一下，然后就是六个值的设定）&效果就和一开始的截图一样了！&&&提到的& OnFillVBO &的实现方式（这个方法是 Unity5.3 之前的版本和 SetNativeSize一个原理）&using UnityE
using UnityEngine.UI;
using System.Collections.G
[ExecuteInEditMode]
public class SimpleImage : Graphic
protected override voidOnFillVBO (List&UIVertex& vbo)
Vector2 corner1 =Vector2.
Vector2 corner2 =Vector2.
corner1.x = 0f;
corner1.y = 0f;
corner2.x = 1f;
corner2.y = 1f;
corner1.x -=rectTransform.pivot.x;
corner1.y -=rectTransform.pivot.y;
corner2.x -=rectTransform.pivot.x;
corner2.y -=rectTransform.pivot.y;
corner1.x *=rectTransform.rect.
corner1.y *=rectTransform.rect.
corner2.x *=rectTransform.rect.
corner2.y *=rectTransform.rect.
vbo.Clear();
UIVertex vert =UIVertex.simpleV
vert.position = newVector2(corner1.x, corner1.y);
vert.color =
vbo.Add(vert);
vert.position = newVector2(corner1.x, corner2.y);
vert.color =
vbo.Add(vert);
vert.position = newVector2(corner2.x, corner2.y);
vert.color =
vbo.Add(vert);
vert.position = newVector2(corner2.x, corner1.y);
vert.color =
vbo.Add(vert);
&&http://blog.csdn.net/u/http://blog.csdn.net/u/&
本文已收录于以下专栏：
相关文章推荐
借用梦想世界宠物属性图
想必大家都在游戏中见过属性图用于展示多种属性的数值，可以较为直观的对比某种属性的缺陷或者是哪种属性有优势。在三维可视化领域也会遇到类似的属性对比，用属性图来...
最终效果图：
游戏中难免会展示英雄的各个属性值，雷达图是比较简洁直观并且符合用户习惯的展示方式之一。3D中生成的任何面都是由一个个三角形组成的，要实现图中的效果我们需要在程序中动态生成正...
想必大家都在游戏中见过属性图用于展示多种属性的数值，可以较为直观的对比某种属性的缺陷或者是哪种属性有优势。在三维可视化领域也会遇到类似的属性对比，用属性图来展示最为合适。
一键创建...
1) Texture：纹理。适用于所有类型纹理的最常用设置。
Texture Type: 纹理类型。
Texture（纹理）、Normal map（法线贴图）、GUI（图形用户界面）、C...
今天为大家分享一下，如何做一个六角形花纹效果的小Demo。
    欢迎加我的学习交流群：
    
    好吧!废话不多讲，我直接上图操作！
    1.新建一...
渐变字颜色
每个字是2个面，4个顶点，左上为1，右上为2，左下为3，右下为4
第二个字是左上为5，右上为六
using UnityE
using UnityEngine.UI...
饼状图或者是雷达图是根据属性自动生成的自定义图形。这里展示了如何使用uGUI完成这一功能。
      先附上我制作雷达图的控件的代码  UIPropWidget.cs
using Unity...
在工程三维可视化领域，用图表展示数据较为常用，近期看有人在论坛里所求折线图插件，于是我就把折线图(LineChartGraph)也加入了SpringGUI中,这里我简单介绍一下，便于有需要的...
万万没想到对于3D物体应付起来易如反掌的Unity3D在面对图表的绘制是如此简直无力，需要和C++或者其它语言一样需要调用到自己底层绘图接口《【Unity3D】平面绘图----GL与GUI》（点击打开链接...
他的最新文章
讲师：姜飞俊
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)