NGUI九宫格反向切割拉伸

原创 2015年07月06日 22:06:16

项目中有个新手引导,要求做一个圆圈,中间透明,四周黑色,取一定的Alpha值,由于游戏设定分辨率为1136*640,只是一个圆圈,如果使用大图的话未免浪费,而且由于新手引导是有策划配置修改,用大图的话也不是很灵活,一开始想到使用小图拼接加Anchor的方式,拼出来后电脑上一看,还不错,导包,放到手机上,各种缝隙。

没办法,此路不通,换个思路吧。

想到了NGUI中的九宫格切割sliced,想想自己可不可以这样做呢,不多说,试一下,结果刚好反掉了,我要的是中间不动,四周拉伸的效果,但是NGUI的是中间拉伸,四边不动试着调了下border,不行。

能不能改成中见不到,四周拉伸的效果呢。

以前逛过NGUI官方论坛,作者还是很热心的,基本每帖必回,本着不重复造轮子的原则,去看看,应该不会只有我一个人有这样的想法吧。

还真找到了帖子,但是先别高兴,作者说自己搞,这就是NGUI为什么开源的原因。心瞬间凉了,往下看,提问者说自己写好了,有点希望啊,但是由于项目原因不能公布。能不能不要这么打击我。。。

好吧,自己动手,丰衣足食。

查下NGUI的源代码,看看是如何实现的,能不能改动,代码如下

/// <summary>
    /// Sliced sprite fill function is more complicated as it generates 9 quads instead of 1.
    /// </summary>

    public virtual void SlicedFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
    {
        Vector4 br = border * pixelSize;

        if (br.x == 0f && br.y == 0f && br.z == 0f && br.w == 0f)
        {
            SimpleFill(verts, uvs, cols);
            return;
        }

        Color32 c = drawingColor;
        Vector4 v = drawingDimensions;

        mTempPos[0].x = v.x;
        mTempPos[0].y = v.y;
        mTempPos[3].x = v.z;
        mTempPos[3].y = v.w;

        if (mFlip == Flip.Horizontally || mFlip == Flip.Both)
        {
            mTempPos[1].x = mTempPos[0].x + br.z;
            mTempPos[2].x = mTempPos[3].x - br.x;

            mTempUVs[3].x = mOuterUV.xMin;
            mTempUVs[2].x = mInnerUV.xMin;
            mTempUVs[1].x = mInnerUV.xMax;
            mTempUVs[0].x = mOuterUV.xMax;
        }
        else
        {
            mTempPos[1].x = mTempPos[0].x + br.x;
            mTempPos[2].x = mTempPos[3].x - br.z;

            mTempUVs[0].x = mOuterUV.xMin;
            mTempUVs[1].x = mInnerUV.xMin;
            mTempUVs[2].x = mInnerUV.xMax;
            mTempUVs[3].x = mOuterUV.xMax;
        }

        if (mFlip == Flip.Vertically || mFlip == Flip.Both)
        {
            mTempPos[1].y = mTempPos[0].y + br.w;
            mTempPos[2].y = mTempPos[3].y - br.y;

            mTempUVs[3].y = mOuterUV.yMin;
            mTempUVs[2].y = mInnerUV.yMin;
            mTempUVs[1].y = mInnerUV.yMax;
            mTempUVs[0].y = mOuterUV.yMax;
        }
        else
        {
            mTempPos[1].y = mTempPos[0].y + br.y;
            mTempPos[2].y = mTempPos[3].y - br.w;

            mTempUVs[0].y = mOuterUV.yMin;
            mTempUVs[1].y = mInnerUV.yMin;
            mTempUVs[2].y = mInnerUV.yMax;
            mTempUVs[3].y = mOuterUV.yMax;
        }

        for (int x = 0; x < 3; ++x)
        {
            int x2 = x + 1;

            for (int y = 0; y < 3; ++y)
            {
                if (centerType == AdvancedType.Invisible && x == 1 && y == 1) continue;

                int y2 = y + 1;

                verts.Add(new Vector3(mTempPos[x].x, mTempPos[y].y));
                verts.Add(new Vector3(mTempPos[x].x, mTempPos[y2].y));
                verts.Add(new Vector3(mTempPos[x2].x, mTempPos[y2].y));
                verts.Add(new Vector3(mTempPos[x2].x, mTempPos[y].y));

                uvs.Add(new Vector2(mTempUVs[x].x, mTempUVs[y].y));
                uvs.Add(new Vector2(mTempUVs[x].x, mTempUVs[y2].y));
                uvs.Add(new Vector2(mTempUVs[x2].x, mTempUVs[y2].y));
                uvs.Add(new Vector2(mTempUVs[x2].x, mTempUVs[y].y));

                cols.Add(c);
                cols.Add(c);
                cols.Add(c);
                cols.Add(c);
            }
        }
    }

