第一种:
     修改 ccConfig.h   

将#define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 0 改为 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1

/** @def CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
If enabled, the texture coordinates will be calculated by using this formula:
– texCoord.left = (rect.origin.x*2+1) / (texture.wide*2);
– texCoord.right = texCoord.left + (rect.size.width*2-2)/(texture.wide*2);

The same for bottom and top.

This formula prevents artifacts by using 99% of the texture.
The “correct” way to prevent artifacts is by using the spritesheet-artifact-fixer.py or a similar tool.

Affected nodes:
– CCSprite / CCSpriteBatchNode and subclasses: CCLabelBMFont, CCTMXTiledMap
– CCLabelAtlas
– CCQuadParticleSystem
– CCTileMap

To enabled set it to 1. Disabled by default.

@since v0.99.5
*/
#ifndef CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL
#define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1
#endif

 

第二种:     

调用瓦片地图对应CCTexture2D的setAliasTexParameters接口。     

若调用之后还有黑线,则还调用 CCDirector::sharedDirector()->setProjection(kCCDirectorProjection2D);     

1、ETC1图片是android下通用的压缩纹理,几乎所有的android机器都支持,是opengles2.0的标准。不像pvrtc4只是部分powervr的显卡支持。

ETC1图片不支持半透明(有替代方案可以使etc1图片兼容半透明显示),内存占用只有正常RGBA8888的八分之一(一个像素0.5个字节),并且具备极高的加载速度。ETC1的图片大小只跟图片尺寸相关,在大小上无法媲美jpg或者png8的图片。

2、cocos2d-x早期使用android提供的ETC1Util来加载纹理,后面经过一次优化,改变成直接读取文件的加载方式。 也就是说ETC1文件前面16个字节是文件头,包含文件宽高等信息。 除开这16个字节,剩下的就是图片像素数据,这些数据可以直接传递给显卡使用glCompressedTexImage2D来创建纹理。

3、同样在这次优化中,加入了软件解压ETC1的功能,这样windows等桌面平台也可以使用ETC1的图片了(虽然没有任何优势可言)。但是实现有一些bug,导致不兼容非2的整次幂的图片。修改如下

[cpp]

  1. //if it is not gles or device do not support ETC, decode texture by software
  2.        int bytePerPixel = 3;
  3.        GLenum fallBackType = GL_UNSIGNED_BYTE;
  4.        /*bool fallBackUseShort = false;
  5.        if(fallBackUseShort)
  6.        {
  7.            bytePerPixel = 2;
  8.            fallBackType = GL_UNSIGNED_SHORT_5_6_5;
  9.        }
  10.        */
  11.        unsigned int stride = _width * bytePerPixel;
  12.        std::vector<unsigned char> decodeImageData(((stride + 3) &~ 3) * ((_height + 3) &~3));
  13.        etc1_decode_image(etcFileData + ETC_PKM_HEADER_SIZE, &decodeImageData[0], _width, _height, bytePerPixel, ((stride + 3) &~ 3));
  14.        //set decoded data to gl
  15.        glGenTextures(1, &_name);
  16.        glBindTexture(GL_TEXTURE_2D, _name);
  17.        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  18.        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  19.        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  20.        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, _width, _height, 0, GL_RGB, fallBackType, &decodeImageData[0]);
  21.        glBindTexture(GL_TEXTURE_2D, 0);
  22.        delete[] etcFileData;
  23.        etcFileData = NULL;
  24.        return true;

注意其中两句

std::vector<unsigned char> decodeImageData(((stride + 3) &~ 3) * ((_height + 3) &~3));

etc1_decode_image(etcFileData + ETC_PKM_HEADER_SIZE, &decodeImageData[0], _width, _height, bytePerPixel, ((stride + 3) &~ 3));

分配内存必须能够容纳下图片数据,而ETC1图片会进行4字节对齐(圆整),所以宽高不能直接使用原始图片数据。  当然,不修改的话对于2的整次幂的图片也是没有问题的,因为本身就是对齐的,不需要圆整了。

4、android下部分机器兼容非2的整次幂的etc1图片,但是同样也有部分机器不兼容。遇到非2的整次幂的图片会渲染错误甚至崩溃。所以android下使用etc1图片需要进行2的整次幂的扩展。如果大量零碎文件的话,考虑使用TexturePacker打包图片

5、etc1对透明图片的支持。  etc1不支持透明图片,同样cocos2d-x对etc1也不支持透明图片的显示。虽然图片格式上面不支持,但是我们可以通过技术手段间接达到透明etc1图片渲染的目的。详细内容可以参考这里 。

有两种方案可以选择,一种是通过Mali工具生成pkm文件时选择Create atlas,这样就生成了一张拼接在一起的纹理。这张纹理上半部分是原始图片(无alpha信息),下半部分是alpha信息图片。在渲染的时候使用特殊的shader进行渲染。这个改动是比较小的。

