解决NGUI中sprite的边缘会出现黑线的问题
来源:互联网 发布:nexus3.0 maven mac 编辑:程序博客网 时间:2024/06/08 09:05
新的项目中大量使用了将sprite镜像拼接的方式来做底板,结果同事发现有的时候拼的时候中间会出现一个莫名的黑缝,如图:
看了下贴图没啥问题,也不是因为贴图压缩的问题,但是这条黑缝总是存在,然后想到这条黑缝很可能是采用uv的时候将uv采到了sprite和其他图的接缝处,然后在跟着看了下NGUI计算uisprite的uv的代码,发现ngui的计算确实存在着严重的问题,NGUI是这样计算一个sprite四个顶点的uv的
static public Rect ConvertToTexCoords (Rect rect, int width, int height)
{
Rect final = rect;
if (width != 0f && height != 0f)
{
final.xMin = rect.xMin / width;
final.xMax = rect.xMax / width;
final.yMin = 1f - rect.yMax / height;
final.yMax = 1f - rect.yMin / height;
}
return final;
}
这段代码的计算方式完全是错误的,其中width和height是atals大图的尺寸,rect是sprite在atals大图上的区域,可能作者对uv采样的计算尤其是uv坐标的区间并不是十分详细的了解,当然这个很多人可能都不全然了熟于心。
这里是因为有几个概念没有明确:uv的坐标范围,texture的坐标范围,采样的概念。
首先uv的坐标范围是这样的
texel的uv以左上角为0 ,右下角为1,也就是说第一个像素中央位置的uv是0.17 0.17
再看一张texute图片的坐标范围
可以看出他们的坐标范围是不一样的,这样在采样贴图颜色的时候,会出现下面的情况
某些像素可能恰好采到边缘处,这样就会根据采样策略进行插值,点采样就直接去最近的像素,线性采样就取上下左右四个整数值加权平均。
回头看下ngui的算法,假设一个atlas的大图如下,左上角两个像素是一个sprite
当我们使用左上角的这个sprite的时候,按照ngui的算法,这个矩形的uv应该是
这样的话,对于我们的左上角和右下角的那两个顶点,当他们采样的时候,变落入了边界上,由于线性采样,就会在右边看到一个橘色和白色的混合平均色,即一条杂边。
如何解决?我们需要线性采样来保证中间像素的质量,但是对于边缘我们需要保证他们的uv严格落入sprite的区域而不能落入边界。
所以我修改了ngui这段计算uv的错误代码,修改后,这个sprite四角的uv成为下图,原理是把原先uv落入的区间(蓝色)缩短为新的区间(红色)。具体修改的代码因为项目代码的保密我就不贴了,但是具体的原理都在这里了。
看一下修改后的拼接效果,天衣无缝~~
其实这个问题早在上一个项目《暗黑血统》里面就遇到过多次,只是那时比较忙没细追究没去眼睛ngui代码,这次决定看了一下,其实就是个贴图采样的小问题,看来遇到问题还是要刨根问底才行
- 解决NGUI中sprite的边缘会出现黑线的问题
- NGUI中sprite出现透明边框(黑线)
- 使用NGUI制作UI时贴图出现黑线的问题
- Unity中NGUI出现边缘线条的解决办法
- ngui中Sprite,SlicedSprite,Tiled Sprite,FilledSprite的区别
- ngui中Sprite,SlicedSprite,Tiled Sprite,FilledSprite的区别
- 关于游戏图片出现黑线的问题
- 解决popupwindow中会出现的IllegalStateException问题
- NGUI中实现Sprite拖拽并复位的功能
- ActivityGroup出现黑线的困惑
- 基于GigE_Vision协议接收相机发送的数据包显示的图像中出现固定位置黑线的解决
- 关于cocos2d中tilemap移动时出现黑线的解决方案
- 关于cocos2d中fast tilemap出现黑线的解决方案
- 如何解决cocos2d-x显示瓦片地图黑线的问题
- 如何解决cocos2d-x显示瓦片地图黑线的问题
- 解决Cocos2d-X显示瓦片地图黑线的问题
- 解决Cocos2d-js 在使用 TiledMap时的黑线问题
- Unity的NGUI的 sprite的bug
- 对OC的理解 以及 OC的特性
- Android开发监听短信数据库
- STL之pair对象
- CMOS Sensor接口时序约束
- 自定义必填文本框的提示信息
- 解决NGUI中sprite的边缘会出现黑线的问题
- 红黑树的插入
- UVA 409 统计句子包含单词库中单词的种类数
- poj3261Milk Patterns(可重叠的k次最长重复子串)
- Node.js17 Express框架
- 802.11n相关技术详解
- 23设计模式之模板方法(TemplateMethod)
- java String转换成Date
- 一分钟看懂回调