Unity3D-深入剖析NGUI的游戏UI架构

Unity3D-NGUI分析,使用NGUI做UI须要注意的几个要点在此我想罗列一下,对我在U3D上做UI的一些总结,最后解剖一下NGUI的源码。它是假设架构和运作的。

在此前我介绍了自己项目的架构方式,所以在NGUI的利用上也是相同的做法,UI逻辑的程序不被绑定在物体上。

那么怎样做到GUI输入消息的传递呢,答案是:我封装了一个关于NGUI输入消息的类。因为NGUI的输入消息传递方式是U3D中的SendMessage方式,所以在每一个须要接入输入的物体上动态的绑定该封装脚本。

在这个消息封装类中。增加消息传递的托付方法后。全部关于该物体的输入消息将通过封装类直接传递到方法上。再通过消息类型的识别就能够脱离传统脚本绑定的束缚了。源代码地址:GUIComponentEvent

在用NGUI制作UI时须要注意的几点:

1.每一个GUI以1各UIPanel为标准,过多的UIPanel首先会导致DrawCall的增多,其次是导致UI逻辑的混乱。

2.UITexture不能使用的过于平庸,由于每一个UITexture都会添加1各DrawCall,所以通常会作为背景图出如今UI上,小背景。大背景都能够。

3.图集不宜过大,过大的图集,不要把非常多个GUI都放在一个图集里,在UI显示时载入资源IO速度会非常慢。

我尝试了各种方式来管理图集,比如每一个GUI一个图集,大雨300*100宽度的图不做图集。抑或一个系统模块2个图集,甚至我有尝试过以整个游戏为单位划分公共图集,button图集,头像图集,问题图集。但这样的方式终于以图集过大IO过慢而放弃,这些图集的管理方式都是应项目而适应的,并没有固定的方式。最主要是你怎么理解程序读取资源时的IO操作时间。

4.能不用自带的UIDraggablePanel就不用,自己写才是最适合自己项目的。

5.在开发中,尽量用Free分辨率来測试项目的适配效果。不要到上线才发现适配问题。

适配源代码:

float defaultWHRate = 800f / 480f;

        float ScreenWHRate = (float)Screen.width / (float)Screen.height;

        bool isUseHResize = defaultWHRate >= ScreenWHRate ? false : true;       

        UIRoot root = GameObject.Find("ROOT").GetComponent<UIRoot>();

        if (!isUseHResize)

        {

            float curScreenH = (float)Screen.width / defaultWHRate;

            float Hrate = curScreenH / Screen.height;

            root.manualHeight =(int)(480f / Hrate);

        }

        else

        {

            root.manualHeight = 480;

        }

6.拆分以及固定各个锚点,上,左上,右上,中。左中,右中,下,左下,右下

7.拆分GUI层级,层级越高,显示越靠前。层级的正确拆分能有效管理GUI的显示方式。

/// <summary>

/// GUI层级

/// </summary>

public enum GUILAYER

{

    GUI_BACKGROUND = 0, //背景层

    GUI_MENU,           //菜单层0

    GUI_MENU1,           //菜单层1

    GUI_PANEL,          //面板层

    GUI_PANEL1,         //面板1层

    GUI_PANEL2,         //面板2层

    GUI_PANEL3,         //面板3层

    GUI_FULL,           //满屏层

    GUI_MESSAGE,        //消息层

    GUI_MESSAGE1,        //消息层

    GUI_GUIDE,           //引导层

    GUI_LOADING,        //载入层

}

8.要充分的管理GUI。不然过多的GUI会导致内存加速增长,而每次都销毁不用的GUI则会让IO过于频繁减少执行速度。我的方法是找到两者间的中间态,给予隐藏的GUI一个缓冲带,当每次某各GUI进行隐藏时推断是否有须要销毁的GUI。或者也能够这么做。每时每刻去监控隐藏的GUI,哪些GUI内存时间驻留过长就销毁。

9.另外关于图标,像头像。物品,数量过多的,能够用打成几个图集。按一定规则进行排列。减小文件大小降低一次性读取的IO时间。

10.尽量降低不必要的UI更改。NGUI一旦有UI进行更改,它就得又一次绘制MESH和贴图。比起cocos2d耗得CPU大的多。