另一种方案是创建两张分离的图片,分别是原始图片和alpha图片。渲染时加载这两张纹理,然后alpha图片当做参数传递给原始图片的shader。

我使用的是第一种方案。修改后的shader如下(注意,这个shader是新增的,并且是只有这种打包的etc1图片才使用这个shader,未打包的无透明色的etc1图片和png图片依然使用原来的shader)  只需要修改像素着色器代码,顶点着色器代码不变。  由于现在etc支持透明显示了,所以bool CCTexture2D::initWithETCFile(const char* file)中m_bHasPremultipliedAlpha要置为false,开启alpha blend来渲染图片

[cpp]

  1. #ifdef GL_ES                
  2. precision lowp float;
  3. #endif                      
  4. varying vec4 v_fragmentColor;
  5. varying vec2 v_texCoord;
  6. uniform sampler2D CC_Texture0;
  7. void main()
  8. {
  9.     gl_FragColor = vec4(texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y)).xyz, texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y + 0.5)).r);
  10. }

 

6、使用etc1图片可以极大的减少内存,并且加快加载速度。  我做过一个简单的测试,80k的png8的图片加载需要消耗117ms,同样的etc1图片(经过扩展有1mb大小)加载消耗40ms。这个已经是极限情况。  一般来说同样大小的etc1图片加载速度要快5~10倍。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~下面新的研究成果~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

7、关于PremultipliedAlpha的理解。  cocos2d-x的CCTexture2D中有一个m_bHasPremultipliedAlpha的属性。我们使用TexturePacker中导出pvr图片时也有提示开启PVRImagesHavePremultipliedAlpha这个选项。  虽然PremultipliedAlpha就是图片的颜色在输出的时候已经预先乘以alpha色了,所以渲染的时候图片的RGB就需要再次乘以alpha色了,这个在一定程度上可以提高运行效率。所以TexturePacker推荐开启PremultipliedAlpha选项,XCode导出png图片的时候以及UIImage加载图片的时候都会使用PremultipliedAlpha。   这个有一点恶心的地方就是,我们无法通过一个图片属性判断它是否是是PremultipliedAlpha的,只能通过肉眼或者是一个并不准确的公式来判断。

我们还可以进一步去理解这个设置。一般来说,半透明图片渲染使用的是alpha blend 参见CCSprite::updateBlendFunc()这个函数。

[cpp]

  1. void CCSprite::updateBlendFunc(void)
  2. {
  3.     CCAssert (! m_pobBatchNode, “CCSprite: updateBlendFunc doesn’t work when the sprite is rendered using a CCSpriteBatchNode”);
  4.     // it is possible to have an untextured sprite
  5.     if (! m_pobTexture || ! m_pobTexture->hasPremultipliedAlpha())
  6.     {
  7.         m_sBlendFunc.src = GL_SRC_ALPHA;
  8.         m_sBlendFunc.dst = GL_ONE_MINUS_SRC_ALPHA;
  9.         setOpacityModifyRGB(false);
  10.     }
  11.     else
  12.     {
  13.         m_sBlendFunc.src = CC_BLEND_SRC;
  14.         m_sBlendFunc.dst = CC_BLEND_DST;
  15.         setOpacityModifyRGB(true);
  16.     }
  17. }

正常来说,半透明图片渲染使用的是 GL_SRC_ALPHA  GL_ON_MINUS_SRC_ALPHA这个选项 代表的意思就是: 源(图片)像素*源因子(源alpha) + 目标(屏幕)像素*目标因子(1-源alpha)。  通过这个公式可以达到渲染半透明图片的目的。

如果图片有PremultipliedAlpha,再使用这个公式就不对了,图片明显变暗,因为图片的rgb已经乘以alpha了,再乘一次图片自然就变黑一点。  这个时候渲染的公式就变为:

源像素 + 目标像素*(1-源alpha)。  虽然图片依然是半透明的,但是处理源像素时不再分别乘alpha了。

8、为什么要特意提这个属性呢?  因为ETC1图片在加载的时候默认开启了PremultipliedAlpha,一般不透明的图片处理起来没有问题(正常的etc1图片就是不透明的),但是参见上面我们的透明etc1图片渲染解决方案,实际图片在渲染的时候是可以达到半透明的效果的。所以我们有两个选择,一个是默认关闭PremultipliedAlpha,另一个是默认开启PremultipliedAlpha然后shader中分别把rgb乘以alpha。  具体是alpha blend效率高还是shader中效率高我还没有测试。