这段代码是UIBasicSprite.cs里面的代码,也是九宫格切割的关键代码,看了下,关键是如何取顶点,大家可以看下自己切割图片,共有顶点数十六个,我们其中四个顶点是固定的就是图片的四个顶点,还有十二个根据用户定义的border和图片大小dimions。知道了原理,OK,画图,开干。

。。。。。。

画了几张图,简单的计算了下,然后写入代码,调试。

直接上代码吧

代码改自UITexture.cs,由于一些权限问题,修改了部分源代码,这个行为不太好。全部复制,只改了上面提到的函数

//----------------------------------------------
//       UITextureCustom     UITextureCustomInspector
// 与NGUI图片中的九宫格(四边不动,缩放中间)相反,此脚本所在的图片精灵,四边缩放,中间不动
//使用此脚本,需将UIBasicSprite里的mInnerUV,mOuterUV,drawingColor等权限设为proteced,
//将函数SlicedFill设为虚函数,将函数SimpleFill权限设为protected
//  author:lin
// 只要有自然,人就没有自暴自弃的理由
//----------------------------------------------

using UnityEngine;
using System.Collections.Generic;

/// <summary>
/// If you don't have or don't wish to create an atlas, you can simply use this script to draw a texture.
/// Keep in mind though that this will create an extra draw call with each UITexture present, so it's
/// best to use it only for backgrounds or temporary visible widgets.
/// </summary>

[ExecuteInEditMode]
[AddComponentMenu("NGUI/UI/NGUI TextureCustom")]
public class UITextureCustom : UIBasicSprite
{
    [HideInInspector][SerializeField] Rect mRect = new Rect(0f, 0f, 1f, 1f);
    [HideInInspector][SerializeField] Texture mTexture;
    [HideInInspector][SerializeField] Material mMat;
    [HideInInspector][SerializeField] Shader mShader;
    [HideInInspector][SerializeField] Vector4 mBorder = Vector4.zero;

    [System.NonSerialized] int mPMA = -1;

    /// <summary>
    /// Texture used by the UITexture. You can set it directly, without the need to specify a material.
    /// </summary>

    public override Texture mainTexture
    {
        get
        {
            if (mTexture != null) return mTexture;
            if (mMat != null) return mMat.mainTexture;
            return null;
        }
        set
        {
            if (mTexture != value)
            {
                if (drawCall != null && drawCall.widgetCount == 1 && mMat == null)
                {
                    mTexture = value;
                    drawCall.mainTexture = value;
                }
                else
                {
                    RemoveFromPanel();
                    mTexture = value;
                    mPMA = -1;
                    MarkAsChanged();
                }
            }
        }
    }

    /// <summary>
    /// Material used by the widget.
    /// </summary>

    public override Material material
    {
        get
        {
            return mMat;
        }
        set
        {
            if (mMat != value)
            {
                RemoveFromPanel();
                mShader = null;
                mMat = value;
                mPMA = -1;
                MarkAsChanged();
            }
        }
    }

    /// <summary>
    /// Shader used by the texture when creating a dynamic material (when the texture was specified, but the material was not).
    /// </summary>

    public override Shader shader
    {
        get
        {
            if (mMat != null) return mMat.shader;
            if (mShader == null) mShader = Shader.Find("Unlit/Transparent Colored");
            return mShader;
        }
        set
        {
            if (mShader != value)
            {
                if (drawCall != null && drawCall.widgetCount == 1 && mMat == null)
                {
                    mShader = value;
                    drawCall.shader = value;
                }
                else
                {
                    RemoveFromPanel();
                    mShader = value;
                    mPMA = -1;
                    mMat = null;
                    MarkAsChanged();
                }
            }
        }
    }

    /// <summary>
    /// Whether the texture is using a premultiplied alpha material.
    /// </summary>

    public override bool premultipliedAlpha
    {
        get
        {
            if (mPMA == -1)
            {
                Material mat = material;
                mPMA = (mat != null && mat.shader != null && mat.shader.name.Contains("Premultiplied")) ? 1 : 0;
            }
            return (mPMA == 1);
        }
    }


    /// <summary>
    /// Sprite's border. X = left, Y = bottom, Z = right, W = top.
    /// </summary>

    public override Vector4 border
    {
        get
        {
            return mBorder;
        }
        set
        {
            if (mBorder != value)
            {
                mBorder = value;
                MarkAsChanged();
            }
        }
    }

    /// <summary>
    /// UV rectangle used by the texture.
    /// </summary>

    public Rect uvRect
    {
        get
        {
            return mRect;
        }
        set
        {
            if (mRect != value)
            {
                mRect = value;
                MarkAsChanged();
            }
        }
    }

    /// <summary>
    /// Widget's dimensions used for drawing. X = left, Y = bottom, Z = right, W = top.
    /// This function automatically adds 1 pixel on the edge if the texture's dimensions are not even.
    /// It's used to achieve pixel-perfect sprites even when an odd dimension widget happens to be centered.
    /// </summary>

    public override Vector4 drawingDimensions
    {
        get
        {
            Vector2 offset = pivotOffset;

            float x0 = -offset.x * mWidth;
            float y0 = -offset.y * mHeight;
            float x1 = x0 + mWidth;
            float y1 = y0 + mHeight;

            if (mTexture != null && mType != UISprite.Type.Tiled)
            {
                int w = mTexture.width;
                int h = mTexture.height;
                int padRight = 0;
                int padTop = 0;

                float px = 1f;
                float py = 1f;

                if (w > 0 && h > 0 && (mType == UISprite.Type.Simple || mType == UISprite.Type.Filled))
                {
                    if ((w & 1) != 0) ++padRight;
                    if ((h & 1) != 0) ++padTop;

                    px = (1f / w) * mWidth;
                    py = (1f / h) * mHeight;
                }

                if (mFlip == UISprite.Flip.Horizontally || mFlip == UISprite.Flip.Both)
                {
                    x0 += padRight * px;
                }
                else x1 -= padRight * px;

                if (mFlip == UISprite.Flip.Vertically || mFlip == UISprite.Flip.Both)
                {
                    y0 += padTop * py;
                }
                else y1 -= padTop * py;
            }

            Vector4 br = border;

            float fw = br.x + br.z;
            float fh = br.y + br.w;
            float vx = Mathf.Lerp(x0, x1 - fw, mDrawRegion.x);
            float vy = Mathf.Lerp(y0, y1 - fh, mDrawRegion.y);
            float vz = Mathf.Lerp(x0 + fw, x1, mDrawRegion.z);
            float vw = Mathf.Lerp(y0 + fh, y1, mDrawRegion.w);

            return new Vector4(vx, vy, vz, vw);
        }
    }

    /// <summary>
    /// Adjust the scale of the widget to make it pixel-perfect.
    /// </summary>

