您的位置:首页 > 移动开发 > Unity3D

【小松教你手游开发】【unity实用技能】NGUI字体描边

2016-11-19 17:15 711 查看
http://gad.qq.com/article/detail/7172155

NGUI的UILabel中实现字体的描边是通过以方形的方式对字体网格顶点偏移一定位置后作为其描边网格。以这种方式描边在边角处会生硬,描边不均匀问题,特别是在比较大的字体描边时偏移越大这种生硬,不均匀程度越明显。处理这种描边一可以通过改进shader的方式来做调整,这里我介绍林一种新的方式:以圆形方式对字体网格顶点偏移一定位置后作为其描边网格。

  具体修改是将UILabel 中的OnFill方法中:

// Apply an effect if one was requested

if (effectStyle != Effect.None)
{
        int end = verts.size;
        pos.x = mEffectDistance.x;
        pos.y = mEffectDistance.y;

        ApplyShadow(verts, uvs, cols, offset, end, pos.x, -pos.y);

        if (effectStyle == Effect.Outline)
        {
                offset = end;
                end = verts.size;

                ApplyShadow(verts, uvs, cols, offset, end, -pos.x, pos.y);

                offset = end;
                end = verts.size;

                ApplyShadow(verts, uvs, cols, offset, end, pos.x, pos.y);

                offset = end;
                end = verts.size;

                ApplyShadow(verts, uvs, cols, offset, end, -pos.x, -pos.y);
            }
}

  替换为如下代码:

// Apply an effect if one was requested
if (effectStyle != Effect.None)
{

        int end = verts.size;
        pos.x = mEffectDistance.x;
        pos.y = mEffectDistance.y;

       if (effectStyle != Effect.Outline) 
                ApplyShadow (verts, uvs, cols, offset, end, pos.x, -pos.y);
       else {

                float arcLength = 1.4142f ;

                float dr         = 1f;
                float r         = pos.x;
                float radian     = arcLength / r ;
                float tempR = 0;
                while(tempR < r){
                    int count         = (int)Math.Floor(Math.PI * 2 /radian);
                    float i = 0;
                    while (i < count) {
                        float angle = radian * i;
                        float x = tempR * (float)Math.Cos ((double)angle);
                        float y = tempR * (float)Math.Sin ((double)angle);
                        ApplyShadow (verts, uvs, cols, offset, end, x, y);
                        offset     = end;
                        end     = verts.size;
                        ++i;
                    }
                    tempR += dr;
                }

}
}

  最后的效果对比如下:



图一(调整后的效果)



图二(调整前的效果)

  圆形拓展网格对比方形扩展网格缺点就是圆形拓展方式获得新网格会比矩形多,具体增加的量与描边偏移量有一定关系,同时目前暂时不支持x和y的不同偏移,只支持x与y的统一偏移量。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