Unity3d插件NGUI拓展修改——简单实现反向九宫格拉伸UISprite

最新推荐文章于 2023-02-16 11:30:24 发布

原创

最新推荐文章于 2023-02-16 11:30:24 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#NGUI #Unity #Unity3d #新手指引 #新手引导

这篇博客介绍了如何在Unity3d中利用NGUI插件，通过修改UISprite实现反向九宫格拉伸效果，以解决全屏背景中显示特定形状时的资源效率问题。作者分享了添加新类型ReverseSliced的实现过程，并提供了代码示例，展示了500x500 Sprite仅用156x156图集大小实现的成果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近这段时间在公司负责开发新手指引功能，要实现一个铺满屏幕的黑底中只露出一个可操作的圆形的显示效果，考虑到这个圆形可能出现在屏幕的任何位置，如果想确保铺满屏幕的话需要使用的图片将会很大，为了实现这么一个显示效果使用这么大的图集资源显然是不可取的。所以我们开始使用的是一张有圆形空洞的矩形图片加上四张拉伸放大的黑色图片拼接出这个效果，但是当打包到手机平台时图片间的边缘会出现很明显的缝隙，显然不是我们想要的效果，这时我想到了NGUI的UISprite自带的九宫格切割效果，决定尝试可以修改UISprite来实现我称之为“反向九宫格”的效果。（PS：由于公司项目选用的是NGUI 2.7.0的老版本所以本次实现也是基于这个版本。但是我想思路是共通的。希望可以帮助到有需要的人。）

说干就干，首先在UISprite里的Type枚举添加一个新类型ReverseSliced，并修改OnFill函数和border，在border的get方法中添加了一个ReverseSliced的条件

public enum Type
{
    Simple,
    Sliced,
    Tiled,
    Filled,
    ReverseSliced,
}

public override void OnFill (BetterList<Vector3> verts, BetterList<Vector2> uvs, BetterList<Color32> cols)
{
    switch (type)
    {
        case Type.Simple:
	SimpleFill(verts, uvs, cols);
	break;

	case Type.Sliced:
	SlicedFill(verts, uvs, cols);
	break;

	case Type.Filled:
	FilledFill(verts, uvs, cols);
	break;

	case Type.Tiled:
	TiledFill(verts, uvs, cols);
	break;

	case Type.ReverseSliced:
	ReverseSlicedFill(verts, uvs, cols);
	break;
}

/// <summary>
/// Sliced sprites generally have a border.
/// </summary>

public override Vector4 border
{
    get
    {
        if (type == Type.Sliced || type == Type.ReverseSliced)
        {
            UIAtlas.Sprite sp = GetAtlasSprite();
            if (sp == null) return Vector2.zero;

            Rect outer = sp.outer;
            Rect inner = sp.inner;

            Texture tex = mainTexture;

            if (atlas.coor