    public override void MakePixelPerfect ()
    {
        base.MakePixelPerfect();
        if (mType == Type.Tiled) return;

        Texture tex = mainTexture;
        if (tex == null) return;

        if (mType == Type.Simple || mType == Type.Filled || !hasBorder)
        {
            if (tex != null)
            {
                int w = tex.width;
                int h = tex.height;

                if ((w & 1) == 1) ++w;
                if ((h & 1) == 1) ++h;

                width = w;
                height = h;
            }
        }
    }

    /// <summary>
    /// Virtual function called by the UIPanel that fills the buffers.
    /// </summary>

    public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
    {
        Texture tex = mainTexture;
        if (tex == null) return;

        Rect outer = new Rect(mRect.x * tex.width, mRect.y * tex.height, tex.width * mRect.width, tex.height * mRect.height);
        Rect inner = outer;
        Vector4 br = border;
        inner.xMin += br.x;
        inner.yMin += br.y;
        inner.xMax -= br.z;
        inner.yMax -= br.w;

        float w = 1f / tex.width;
        float h = 1f / tex.height;

        outer.xMin *= w;
        outer.xMax *= w;
        outer.yMin *= h;
        outer.yMax *= h;

        inner.xMin *= w;
        inner.xMax *= w;
        inner.yMin *= h;
        inner.yMax *= h;
        int offset = verts.size;
        Fill(verts, uvs, cols, outer, inner);

        if (onPostFill != null)
            onPostFill(this, offset, verts, uvs, cols);
    }

