How to apply alpha channel to jpg?

Hello,

I got all images like below from client.
Can anyone guide me how can i use into my project?
Also how can i use single image from given spritesheets?
any help is appreciated
TIA

alpha image

Why donā€™t you use a .png?

jpg havenā€™t alpha channel soā€¦ may be it possible?

its given from client. It reduce image size a lot.

Hi! It seems that you have the color texture without alpha and BW mask texture. You can get transparent result by using GLSL shader. Use those 2 texures as input uniforms and then multiply output alpha value with mask value.

@samithegreat thanks for reply.
can you point me to any ref code link?

I have no actual code ref for you. You could use GLProgramState object that is built in cocos2d-x. In the default fragment shader there is CC_Texture0 named uniform for default texture that is used by your sprite. Just set CC_Texture1 uniform to point into your mask texture and use fragment shader to combine them. Check out shader example from cocos samples. There you can find how to use GLProgramState and how to set uniforms for your shaders.

Here is a quick shader example to make color alpha blend.

void main()
{
vec3 color = texture2D(CC_Texture0, v_texCoord).rgb;
float mask = texture2D(CC_Texture1, v_texCoord).r;
gl_FragColor = vec4(color.r, color.g, color.b, mask);
}

1 Like

@samithegreat thanks for your reply.
So by your code and some other post,
I got it working by below code for v3.8.1, hope it will help someone in future .

Sprite *jpg = Sprite::create("img.jpg");
jpg->setPosition(viewSize / 2);
this->addChild(jpg, 99);

auto glp = GLProgram::createWithFilenames("jpg_alpha.vsh", "jpg_alpha.fsh");
auto glp_State = GLProgramState::getOrCreateWithGLProgram(glp);
glp_State->setUniformTexture("u_texture1", Sprite::create("img-alpha.jpg")->getTexture());

jpg->setGLProgramState(glp_State);

jpg_alpha.vsh

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

void main()
{
	gl_Position = CC_PMatrix * a_position;
	v_fragmentColor = a_color;
	v_texCoord = a_texCoord;
}

jpg_alpha.fsh

varying vec4 v_fragmentColor;	
varying vec2 v_texCoord;

uniform sampler2D u_texture1;

void main()
{
	vec3 color = texture2D(CC_Texture0, v_texCoord).rgb;
	float alpha_mask = texture2D(u_texture1, v_texCoord).r;
	gl_FragColor = vec4(color.rgb, alpha_mask);
}

Now my next step is to take single sprite from given spritesheets.
Can you help me on that too?
What can be the minimum way to do that?
I have a lot of spritesheets with lot of images added.
Thanks.

What program have you used to pack your sheets? There is SpriteFrameCache already built in that can load sprite sheets. I am not sure if it supports any other packer than TexturePacker (www.codeandweb.com/texturepacker). You need .plist file where image regions are defined and the actual image file.

After you have those you can use SpriteFrameCache to load them:
SpriteFrameCache::getInstance()->addSpriteFramesWithFile(ā€œPLIST FILEā€, ā€œIMAGE FILEā€);

Sprite is created from sheet by using createWithSpriteFrameName instead of create if you want it to use sheet texture.

@samithegreat
I normally use Texture Packer.
But Its given from client side without plist file.
So thats why i was asking, is there any other alternative?
like create plist from existing spritesheets easily?

Hi smitpatel88, I have followed your instructions but the results are not as good. Can you help me please? Below are two images that I used:
http://www.upsieutoc.com/image/IAQq2M
http://www.upsieutoc.com/image/IAQYWA

Thanks.

Does it even work?
Because your b.jpg your alpha-mask image is wrong. It should be invert.
Try this.

smitpatel88, It 's work, thank you very much :slight_smile:
If I use b.jpg alpha-mask image that I have post, what code shader do I have to use? Because itā€™s my homework, and Iā€™m not good at GLSL

Change gl_FragColor = vec4(color.rgb, alpha_mask); to gl_FragColor = vec4(color.rgb, 1.0 - alpha_mask);

Hi enrevol!, it 's work. Thank you so much :smiley: