cocos2dx：如何将按钮的三张图片节省为一张

    在创建按钮的时候，按钮有三个状态：1、正常；2、被点击；3、不可用。    最常见的用法是，美术会做三个状态的按钮。     但是这样会不会太浪费？    因为这三个按钮只是颜色上有区别而已，而玩家最常见的其实就是正常和不可用状态下的按钮，而第二种状态的按钮其实并不特别关注。    cocos2dx里的精灵支持着色上的改变，于是，对于区分要求不是特别高的“被点击”的按钮，就可以用setColor方法来改变。看过精灵类源代码的使用者都能发现这个方法，这个方法很常用。    示例1：pSpirit->setColor(ccGRAY);//ccGRAY是引擎预定义的颜色常量。    示例2：pSpirit->setColor(ccc3(128,128,128));//ccc3是宏，里面的三个参数就是颜色的RBG了，可以自己调试颜色，或者让美术提供参数。    于是这样就可以节省一个“被点击”的按钮图片了，这通常能够为整个安装包缩减10K以上的体积，积少成多——在所有的地方都这样子节省吧，美术也能减少工作量哦。    但是，“不可用”的按钮怎么办呢？使用setColor的方法进行实验，发现不管如何设置，都不能达到那种“变灰”的那种味道。    为了节省资源和人力，其实可以给按钮构造方法的“disabled”参数传入一个NULL，但是这样做的结果就是，这个按钮调用setEnable()方法后，不会出现不可用的状态。    通过寻找资料，笔者找到一份网友写好的代码，实验之后可以正常使用：GraySprite.h

// 
Created by rekoo on 13-7-23.

#ifndef
__goddess__GraySprite__

#define
__goddess__GraySprite__

#include
"cocos2d.h"

#include
"cocos-ext.h"

USING_NS_CC;

USING_NS_CC_EXT;

class

 

GraySprite
: 

public

 

CCSprite

{

public

:

GraySprite();

~GraySprite();

 

bool

 

initWithTexture(CCTexture2D*
texture, 

const

 

CCRect& 
rect);

void

 

draw();

void

 

initProgram();

void

 

listenBackToForeground(CCObject
*obj);

 

static

 

GraySprite*
create(

const

 

char

 

*pszFileName);

 

};

#endif 

GraySprite.cpp

// 
Created by rekoo on 13-7-23.

#include
"GraySprite.h"

GraySprite::GraySprite()

{

}

GraySprite::~GraySprite()

{

}

GraySprite*
GraySprite::create(

const

 

char

 

*pszFileName)

{

GraySprite*
pRet = 

new

 

GraySprite();

if

 

(pRet
&& pRet->initWithFile(pszFileName))

{

pRet->autorelease();

}

else

{

CC_SAFE_DELETE(pRet);

}

 

return

 

pRet;

}

void

 

GraySprite::listenBackToForeground(CCObject
*obj)

{

setShaderProgram(NULL);

initProgram();

}

bool

 

GraySprite::initWithTexture(CCTexture2D*
texture, 

const

 

CCRect&
rect)

{

if

(
CCSprite::initWithTexture(texture, rect) )

{

 

CCSize
s = getTexture()->getContentSizeInPixels();

 

this

->initProgram();

 

return

 

true

;

}

 

return

 

false

;

}

void

 

GraySprite::initProgram()

{

 

const

  

GLchar
* pfrag =    "#ifdef GL_ES \n \

precision
mediump 

float

;
\n \

#endif
\n\

uniform
sampler2D u_texture; \n \

varying
vec2 v_texCoord; \n \

varying
vec4 v_fragmentColor; \n \

void

 

main(

void

)
\n \

{
\n \

float

 

alpha
= texture2D(u_texture, v_texCoord).a; \n \

float

 

grey
= dot(texture2D(u_texture, v_texCoord).rgb, vec3(0.299,0.587,0.114)); \n \

gl_FragColor
= vec4(grey, grey, grey,alpha); \n \

}
";

 

 

CCGLProgram*
pProgram = 

new

 

CCGLProgram();

pProgram->initWithVertexShaderByteArray(ccPositionTextureColor_vert,
pfrag);

setShaderProgram(pProgram);

pProgram->release();

 

CHECK_GL_ERROR_DEBUG();

 

getShaderProgram()->addAttribute(kCCAttributeNamePosition,
kCCVertexAttrib_Position);

getShaderProgram()->addAttribute(kCCAttributeNameColor,
kCCVertexAttrib_Color);

getShaderProgram()->addAttribute(kCCAttributeNameTexCoord,
kCCVertexAttrib_TexCoords);

 

CHECK_GL_ERROR_DEBUG();

 

getShaderProgram()->link();

 

CHECK_GL_ERROR_DEBUG();

 

getShaderProgram()->updateUniforms();

 

}

void

 

GraySprite::draw()

{

ccGLEnableVertexAttribs(kCCVertexAttribFlag_PosColorTex
);

ccBlendFunc
blend = getBlendFunc();

ccGLBlendFunc(blend.src,
blend.dst);

 

getShaderProgram()->use();

getShaderProgram()->setUniformsForBuiltins();

 

 

ccGLBindTexture2D(
getTexture()->getName());

 

#define
kQuadSize sizeof(m_sQuad.bl)

long

 

offset
= (

long

)&m_sQuad;

 

int

 

diff
= offsetof( ccV3F_C4B_T2F, vertices);

glVertexAttribPointer(kCCVertexAttrib_Position,
3, GL_FLOAT, GL_FALSE, kQuadSize, (

void

*)
(offset + diff));

 

diff
= offsetof( ccV3F_C4B_T2F, texCoords);

glVertexAttribPointer(kCCVertexAttrib_TexCoords,
2, GL_FLOAT, GL_FALSE, kQuadSize, (

void

*)(offset
+ diff));

 

diff
= offsetof( ccV3F_C4B_T2F, colors);

glVertexAttribPointer(kCCVertexAttrib_Color,
4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (

void

*)(offset
+ diff));

 

 

glDrawArrays(GL_TRIANGLE_STRIP,
0, 4);

 

CC_INCREMENT_GL_DRAWS(1);

}

    可以看到这个类继承了精灵类，并写了自己的构造方法，还重写了父类的draw方法。

   这个类该怎么使用呢？

    普通的写法就是，把“不可用”状态下的按钮精灵使用这个类进行创建，这样就会是一个灰色的精灵，因为它是精灵类的子类，所以它可以直接用在MenuItem构造方法里的参数里——于是，第三个按钮图片也省下来了。

    但是这个类有局限性，纹理打包技术是cocos2dx里经常会使用到的，很多图片都会使用纹理打包，而这些纹理，它并没有对应的构造方法，有的也是父类的，关键性的initProgram方法没法调用到。

    那么，我们有几个方案：

        方案1、修改这个类，让它重写精灵类的各种构造初始化方法；

        方案2、类型转换。

    方案1的工作量有些大，几乎把精灵类重新写了一遍，说不定还是直接去修改精灵类源码比较好。

    然后我们来看看方案2：

    示例：

    ((GraySprite*)pSprite)->initProgram();

    这样，就能够把一个精灵灰度化了，而且除了灰度，精灵本身没有改变什么。 

    想想看这个功能，还能够使用在什么地方吧——