    public override void SlicedFill(BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
    {
        Vector4 br = border * pixelSize;

        if (br.x == 0f && br.y == 0f && br.z == 0f && br.w == 0f)
        {
            SimpleFill(verts, uvs, cols);
            return;
        }

        Color32 c = drawingColor;
       // Color32 c = Color.white;

        Vector4 v = drawingDimensions;

        mTempPos[0].x = v.x;
        mTempPos[0].y = v.y;
        mTempPos[3].x = v.z;
        mTempPos[3].y = v.w;

        /// <summary>
    /// Sprite's border. X = left, Y = bottom, Z = right, W = top.
    /// </summary>
        Vector4 constentSize = Vector4.zero;
        constentSize.x = (Mathf.Abs(mTempPos[3].x - mTempPos[0].x) - (mTexture.width - br.x - br.z)) * (br.x / (float)(br.x + br.z));
        constentSize.y = (Mathf.Abs(mTempPos[3].y - mTempPos[0].y) - (mTexture.height - br.y - br.w)) * (br.y / (float)(br.y + br.w));
        constentSize.z = (Mathf.Abs(mTempPos[3].x - mTempPos[0].x) - (mTexture.width - br.x - br.z)) * (br.z / (float)(br.x + br.z));
        constentSize.w = (Mathf.Abs(mTempPos[3].y - mTempPos[0].y) - (mTexture.height - br.y - br.w)) * (br.w / (float)(br.y + br.w));

        if (mFlip == Flip.Horizontally || mFlip == Flip.Both)
        {
            //mTempPos[1].x = mTempPos[0].x + br.z;
            //mTempPos[2].x = mTempPos[3].x - br.x;
            mTempPos[1].x = mTempPos[0].x + constentSize.z;
            mTempPos[2].x = mTempPos[3].x - constentSize.x;

            mTempUVs[3].x = mOuterUV.xMin;
            mTempUVs[2].x = mInnerUV.xMin;
            mTempUVs[1].x = mInnerUV.xMax;
            mTempUVs[0].x = mOuterUV.xMax;
        }
        else
        {
            //mTempPos[1].x = mTempPos[0].x + br.x;
            //mTempPos[2].x = mTempPos[3].x - br.z;
            mTempPos[1].x = mTempPos[0].x + constentSize.x;
            mTempPos[2].x = mTempPos[3].x - constentSize.z;

            mTempUVs[0].x = mOuterUV.xMin;
            mTempUVs[1].x = mInnerUV.xMin;
            mTempUVs[2].x = mInnerUV.xMax;
            mTempUVs[3].x = mOuterUV.xMax;
        }

        if (mFlip == Flip.Vertically || mFlip == Flip.Both)
        {
            //mTempPos[1].y = mTempPos[0].y + br.w;
            //mTempPos[2].y = mTempPos[3].y - br.y;
            mTempPos[1].y = mTempPos[0].y + constentSize.w;
            mTempPos[2].y = mTempPos[3].y - constentSize.y;

            mTempUVs[3].y = mOuterUV.yMin;
            mTempUVs[2].y = mInnerUV.yMin;
            mTempUVs[1].y = mInnerUV.yMax;
            mTempUVs[0].y = mOuterUV.yMax;
        }
        else
        {
            //mTempPos[1].y = mTempPos[0].y + br.y;
            //mTempPos[2].y = mTempPos[3].y - br.w;
            mTempPos[1].y = mTempPos[0].y + constentSize.y;
            mTempPos[2].y = mTempPos[3].y - constentSize.w;

            mTempUVs[0].y = mOuterUV.yMin;
            mTempUVs[1].y = mInnerUV.yMin;
            mTempUVs[2].y = mInnerUV.yMax;
            mTempUVs[3].y = mOuterUV.yMax;
        }

        for (int x = 0; x < 3; ++x)
        {
            int x2 = x + 1;

            for (int y = 0; y < 3; ++y)
            {
                if (centerType == AdvancedType.Invisible && x == 1 && y == 1) continue;

                int y2 = y + 1;
                //Debug.Log("------------------------>");
                verts.Add(new Vector3(mTempPos[x].x, mTempPos[y].y));
                verts.Add(new Vector3(mTempPos[x].x, mTempPos[y2].y));
                verts.Add(new Vector3(mTempPos[x2].x, mTempPos[y2].y));
                verts.Add(new Vector3(mTempPos[x2].x, mTempPos[y].y));
                //Debug.Log(mTempPos[x].x + " " + mTempPos[y].y);
                //Debug.Log(mTempPos[x].x + " " + mTempPos[y2].y);
                //Debug.Log(mTempPos[x2].x + " " + mTempPos[y2].y);
                //Debug.Log(mTempPos[x2].x + " " + mTempPos[y].y);

                uvs.Add(new Vector2(mTempUVs[x].x, mTempUVs[y].y));
                uvs.Add(new Vector2(mTempUVs[x].x, mTempUVs[y2].y));
                uvs.Add(new Vector2(mTempUVs[x2].x, mTempUVs[y2].y));
                uvs.Add(new Vector2(mTempUVs[x2].x, mTempUVs[y].y));

                cols.Add(c);
                cols.Add(c);
                cols.Add(c);
                cols.Add(c);
            }
        }
    }
}

下面是对应的编辑器代码,ctrl+d,哈哈

//----------------------------------------------
//       UITextureCustom     
// 与NGUI图片中的九宫格(四边不动,缩放中间)相反,此脚本所在的图片精灵,四边缩放,中间不动
//  author:lin
// 只要有自然,人就没有自暴自弃的理由
//----------------------------------------------

using UnityEngine;
using UnityEditor;
using System.Collections.Generic;

/// <summary>
/// Inspector class used to edit UITextures.
/// </summary>

[CanEditMultipleObjects]
[CustomEditor(typeof(UITextureCustom), true)]
public class UITextureCustomInspector : UIBasicSpriteEditor
{
    UITextureCustom mTex;

    protected override void OnEnable ()
    {
        base.OnEnable();
        mTex = target as UITextureCustom;
    }

