解决NGUI中sprite的边缘会出现黑线的问题

新的项目中大量使用了将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代码,这次决定看了一下,其实就是个贴图采样的小问题,看来遇到问题还是要刨根问底才行

时间: 2024-11-03 22:08:11

解决NGUI中sprite的边缘会出现黑线的问题的相关文章

解决tableView中cell动态加载控件的重用问题

解决tableView中cell动态加载控件的重用问题 tableView的cell,有时候需要在运行时取得对应的数据后才能够动态的创建该cell中的控件并加载到该cell中,此时,你一定会遇到重用问题,即使你能做到该cell只根据数值加载了一回控件,你也没法保证不出现重用问题:) 效果(请注意查看,移动下面的格子时,上面出现了重用的问题) 源码: YXCell.h // // YXCell.h // YXTableView // // Copyright (c) 2014年 Y.X. All

eclipse javascript: 解决eclipse中Errors running builder JavaScript Validator的问题

解决eclipse中Errors running builder JavaScript Validator的问题具体错误信息:Errors occurred during the build. Errors running builder 'JavaScript Validator' on project解决这个问题,要就把JavaScript Validator去掉.去掉的方法是:选择一个项目--右键Properties--Builders(排二个)--点一下右则会有四项--取消第一项"Jav

解决ASP中Connection对像封装dll问题

     asp代码保密一直是令人头痛的问题,目前没有非常好的解决方案,无非用vb编译成dll,但工作量实在太大,于是一直苦苦寻求着另一种途径,本文详细介绍关于解决ASP中Connection对像封装dll问题的文章专题. 中午,突然灵感一发,"为什么不尝试用加密数据库?",通过对数据库设一个高强度的密码,然后用vb封装connection对像,将密码信息写在dll里,然后通过asp创建组件方式调用,就算人家拿了我的代码,也无法改动数据库! 于是,开始了一步步既痛苦又刺激的旅程.vb三

解决数据库中记录重复问题

解决|数据|数据库|问题|重复 解决数据库中记录重复问题 (By:aloxy) Jul 22, 11:19 --产品数据重复统计SELECT mc, userid, COUNT(mc) AS Expr1FROM chanpinGROUP BY mc, userid--将不重复的纪录插入新表newchanpinselect * into #Tmp1 from chanpingoselect min(ID) as autoID into #Tmp2 from #Tmp1 group by mc, u

如何在Fireworks中进行图片边缘加工?

在Fireworks中如何不借助特殊滤镜而创制艺术照片或图像边框?下面就为大家介绍如何在Fireworks中进行图片边缘加工 的具体方法,欢迎各位感兴趣的同仁们学习. 曾经使用过很多方法来实现.一种方法是在图片上画一个黑色的矩形,增加一个有织纹的白色边框,然后创建一个整个物体的遮罩组(mask group).它的效果很好,只是当有很多线条时,成型图像的 将画布的高和宽至少增加20像素.把它的颜色改为你所需要的背景色. 沿深青色图片外边画第一个矩形,什么颜色bing并不重要,因为它将被剪裁掉.按照

Oracle数据库如何搜集指定SQL的执行计划和解决过程中的ORA-00904错误

  Oracle 数据库如何搜集指定SQL的执行计划和解决过程中的ORA-00904错误 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处;否则请与本人联系,违者必究) 如何收集指定SQL的执行计划对开发人员来说非常重要的,这里记录下基础的收集方式,以便查阅和其他人参考. 1. 链接到sqlplus,如下图 2. 执行下面两个的命令之一 set autotrace on; (说明:打开自动分析统计,并显示SQL语句的运行结果) 3. 输入并执行要搜集执行计划的SQL语句

怎么解决Word2003中的打字覆盖问题

怎么解决Word2003中的打字覆盖问题 方法一 双击Word窗口最下面的状态栏中的"改写",当其呈灰色时即为插入状态. 方法二 按下Insert键,"改写"就会变成灰色.   word教程 Excel教程 PowerPoint教程  

使用jQuery快速解决input中placeholder值在ie中无法支持的问题

 本篇文章主要介绍了使用jQuery快速解决input中placeholder值在ie中无法支持的问题.需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http

解决JS中乘法的浮点错误的方法

 本篇文章主要介绍了解决JS中乘法的浮点错误的方法.需要的朋友可以过来参考下,希望对大家有所帮助 JS里做小数的乘法运算时会出现浮点错误,具体可以测试一下:     <script>  alert(11*22.9)  </script>    结果是251.89999999999998 而不是251.9     这个问题想必有很多人为之头痛.那么如何解决呢?在此给出解决办法.    1.    代码如下: <script>  alert(11*(22.9*10)/10)