Cocos2d-x 3.0心得(01)-图片加载与混合模式

时间:2023-02-09 13:57:34

最近开始用cocos2dx 3.0做东西,略有心(cao)得(dian),稍微作下记录吧。

v3.0相对v2.2来说,最引人注意的,应该是对触摸层级的优化,和lambda回调函数的引入(嗯嗯,不枉我改了那么多类名。话说,每次cocos2dx大更新,总要改掉一堆类名函数名Cocos2d-x 3.0心得(01)-图片加载与混合模式)。这些特性应该有不少人研究了,所以今天说点跟图片有关的东西。


v3.0在加载图片方面也有了很大改变,只不过是藏在水下的,不到出问题的时候就不容易发觉。

简单来说,v2.2和之前的版本,在iOS上,cocos2dx是利用原生的UIImage来加载图片,png、jpg之类的。大致的步骤:先用UIImage加载图片,再创建一个渲染环境并提供一个buffer,作为渲染的缓存,然后把UIImage(包含的CGImage)绘制到这个环境中,这时候buffer里面就是图片的像素数据了,可以用来创建gl纹理了。

v3.0不再用iOS原生库加载图片,而是用了第三方的libpng、libjpeg等等库,在cocos2d/external下面能找到。新的方式不需要中间建渲染环境绘制的步骤,而是直接从图片文件解析到buffer,然后就能创建gl纹理。

这个修改,不管是从效率还是代码一致性来看,都是一件好事。不过相对的,也带来了一些不习惯的东西。

用v3.0做粒子会发现,用相同的设置,相同的图片,以前好端端的效果,到了新版本下面变成了一堆色块。查了一阵,最后把粒子的混合模式(BlendFunc),从src = GL_ONE,dst = GL_ONE,改成src = GL_SRC_ALPHA,dst = GL_ONE,结果就恢复正常了。

原因也不复杂。首先,我们使用的图片是一张纯白的、但又带半透明的图片,Cocos2d-x 3.0心得(01)-图片加载与混合模式也就是,图片的RGB值是全255,但Alpha则是0 ~ 255,根据每个像素的透明程度而定。在任何一个看图软件上,这张图都是中间白色、往四周逐渐变透明的亮度图,因为有alpha通道作半透明混合。但在程序上,src = GL_ONE表示忽略掉图片的alpha,直接使用RGB值来跟目标混合,由于图片的RGB是全255,所以渲染结果就成了全白的色块。改成src = GL_SRC_ALPHA,才会用图片alpha对RGB进行调制,得到正确的结果。

嗯,那为什么以前没问题?因为以前加载图片,中间有一个从CGImage绘制到buffer的步骤,这个步骤里,实际上已经用图片的alpha对RGB进行了调制,所以buffer里面的RGB已经不是图片原始的RGB了,结果肯定就不一样了。顺便,如果用v2.2或者之前的版本,发现有些图片或者粒子,在iOS上面显示正常,在Android上面是色块,很可能跟这有关系,不妨试试改混合模式。

要想保留src = GL_ONE的设置,也不是没办法。对图片作预乘alpha(Premultiplied Alpha),也就是,用图片的alpha先对RGB进行调制,然后存回RGB中,这样的图片,就可以继续用src = GL_ONE了。能作这种处理的工具,嗯,TexturePacker就是一个。


好了,关于混合模式,最后再来吐槽一下cocos2dx和cocosbuilder。

1、cocosbuilder里,图片加载用的应该是原生库,所以用cocos2dx v3.0,在builder上没有所见即所得的效果。

2、cocosbuilder里,如果CCSprite的混合模式设为src = one,dst = one - src alpha,那么在导出ccbi时,会忽略混合模式这一项Cocos2d-x 3.0心得(01)-图片加载与混合模式坑爹哪!省这几个字节有半毛钱用?

3、cocos2dx 3.0,从cocosbuilder解析粒子的时候,当解析到纹理这一步,会偷偷改掉混合模式Cocos2d-x 3.0心得(01)-图片加载与混合模式嗯哼,实际上,在对精灵和粒子设置Texture的时候,都能看到修改混合模式的身影。不用说,这绝壁是为了解决像上面那种混合的问题。但是对于那些想自己控制混合方式的人来说……反正,我是在美术跟我抱怨n次改了粒子混合模式没什么效果之后,才发现的Cocos2d-x 3.0心得(01)-图片加载与混合模式