9、使用上面的shader在渲染的时候windows下正常,但是android下会出现大量的锯齿。一开始以为是mipmap没有开启的缘故,但是使用mipmap(后面会介绍)后,依然无法解决问题。后面发现cocos2d-x中shader默认使用的低精度浮点数

[cpp]

  1. #ifdef GL_ES                                \n\
  2. precision lowp float;                       \n\
  3. #endif                                      \n\

低精度浮点数有效位数因显卡而异,但是不高是肯定的。如果我们没有特殊的运算,低精度足够使用。但是一旦我们有*0.5之类的运算,那么低精度浮点数很容易丢失数据,那表现出来就是各种锯齿。  所以在新的shader代码中删除了这个指令。   另外某些文档说,使用低精度无助于效率提升,因为最终渲染的时候还是要转回中精度(中精度是默认选项,部分高级显卡支持高精度)

10、最终修改后的shader如下

顶点shader  (我们把部分运算移动到顶点shader中,而不是每个像素进行计算,这个可以提升运行效率)

[cpp]

  1. attribute vec4 a_position;
  2. attribute vec2 a_texCoord;
  3. attribute vec4 a_color;
  4. varying vec4 v_fragmentColor;
  5. varying vec2 v_texCoord;
  6. varying vec2 v_alphaCoord;
  7. void main()
  8. {
  9.     gl_Position = CC_MVPMatrix * a_position;
  10.     v_fragmentColor = a_color;
  11.     v_texCoord = a_texCoord * vec2(1.0, 1.0);
  12.     v_alphaCoord = v_texCoord + vec2(0.0, 0.5);
  13. }

像素shader

[cpp]

  1. varying vec4 v_fragmentColor;
  2. varying vec2 v_texCoord;
  3. varying vec2 v_alphaCoord;
  4. uniform sampler2D CC_Texture0;
  5. void main()
  6. {
  7.     vec4 v4Colour = texture2D(CC_Texture0, v_texCoord);
  8.     v4Colour.a = texture2D(CC_Texture0, v_alphaCoord).r;
  9.     v4Colour.xyz = v4Colour.xyz * v4Colour.a;
  10.     gl_FragColor = v4Colour * v_fragmentColor;
  11.     //gl_FragColor = vec4(texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y)).xyz, texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y + 0.5)).r);
  12. }

关于shader需要说明三点,在顶点shader中有这么一条指令  v_texCoord = a_texCoord * vec2(1.0, 1.0);   因为ETC1需要2的整次幂,所以我们的图片基本上都有扩展,那也就意味着会设置setTextureRect,如果设置了这个,那么a_texCoord就是我们指定的大小,所以这里去的是(1.0, 1.0),如果没有setTextureRect,那么a_texCoord就是全部的贴图大小,也就是两倍的正常大小,那么这个时候取的就应该是(1.0,  0.5)。  最终我的解决方法是所有的使用这个shader的图片都设置一下大小。这样shader就统一了。

在像素着色器代码中有v4Colour.xyz = v4Colour.xyz * v4Colour.a;  这个就跟上面说的PremultipliedAlpha有关系。我们在shader中预先乘以alpha。

这个shader的使用条件,只有带透明的etc1图片(通过工具导出时进行了自动拼接)才能使用这个shader进行渲染,否则都会出错。这个我们要在代码中进行判断。

 

11、关于图片拼接时的黑边问题。
这个可以单独开一个话题,但是由于是我处理ETC1图片时遇到的,所以统一都在这里解析了。 网上经常看到有人说图片拼接的时候有黑边,比如tilemap地图拼接的时候。这个分三种情况,一种是最简单的图片对齐计算有问题,拼接的时候由于浮点数计算多了一个像素或者是少了一个像素,这个计算的时候有意向做移动一个像素就可以解决。
第二种是图片导出的问题(使用TexturePacker),不仅仅是地图拼接黑边,可能其他资源也会有黑的虚线,这个在导出的时候选择–border 2 –shape 2 (TexturePacker中有对应的设置,默认为0,但是我之前手欠给修改成了0)。 另外还有一个Exclude选项也是用来解决这个问题的。
第三种是最本质的问题,比如我碰到的使用png图片渲染正常,但是使用etc1图片渲染就出现黑边,若隐若现,一拖动界面就出现。 这个可以在纹理创建的时候设置这个来解决(png等图片创建的时候有设置,但是etc1没有)

