# 2D Drawing with transparency

This topic is 2953 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi,

Got a minor issue here with rendering my 2D images. My image has transparency, but when rendering it isn't showing up. Unsure where i'm going wrong here or what to add to my code.
Any help would be greatly appreciated .

Image of the image i'm rendering, the middle section which is appearing black should be transparent:
[media]http://imageshack.us/photo/my-images/408/issue.png/[/media]

My Drawing code:
 glBindTexture(GL_TEXTURE_2D, texture); //Begin Drawing Quads glBegin(GL_QUADS); // Top-left vertex (corner) glTexCoord2i(0, 0); glVertex2i(x, y); // Bottom-left vertex (corner) glTexCoord2i(1, 0); glVertex2i( x + imageWidth, y); // Bottom-right vertex (corner) glTexCoord2i(1, 1); glVertex2i( x + imageWidth, y + imageHeight); // Top-right vertex (corner) glTexCoord2i(0, 1); glVertex2i(x, y + imageHeight); glEnd(); glLoadIdentity(); 

##### Share on other sites
Have you enabled alpha blending?

##### Share on other sites

Have you enabled alpha blending?

No, would that be:
glEnable(GL_ALPHA_TEST)?
glAlphafunc(?, ?)

I did try this earlier, but couldn't seem to get it working. Were would i place this is the code exactly? What happened last time when i tried this was that the rectangle didn't render at all.

##### Share on other sites
Here's the new code i have, still no effect on the transparency. Still getting that black square. Perhaps my placement of the enabling/diable of GL_ALPHA_TEST is wrong? Or i need something else?
 glBindTexture(GL_TEXTURE_2D, texture); glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GEQUAL, 0.5f); glBegin(GL_QUADS); // Top-left vertex (corner) glTexCoord2i(0, 0); glVertex2i(x, y); // Bottom-left vertex (corner) glTexCoord2i(1, 0); glVertex2i( x + imageWidth, y); // Bottom-right vertex (corner) glTexCoord2i(1, 1); glVertex2i( x + imageWidth, y + imageHeight); // Top-right vertex (corner) glTexCoord2i(0, 1); glVertex2i(x, y + imageHeight); glEnd(); glDisable(GL_ALPHA_TEST); glLoadIdentity(); 

##### Share on other sites
Right, got something to work with atleast;
Currently using:
 glEnable(GL_BLEND); glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA); 

I get a correct rendering of the square, only the outline is rendered. Great, but rendering then something else, that seconded image rendered becomes almost red, with the background clearing color. Which i don't want . Here's an image to see for yourself:
http://imageshack.us/photo/my-images/23/issueb.png/
However, using:

 glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 

Doesn't render anything at all. :/.
Unsure were i should proceed from here..

##### Share on other sites
For one thing, you aren't even setting up the color. You probably should call one of the glColor functions, such as glColor4ubv or glColor4fv. Set your alpha and
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); will work fine.

##### Share on other sites

For one thing, you aren't even setting up the color. You probably should call one of the glColor functions, such as glColor4ubv or glColor4fv. Set your alpha and
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); will work fine.

Just for clarity, this is the seconded image i'm rendering:
http://imageshack.us...836/towerz.png/.

Can you clarify what you mean by setting the color exactly? Won't the image have the color data in the texture? Perhaps i'm loading the image wrong?
I'm using a combination of SDL & OpenGl, and just really to make sure, i'll post up my image loading code. Just in-case :
 SDL_Surface *LoadedImage = NULL; SDL_Surface *OptimizedImage = NULL; GLuint texture; GLenum textureFormat = NULL; GLint numberOfColors; LoadedImage = IMG_Load(filename.c_str()); if (LoadedImage != NULL) { OptimizedImage = SDL_DisplayFormat(LoadedImage); SDL_FreeSurface(LoadedImage); } if (loadingTileSheet) { numberOfTiles = (OptimizedImage->w / tileWidth) + 1; } //Get the Number Of Channels in our SDL_Surface numberOfColors = OptimizedImage->format->BytesPerPixel; if (numberOfColors == 4) { if (OptimizedImage->format->Rmask == 0x000000ff) textureFormat = GL_RGBA; else textureFormat = GL_BGRA; } else if (numberOfColors == 3) //No Alpha Channel { if (OptimizedImage->format->Rmask == 0x000000ff) textureFormat = GL_RGB; else textureFormat = GL_BGR; } glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexImage2D(GL_TEXTURE_2D, 0, numberOfColors, OptimizedImage->w, OptimizedImage->h, 0, textureFormat, GL_UNSIGNED_BYTE, OptimizedImage->pixels); if (OptimizedImage) { //No need now for the SDL_SURFACE SDL_FreeSurface(OptimizedImage); } return texture; 

##### Share on other sites
Tried a few more things, mainly concerning alpha testing:
 glEnable(GL_ALPHA_TEST); glAlphaFunc(GL_GEQUAL, 0); 
With that on my rendering code, i don't get the black box surrounding my image, but what i do get is a half transparent image which isn't what i want.
To be specific, all i want is to get rid of the black box surrounding my image. Any pixels that are in images rendered that are transparent, i don't want them to be black but rather ignored.

Again, using the blending;
 glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 
That code for me renders nothing on-screen, only thing that seems to be working for me (With in regards to using blending functions) is:
 glEnable(GL_BLEND); glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA); 
But even that produces that same result as using the Alpha test, this "semi-transparent" image. *Screenshot below:
http://imageshack.us/photo/my-images/269/issuew.png/

Btw, you'll notice this new background. Just to make sure, i run this code on both just clearing the background a certain color i.e glClearColor & then with rendering this background image. Both tests gave me a semi-transparent image.

Hard to see in the screenshot, but the semi-transparent image is in the Green section of the background.

Honestly, bit clueless know to were i'm going wrong.

##### Share on other sites
I knew that someone might have had a similar (almost near identical issue).
Seems that the alpha channel wasn't being brought over,
http://www.gamedev.net/topic/518062-solved-sdl-png-transparency-with-opengl/

. Thank god!.
But as for one quick final small issue. Just wondering now what i have to-do in-between renders for example:

-I render my background
-Then Render the seconded Image now with transparency on-top, currently what i'm getting is background image squeezed into the size of the seconded Image being rendered (also rotated, because the seconded image using rotation.)

Image of what i'm getting:
http://imageshack.us/photo/my-images/836/newissue.png/

What should i be doing in-between the calls?

• ### Game Developer Survey

We are looking for qualified game developers to participate in a 10-minute online survey. Qualified participants will be offered a \$15 incentive for your time and insights. Click here to start!

• 17
• 14
• 13
• 20