11.假设能够不用动态字体就不要用动态字体,由于动态字体每次都会做IO操作读取对应的图片,这个是NGUI一个问题,特别费CPU。

12.设置脚本运行次序,在U3D的Project setting->Script Execution Order 中。因为NGUI以UIPanel为主要渲染入口,所以,全部关于游戏渲染处理的程序最好放在渲染之后。也就是UIPanel之后。UIPanel以LateUpdate为接口入口,所以关于渲染方面的程序还得斟酌是否方在LateUpdate里。

以上是我能想起来的注意点。若有没想起来的,在以后的时间想到的也将补充进去。口无遮拦的说了这么多,不剖析一下源代码怎么说的过去,之前对NGUI输入消息进行了封装,对2D动画序列帧进行了封装,却一直没能完整剖析它的底层源代码,着实遗憾。

NGUI中UIPanel是渲染的关键,他承载了在他以下的子物体的全部渲染工作。每一个渲染元素都是由UIWidget继承而来,每一个UI物体的渲染都是由面片、材质球、UV点组成,每一个种材质由一个UIDrawCall完毕渲染工作,UIDrawCall中自己创建Mesh和MeshRender来进行统一的渲染工作。

这些都是对NGUI底层的简单的介绍,以下将进行更加仔细的分析。

首先我们来看UIWidget这个组件基类,从它拥有的类内部变量就能知道它承担得如何的责任:

// Cached and saved values

    [HideInInspector][SerializeField] protected Material mMat;//材质

    [HideInInspector][SerializeField] protected Texture mTex;//贴图

    [HideInInspector][SerializeField] Color mColor = Color.white;//颜色

    [HideInInspector][SerializeField] Pivot mPivot = Pivot.Center;//对齐位置

    [HideInInspector][SerializeField] int mDepth = 0;//深度

    protected Transform mTrans;//坐标转换

    protected UIPanel mPanel;//对应的UIPanel

protected bool mChanged = true;//是否更改

    protected bool mPlayMode = true;//模式

Vector3 mDiffPos;//位置差异

    Quaternion mDiffRot;//旋转差异

    Vector3 mDiffScale;//缩放差异

    int mVisibleFlag = -1;//可见标志

// Widget's generated geometry

    UIGeometry mGeom = new UIGeometry();//多变形实例

UIWidget承担了存储显示内容。颜色调配,显示深度,显示位置。显示大小,显示角度。显示的多边形形状,归属哪个UIPanel。这就是UIWidget所要承担的内容,在UIWidget的全部子类中都具有以上同样的属性和任务。UIWidget和UIPanel的关系很密切,由于UIPanel承担了UIWidget的全部渲染工作,而UIWidget仅仅是承担了存储须要渲染数据。所以,在UIWidget在更换贴图,材质球,甚至更换UIPanel父节点时它会及时通知UIPanel说:"我更变配置了。你得又一次获取我的渲染数据"。

UIWidget中最重要的虚方法为 virtual public void OnFill(BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols) { } 它是区分子类的显示内容的重要方法。

它的工作就是填写怎样显示,显示什么。

UIWidget中在使用OnFill方法的重要的方法是 更新渲染多边型方法:

public bool UpdateGeometry (ref Matrix4x4 worldToPanel, bool parentMoved, bool generateNormals)

    {

        if (material == null) return false;

if (OnUpdate() || mChanged)

        {

            mChanged = false;

            mGeom.Clear();

            OnFill(mGeom.verts, mGeom.uvs, mGeom.cols);

if (mGeom.hasVertices)

            {

                Vector3 offset = pivotOffset;

                Vector2 scale = relativeSize;

                offset.x *= scale.x;

                offset.y *= scale.y;

mGeom.ApplyOffset(offset);

                mGeom.ApplyTransform(worldToPanel * cachedTransform.localToWorldMatrix, generateNormals);

            }

            return true;

        }

        else if (mGeom.hasVertices && parentMoved)

        {

            mGeom.ApplyTransform(worldToPanel * cachedTransform.localToWorldMatrix, generateNormals);

        }

        return false;

    }

它的作用就是,当须要又一次组织多边型展示内容时,进行多边型的又一次规划。

