NGUI之UILabel描边效果

项目中遇到了一些问题发现NGUI不一定能全部解决所有的问题,那么我就提供一些我们的解决方案。
正常的NGUI中的UILabel的描边实现方法是自己又生成了4个相同的字体分别放在原本字体的左上右上左下右下四个方向上来实现描边效果,这点我们可以通过调节Effect中的Outline的XY来看到他的实现方式。那么既然能看到实现方式也就是说这个描边一旦大于2左右也就能看到用来作为描边的背景字,这样往往达不到我们想要的效果。下面是解决的办法。
解决》我们使用同样的方法,只不过我们不是生成四个字体用来作为背景显示成描边,而是以四个顶点间的距离来计算,每个像素来生成一个字体。这里不用担心,即便生成再多的字体依然使用的是一个DrawCall,也就是一遍就能画完,这样我们用字来铺平中间的欠缺,就可以达到我们需要的效果了。

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);
 
                for(int i = 0;i<(pos.x*2);i++)
                {
                    offset = end;
                    end = verts.size;
                     
                    ApplyShadow(verts, uvs, cols, offset, end, pos.x - i, pos.y);
                }
 
                offset = end;
                end = verts.size;
 
                ApplyShadow(verts, uvs, cols, offset, end, pos.x, pos.y);
 
                for(int i = 0;i<(pos.y*2);i++)
                {
                    offset = end;
                    end = verts.size;
                     
                    ApplyShadow(verts, uvs, cols, offset, end, pos.x, pos.y - i);
                }
 
                offset = end;
                end = verts.size;
                 
                ApplyShadow(verts, uvs, cols, offset, end, pos.x, -pos.y);
 
                for(int i = 0;i<(pos.x*2);i++)
                {
                    offset = end;
                    end = verts.size;
                     
                    ApplyShadow(verts, uvs, cols, offset, end, pos.x-i, -pos.y);
                }
 
                offset = end;
                end = verts.size;
 
                ApplyShadow(verts, uvs, cols, offset, end, -pos.x, -pos.y);
 
 
                for(int i = 0;i<(pos.y*2);i++)
                {
                    offset = end;
                    end = verts.size;
                     
                    ApplyShadow(verts, uvs, cols, offset, end, -pos.x, pos.y-i);
                }
            }
        }


这段是UILable.cs中的脚本我进行了修改,方法很简单就是根据美两个顶点间的距离来生成一个字体用来背景显示成描边。
希望对后面学习的人有些帮助。


NGUI的UI边框流光效果可以通过使用UIHollowedTexture组件来实现。UIHollowedTexture是对UITexture进行魔改得到的组件,可以设置边框贴图,并且支持UV滚动。\[1\] 要实现流光效果,可以通过修改shader的参数来实现。在NGUI的渲染机制中,当渲染时会合并DrawCall,合并的是使用同一材质球的元素。NGUI会新建一个Material,并且在渲染时调用onRender回调函数,将这个新建的Material传递给我们,方便我们进行自定义操作。\[3\] 因此,我们可以在onRender回调函数中修改shader的参数,来实现流光效果。具体的实现方法可以参考相关的教程或者文档。\[3\] 需要注意的是,NGUI在维护以前的Unity项目时仍然很重要,所以对NGUI的了解也是有必要的。\[2\] #### 引用[.reference_title] - *1* [NGUI通用边框流光](https://blog.csdn.net/lzdidiv/article/details/88740159)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [NGUI相关----UITexture图片边缘流光效果](https://blog.csdn.net/blinkseed/article/details/48393501)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [NGUI的流光shader解决方案(一)(支持UITexture和使用图集的UISprite)](https://blog.csdn.net/jw5678/article/details/55002983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值