How to apply shadder program on cocos2d::ui:Button

I am using a shadder program to gray out the Button .It is working perfectly on Sprite for scale9sprite i have created my custom class to override setGLProgram method it is working fine. For button i have created my custom class which override initRenderer and setGLProgram is is working but when i click it it is shown its own texture how can i solve it?

//CustomisedScale9Sprite.h

class CustomisedScale9Sprite : public cocos2d::ui::Scale9Sprite
{
public:
static CustomisedScale9Sprite createSprite(std::string fileName);
static CustomisedScale9Sprite
createSprite();
void setGLProgram(GLProgram *glprogram) override;

};

//CustomisedScale9Sprite.cpp

#include “CustomisedScale9Sprite.h”

CustomisedScale9Sprite CustomisedScale9Sprite::createSprite(std::string fileName)
{
CustomisedScale9Sprite
pReturn = new (std::nothrow) CustomisedScale9Sprite();
if ( pReturn && pReturn->initWithFile(fileName) )
{
pReturn->autorelease();
return pReturn;
}
CC_SAFE_DELETE(pReturn);
return NULL;
}

CustomisedScale9Sprite* CustomisedScale9Sprite::createSprite()
{
CustomisedScale9Sprite *pReturn = new (std::nothrow) CustomisedScale9Sprite();
if (pReturn && pReturn->init())
{
pReturn->autorelease();
return pReturn;
}
CC_SAFE_DELETE(pReturn);
return NULL;
}

void CustomisedScale9Sprite::setGLProgram(GLProgram *glprogram)
{
Node::setGLProgram(glprogram);
if(_scale9Image)
{
_scale9Image->setGLProgram(glprogram);
}
if(_scale9Enabled)
{
for( const auto &child: _protectedChildren )
{
child->setGLProgram(glprogram);
}
}
}

// CustomButton.h

class CustomButton : public cocos2d::ui::Button
{
public:
static CustomButton* createButton(const std::string& normalImage,
std::string selectedImage = “”,
std::string disableImage = “”,
cocos2d::ui::Button::TextureResType texType = cocos2d::ui::Button::TextureResType::LOCAL);
virtual void initRenderer() override;
void setGLProgram(GLProgram *glprogram) override;

};

//CustomButton.cpp
#include “CustomButton.h”
#include “CustomisedScale9Sprite.h”

CustomButton* CustomButton::createButton(const std::string &normalImage,
std::string selectedImage ,
std::string disableImage,
cocos2d::ui::Button::TextureResType texType)
{
CustomButton *btn = new (std::nothrow) CustomButton;
if(selectedImage.empty())
{
selectedImage=normalImage;
}
if(disableImage.empty())
{
disableImage=normalImage;
}
if (btn && btn->init(normalImage,selectedImage,disableImage,texType))
{
btn->autorelease();
return btn;
}
CC_SAFE_DELETE(btn);
return nullptr;
}

void CustomButton::initRenderer()
{
_buttonNormalRenderer = CustomisedScale9Sprite::createSprite();
_buttonClickedRenderer = CustomisedScale9Sprite::createSprite();
_buttonDisableRenderer = CustomisedScale9Sprite::createSprite();
_buttonClickedRenderer->setScale9Enabled(false);
_buttonNormalRenderer->setScale9Enabled(false);
_buttonDisableRenderer->setScale9Enabled(false);

addProtectedChild(_buttonNormalRenderer, -2, -1);//NORMAL_RENDERER_Z
addProtectedChild(_buttonClickedRenderer, -2, -1);//PRESSED_RENDERER_Z
addProtectedChild(_buttonDisableRenderer,-2, -1);//DISABLED_RENDERER_Z

}

void CustomButton::setGLProgram(GLProgram *glprogram)
{
Button::setGLProgram(glprogram);
_buttonNormalRenderer->setGLProgram(glprogram);
_buttonClickedRenderer->setGLProgram(glprogram);
_buttonDisableRenderer->setGLProgram(glprogram);
}

Hi, I had the same problem some time ago. You need to override

onPressStateChangedToPressed()
onPressStateChangedToNormal()
onPressStateChangedToDisabled()

methods and set the proper shader based on the state of the button. Just look into these methods and see how it is done there.

Best,
kds