接着,我们来看看UINode,这个类非常easy被人忽视,而他的作用也非常重要。它是在UIPanel被告知有新的UIWidget显示元素时被创建的,它的创建主要是为了监视被创建的UIWidget的位置。旋转,大小是否被更改。若被更改。将由UIPanel进行又一次的渲染工作。

HasChanged这是UINode唯一重要的方法之中的一个。它的作用就是被UIPanel用来监视每一个元素是否改变了进而进行又一次渲染。

public bool HasChanged ()

    {

#if UNITY_3 || UNITY_4_0

        bool isActive = NGUITools.GetActive(mGo) && (widget == null || (widget.enabled && widget.isVisible));

if (lastActive != isActive || (isActive &&

            (lastPos != trans.localPosition ||

             lastRot != trans.localRotation ||

             lastScale != trans.localScale)))

        {

            lastActive = isActive;

            lastPos = trans.localPosition;

            lastRot = trans.localRotation;

            lastScale = trans.localScale;

            return true;

        }

#else

        if (widget != null && widget.finalAlpha != mLastAlpha)

        {

            mLastAlpha = widget.finalAlpha;

            trans.hasChanged = false;

            return true;

        }

        else if (trans.hasChanged)

        {

            trans.hasChanged = false;

            return true;

        }

#endif

        return false;

    }

接着,来看UIDrawCall。它是被NGUI隐藏起来的类。

他的内部变量来看看:

Transform        mTrans;            //坐标转换类

    Material        mSharedMat;        // 渲染材质

    Mesh            mMesh0;            //首个MESH

    Mesh            mMesh1;            //用于更换的Mesh

    MeshFilter        mFilter;        //绘制的MeshFilter

    MeshRenderer    mRen;            //渲染MeshRender组件

    Clipping        mClipping;        //裁剪类型

    Vector4            mClipRange;        //裁剪范围

    Vector2            mClipSoft;        //裁剪缓冲方位

    Material        mMat;            //实例化材质

    int[]            mIndices;        //做为Mesh三角型索引点

由这些内部变量可知,UIDrawCall是负责NGUI的最重要的渲染类。他制造Mesh制造Material,设置裁剪范围,为NGUI提供渲染底层。

他最重要的方法是:

public void Set (BetterList<Vector3> verts, BetterList<Vector3> norms, BetterList<Vector4> tans, BetterList<Vector2> uvs, BetterList<Color32> cols)

    {

        int count = verts.size;

// Safety check to ensure we get valid values

        if (count > 0 && (count == uvs.size && count == cols.size) && (count % 4) == 0)

        {

            // Cache all components

            if (mFilter == null) mFilter = gameObject.GetComponent<MeshFilter>();

            if (mFilter == null) mFilter = gameObject.AddComponent<MeshFilter>();

            if (mRen == null) mRen = gameObject.GetComponent<MeshRenderer>();

if (mRen == null)

            {

                mRen = gameObject.AddComponent<MeshRenderer>();

#if UNITY_EDITOR

                mRen.enabled = isActive;

#endif

                UpdateMaterials();

            }

            else if (mMat != null && mMat.mainTexture != mSharedMat.mainTexture)

            {

                UpdateMaterials();

            }

if (verts.size < 65000)

            {

                int indexCount = (count >> 1) * 3;

                bool rebuildIndices = (mIndices == null || mIndices.Length != indexCount);

// Populate the index buffer

                if (rebuildIndices)

                {

                    // It takes 6 indices to draw a quad of 4 vertices

                    mIndices = new int[indexCount];

                    int index = 0;

for (int i = 0; i < count; i += 4)

                    {

                        mIndices[index++] = i;

                        mIndices[index++] = i + 1;

                        mIndices[index++] = i + 2;

mIndices[index++] = i + 2;

                        mIndices[index++] = i + 3;

                        mIndices[index++] = i;

                    }

                }

// Set the mesh values

                Mesh mesh = GetMesh(ref rebuildIndices, verts.size);

                mesh.vertices = verts.ToArray();

                if (norms != null) mesh.normals = norms.ToArray();

                if (tans != null) mesh.tangents = tans.ToArray();

                mesh.uv = uvs.ToArray();

                mesh.colors32 = cols.ToArray();

                if (rebuildIndices) mesh.triangles = mIndices;

                mesh.RecalculateBounds();

                mFilter.mesh = mesh;

            }

            else

            {

                if (mFilter.mesh != null) mFilter.mesh.Clear();

                Debug.LogError("Too many vertices on one panel: " + verts.size);

            }

        }

        else

        {

            if (mFilter.mesh != null) mFilter.mesh.Clear();

            Debug.LogError("UIWidgets must fill the buffer with 4 vertices per quad. Found " + count);

        }

    }