[cpp]

  1. glTexParameteri(target, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  2.         glTexParameteri(target, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

一般来说,纹理通过

[cpp]

  1. if (isMipmapped) {
  2.             /* Enable bilinear mipmapping */
  3.             glTexParameteri(target, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);
  4.         } else {
  5.             glTexParameteri(target, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  6.         }

这个来进行抗锯齿等操作,但是如果在图片边缘的时候计算就会有问题,因为外部没有像素了,而图片本身像素为半透明,那么计算的时候很有可能计算出黑色,那么就显示出黑边了。

12、最后要说下mipmap,mipmap就是图片如果有缩小,那么渲染的时候使用小的图片(比如256*256的图片如果缩小一半来渲染,就取128*128的图片),这个小的图片可以直接使用函数生成

[cpp]

  1. void CCTexture2D::generateMipmap()
  2. {
  3.     CCAssert( m_uPixelsWide == ccNextPOT(m_uPixelsWide) && m_uPixelsHigh == ccNextPOT(m_uPixelsHigh), “Mipmap texture only works in POT textures”);
  4.     ccGLBindTexture2D( m_uName );
  5.     glGenerateMipmap(GL_TEXTURE_2D);
  6.     m_bHasMipmaps = true;
  7. }

也可以在生成图片的时候直接创建mipmap的图片。 etc1貌似不支持内存中直接生成。 开启mipmap进行渲染会多30%左右的内存开销,但是如果图片缩小渲染的话,会提高运行效率,并且会提高画质(直接缩小可能某些像素通过11中提到的纹理过滤计算起来会有偏差,但是使用预先缩小的图片就可以达到自己满意的效果)。 而etc1的话在创建图片的时候开启mipmap会多创建n张缩小纹理,对应文件体积就增大了,最大会增加30%~50%。 这个我们看情况使用,部分核心的重要的图片开启mipmap。 加载图片成为mipmap比较简单 glTexImage2D(GL_TEXTURE_2D, 0, s_compressFormat_RGBA, (GLsizei)pixelsWide, (GLsizei)pixelsHigh, 0, GL_RGBA, GL_UNSIGNED_BYTE, data); 这个是提交纹理数据的函数,其中第二是mipmap等级,穿n就对应n级的mipmap,也就是说,如果pkm的etc1图片要支持mipmap,就需要自己写代码,另加载1~n张纹理,然后使用glTexImage2D这个函数把这n张纹理提交给显卡。

13、cocos2d-x中对etc1的支持比较初级。 既没有透明色的支持,也不支持mipmap。
etc1图片格式有两种,一种是pkm,这种是简单的etc1格式,现在cocos2d-x支持的就是这种格式。另外一种是ktx格式,这个是opengles组织提供的官方格式。可以把多个mipmap打包到一个ktx文件里面。 现在我的代码里面使用的就是ktx格式。使用ktx图片需要到这里下载ktx的loader库,把这个库加入到cocos2d-x中,核心加载代码如下

[cpp]

  1. bool CCTextureETC::initWithKtxData(etc1_byte* pData, int len)
  2. {
  3.     GLuint texture = 0;
  4.     GLenum target;
  5.     GLboolean isMipmapped;
  6.     GLenum glerror;
  7.     GLubyte* pKvData;
  8.     unsigned int  kvDataLen;
  9.     KTX_dimensions dimensions;
  10.     KTX_error_code ktxerror;
  11.     KTX_hash_table kvtable;
  12.     GLint sign_s = 1, sign_t = 1;
  13.     ktxerror = ktxLoadTextureM(pData, len, &_name, &target, &dimensions, &isMipmapped, &glerror, &kvDataLen, &pKvData);
  14.     if (KTX_SUCCESS == ktxerror) {
  15.         _width = dimensions.width;
  16.         _height = dimensions.height;
  17.         ktxerror = ktxHashTable_Deserialize(kvDataLen, pKvData, &kvtable);
  18.         if (KTX_SUCCESS == ktxerror) {
  19.             GLubyte* pValue;
  20.             unsigned int valueLen;
  21.             if (KTX_SUCCESS == ktxHashTable_FindValue(kvtable, KTX_ORIENTATION_KEY,
  22.                 &valueLen, (void**)&pValue))
  23.             {
  24.                 char s, t;
  25.                 if (_snscanf((const char*)pValue, valueLen, KTX_ORIENTATION2_FMT, &s, &t) == 2) {
  26.                     if (s == ‘l’) sign_s = -1;
  27.                     if (t == ‘d’) sign_t = -1;
  28.                 }
  29.             }
  30.             ktxHashTable_Destroy(kvtable);
  31.             free(pKvData);
  32.         }
  33.         // 加载成功
  34.         if (isMipmapped) {
  35.             /* Enable bilinear mipmapping */
  36.             glTexParameteri(target, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);
  37.         } else {
  38.             glTexParameteri(target, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  39.         }
  40.         glTexParameteri(target, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  41.         glTexParameteri(target, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  42.         glTexParameteri(target, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  43.                 glBindTexture(target, 0);// 这句很重要,否则会有一些诡异的渲染问题
  44.         return true;
  45.     }
  46.     return false;
  47. }

转载自: http://blog.csdn.net/langresser_king/article/details/9339313

,