    protected override bool ShouldDrawProperties ()
    {
        if (target == null) return false;
        SerializedProperty sp = NGUIEditorTools.DrawProperty("Texture", serializedObject, "mTexture");
        NGUIEditorTools.DrawProperty("Material", serializedObject, "mMat");

        if (sp != null) NGUISettings.texture = sp.objectReferenceValue as Texture;

        if (mTex != null && (mTex.material == null || serializedObject.isEditingMultipleObjects))
        {
            NGUIEditorTools.DrawProperty("Shader", serializedObject, "mShader");
        }

        EditorGUI.BeginDisabledGroup(mTex == null || mTex.mainTexture == null || serializedObject.isEditingMultipleObjects);

        NGUIEditorTools.DrawRectProperty("UV Rect", serializedObject, "mRect");

        EditorGUI.EndDisabledGroup();
        return true;
    }

    /// <summary>
    /// Allow the texture to be previewed.
    /// </summary>

    public override bool HasPreviewGUI ()
    {
        return (Selection.activeGameObject == null || Selection.gameObjects.Length == 1) &&
            (mTex != null) && (mTex.mainTexture as Texture2D != null);
    }

    /// <summary>
    /// Draw the sprite preview.
    /// </summary>

    public override void OnPreviewGUI (Rect rect, GUIStyle background)
    {
        Texture2D tex = mTex.mainTexture as Texture2D;

        if (tex != null)
        {
            Rect tc = mTex.uvRect;
            tc.xMin *= tex.width;
            tc.xMax *= tex.width;
            tc.yMin *= tex.height;
            tc.yMax *= tex.height;
            NGUIEditorTools.DrawSprite(tex, rect, mTex.color, tc, mTex.border);
        }
    }
}

OK,怎么用,很简单,和UITexture一样,挂上去,sliced,设置border,size,其实还可以配合scale有更换的体验哦。

要改UISprite.cs的一样,代码是一样的

文章原创,想要转载的请注明转载字样和本地址链接,谢谢

版权声明:本文为博主原创文章,欢迎转载,但请注明原作者,谢谢。

相关文章推荐

NGUI纹理九宫格拉伸

我对九宫格的理解:九宫格是将一张图分为9个部分,在拉伸的时候针对这9个部分进行不同的拉伸处理。                      图1-1 九宫格 - 说明如图1-1 所示...

Unity3D开发(四):NGUI纹理九宫格拉伸

不论是游戏中的UI,还是应用中的UI,纹理九宫格拉伸都是必不可少的,因为采用这种拉伸方式,可以最大化的节省纹理资源,还能保证良好的表现效果! 1.原理 把纹理用4条线分割成...

NGUI使用心得之使用TexturePacker创建图集

1.什么是TexturePacker  TexturePacker是一款非常不错的图集制作工具,和NGUI自带的图集制作比较,其生成的图集更加紧凑,占用空间更加的小。下面图NGUI_Chat...

NGUI 九宫格

我对九宫格的理解:九宫格是将一张图分为9个部分,在拉伸的时候针对这9个部分进行不同的拉伸处理。                       图1-1 九宫格 - 说明 如...

Unity+NGUI性能优化方法总结

一共9招。

NGUI Sprite Type类型详解

下面是UISprite的Type截图,每一种Type都有不同的用途,在实际的项目中我们根据实际需求选择Type。   每一种Type的解释及适用场景: Simple:标准的S...

NGUI之UITexture

UITexture是纹理添加组件: Texture:     当你将纹理指定给该Texture属性时,一般都会有一个默认的Material材质被创建;当你不指定Texture属性时,程序会...
  • hppyW
  • hppyW
  • 2015-04-01 09:57
  • 1387

NGUI -- UISprite和UITexture的区别和选择

一. UISprite和UITexture的区别 NGUI中也有UITexture的概念,其功能和用途上和Sprite有很大的相似之处,都是为了显示一些图片资源。但是UITexture和UISpri...

NGUI 九宫格切图

UISprite 的 Type 选择 Sliced 选择Edit 中的 Border

Algorithm(三):快速排序

快速排序(Quicksort)是对冒泡排序的一种改进。由C. A. R. Hoare在1962年提出。它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)