在这种方法里,它制造Mesh,MeshFilter,MeshRender,Materials。

最后,我们来说说最重要的UI渲染入口UIPanel。

UIPanel的渲染步骤:

1.当有不论什么形式的UI组件启动渲染时增加UIPanel的渲染队列,当有新的渲染组件须要有新的UIDrawCall时,进行生成新的UIDrawCall.

2.对全部UIPanel的渲染队列进行检查,是否队列中渲染组件须要又一次渲染,包含位移。缩放,更改图片。启用,关闭.

3.获取渲染组件相应的UIDrawCall。更新Mesh,贴图,UV,位置,大小

4.对须要更新的UIDrawCall进行又一次渲染

5.最后标记已经渲染的渲染组件,告诉他们已经渲染,为下次推断更新做好准备。

删除不再须要渲染的UIDrawCall,销毁渲染冗余。

注意:全部的渲染都是在LateUpdate下进行。也就是它是进行的延迟渲染。

接口源代码:

void LateUpdate ()

    {

        // Only the very first panel should be doing the update logic

        if (list[0] != this) return;

// Update all panels

        for (int i = 0; i < list.size; ++i)

        {

            UIPanel panel = list[i];

            panel.mUpdateTime = RealTime.time;

            panel.UpdateTransformMatrix();

            panel.UpdateLayers();

            panel.UpdateWidgets();

        }

// Fill the draw calls for all of the changed materials

        if (mFullRebuild)

        {

            UIWidget.list.Sort(UIWidget.CompareFunc);

            Fill();

        }

        else

        {

            for (int i = 0; i < UIDrawCall.list.size; )

            {

                UIDrawCall dc = UIDrawCall.list[i];

if (dc.isDirty)

                {

                    if (!Fill(dc))

                    {

                        DestroyDrawCall(dc, i);

                        continue;

                    }

                }

                ++i;

            }

        }

// Update the clipping rects

        for (int i = 0; i < list.size; ++i)

        {

            UIPanel panel = list[i];

            panel.UpdateDrawcalls();

        }

        mFullRebuild = false;

    }

Fill()接口源代码:

/// <summary>

    /// Fill the geometry fully, processing all widgets and re-creating all draw calls.

    /// </summary>

static void Fill ()

    {

        for (int i = UIDrawCall.list.size; i > 0; )

            DestroyDrawCall(UIDrawCall.list[--i], i);

int index = 0;

        UIPanel pan = null;

        Material mat = null;

        UIDrawCall dc = null;

for (int i = 0; i < UIWidget.list.size; )

        {

            UIWidget w = UIWidget.list[i];

if (w == null)

            {

                UIWidget.list.RemoveAt(i);

                continue;

            }

if (w.isVisible && w.hasVertices)

            {

                if (pan != w.panel || mat != w.material)

                {

                    if (pan != null && mat != null && mVerts.size != 0)

                    {

                        pan.SubmitDrawCall(dc);

                        dc = null;

                    }

pan = w.panel;

                    mat = w.material;

                }

if (pan != null && mat != null)

                {

                    if (dc == null) dc = pan.GetDrawCall(index++, mat);

                    w.drawCall = dc;

                    if (pan.generateNormals) w.WriteToBuffers(mVerts, mUvs, mCols, mNorms, mTans);

                    else w.WriteToBuffers(mVerts, mUvs, mCols, null, null);

                }

            }

            else w.drawCall = null;

            ++i;

        }

if (mVerts.size != 0)

            pan.SubmitDrawCall(dc);

    }

上一篇:python基础练习题


下一篇:JavaScript基础系列(变量与类型)