【Unity】新的UI系统技巧2

定制一个刻度条相关的控件，如下：

基本原理是继承Graphic类，并重写OnPopulateMesh函数，用到一些基本的OpenGL画矩形的算法。比较有参考的是制作控件的习惯和编辑器的使用，从而使工程模块化，提供工作效率。

代码如下：

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System.Collections.Generic;

[ExecuteInEditMode]
public class BloodBar : Graphic {

    public float _bloodNum = 7; 
    public float bloodNum {
        get {
            return _bloodNum;
        }
        set {
            _bloodNum = value;
            if(_bloodNum < 1) {
                _bloodNum = 1;
                Debug.LogWarningFormat("The number should not less than 1!");
            }
            SetAllDirty();
        }
    }
    
    private float lineWidth = 1f;
    private float deltaWidth = 1;

    /// <summary>
    /// Update the UI renderer mesh.
    /// </summary>
    protected override void OnPopulateMesh(VertexHelper vh) {
        Rect r = GetPixelAdjustedRect();
        deltaWidth = r.width / bloodNum;
        Vector2 offset = new Vector2(r.xMin, r.yMin);
        vh.Clear();
        for(int i = 0; i < bloodNum-1; i++) {
            drawLine(vh, r, offset, i);
        }
    }

    private void drawLine(VertexHelper vh, Rect r, Vector2 offset, int idx) {
        float pos = (idx + 1) * deltaWidth;
        int ti = idx * 4;
        float p = (idx + 1) % 5 == 0 ? 0 : 0.4f;
        
        vh.AddVert(new Vector2(pos,             r.height*p) + offset, Color.black, Vector2.zero);
        vh.AddVert(new Vector2(pos + lineWidth, r.height*p) + offset, Color.black, Vector2.zero);
        vh.AddVert(new Vector2(pos + lineWidth, r.height) + offset, Color.black, Vector2.zero);
        vh.AddVert(new Vector2(pos,             r.height) + offset, Color.black, Vector2.zero);

        vh.AddTriangle(0 + ti, 1 + ti, 2 + ti);
        vh.AddTriangle(2 + ti, 3 + ti, 0 + ti);
    }
}

编辑器代码：

using UnityEngine;
using System.Collections;
using UnityEditor;


[CustomEditor(typeof(BloodBar))]
public class BloodBarEditor : Editor {
    SerializedProperty bloodNum;
    void OnEnable() {
        bloodNum = serializedObject.FindProperty("_bloodNum");
    }

    public override void OnInspectorGUI() {
        serializedObject.Update();
        //DrawDefaultInspector();
        //BloodBar btns = (BloodBar)target;
        //btns.bloodNum = EditorGUILayout.Slider(btns.bloodNum, 0, 30);

        EditorGUILayout.Slider(bloodNum, 1, 30, new GUIContent("blood Num"));
        serializedObject.ApplyModifiedProperties();
    }
}

请参考第一篇【Unity】新的UI系统技巧2

【Unity】新的UI系统技巧2

猜你喜欢