How do I draw a transparent or semi-transparent rectangle on

SDL Development
1

Question also on Stack Overflow (http://stackoverflow.com/questions/35398586/how-do-i-draw-a-transparent-or-semi-transparent-rectangle-on-top-of-an-opaque-on).

Here’s my code to draw SDL_Rect objects rect and rect2:

Code:

#include <iostream>
#include <SDL2/SDL.h>

int main(){
	SDL_Window *window=		SDL_CreateWindow("Test", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 640, 480, SDL_WINDOW_SHOWN);
	if(window == 0)
		std::cout << SDL_GetError() << std::endl;

	SDL_Renderer *renderer= SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED | SDL_RENDERER_PRESENTVSYNC);
	if(renderer == NULL)
		std::cout << SDL_GetError() << std::endl;

	SDL_Rect rect;
	rect.x=		100;
	rect.y=		100;
	rect.w=		100;
	rect.h=		100;

	SDL_Rect rect2;
	rect2.x=	150;
	rect2.y=	150;
	rect2.w=	100;
	rect2.h=	100;

	while(true){
		Uint8 r,g,b,a;

		r=	32;
		g=	32;
		b=	32;
		a=	255;
		if(SDL_SetRenderDrawColor(renderer, r, g, b, a) == -1)
			std::cout << SDL_GetError() << std::endl;
		if(SDL_RenderClear(renderer) == -1)
			std::cout << SDL_GetError() << std::endl;

		r=	255;
		g=	255;
		b=	255;
		a=	255;
		if(SDL_SetRenderDrawColor(renderer, r, g, b, a) == -1)
			std::cout << SDL_GetError() << std::endl;
		if(SDL_RenderFillRect(renderer, &rect) == -1)
			std::cout << SDL_GetError() << std::endl;

		r=	100;
		g=	100;
		b=	100;
		a=	0;
		if(SDL_SetRenderDrawColor(renderer, r, g, b, a) == -1)
			std::cout << SDL_GetError() << std::endl;
		if(SDL_RenderFillRect(renderer, &rect2) == -1)
			std::cout << SDL_GetError() << std::endl;

		SDL_RenderPresent(renderer);
	}

	return 0;
}

While I can draw rect to SDL_Renderer object renderer just fine, if I add rect2 it is always opaque, blocking view of rect. Even though I set rect2's alpha to 0, it still shows up opaque, blocking rect from view.

How do I fix this so rect2 is more transparent?

2

SDL_SetRenderDrawBlendMode(renderer, SDL_BLENDMODE_BLEND)

3

Code:
Uint8 r,g,b,a;

r = 0;
g = 0;
b = 0;
a = 255;

if(SDL_SetRenderDrawColor(this->renderer, r, g, b, a) < 0) {
    std::cout   << "[SDL]: Could not set the draw color!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

if(SDL_RenderClear(this->renderer) < 0) {
    std::cout   << "[SDL]: Could not clear the renderer!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

r = 0;
g = 128;
b = 128;
a = 255;

if(SDL_SetRenderDrawColor(this->renderer, r, g, b, a) < 0) {
    std::cout   << "[SDL]: Could not set the draw color!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

if(SDL_RenderFillRect(this->renderer, &this->rect) < 0) {
    std::cout   << "[SDL]: Could not draw the rectangle!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

r = 255;
g = 0;
b = 0;
a = 128;

if(SDL_SetRenderDrawColor(this->renderer, r, g, b, a) < 0) {
    std::cout   << "[SDL]: Could not set the draw color!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

if(SDL_RenderFillRect(this->renderer, &this->rect2) < 0) {
    std::cout   << "[SDL]: Could not draw the rectangle!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

r = 255;
g = 255;
b = 255;
a = 128;

if(SDL_SetRenderDrawColor(this->renderer, r, g, b, a) < 0) {
    std::cout   << "[SDL]: Could not set the draw color!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

if(SDL_RenderDrawLine(this->renderer, 100, 100, 250, 250) < 0) {
    std::cout   << "[SDL]: Could not draw the line!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

if(SDL_RenderDrawLine(this->renderer, 200, 150, 150, 200) < 0) {
    std::cout   << "[SDL]: Could not draw the line!"<< std::endl
                << "[SDL]: " << SDL_GetError() << std::endl;
}

SDL_RenderPresent(this->renderer);

Result:
[Image: http://i.imgur.com/uoDdWOo.png ]

4

https://wiki.libsdl.org/SDL_SetRenderDrawBlendMode

5

Set .a to 128 = 50% transparent.
Set .a to 255 = 0% transparent.
Set .a to 0 = 100% transparent. (Invisible.)

6

NewbProgramming wrote:

SDL_SetRenderDrawBlendMode(renderer, SDL_BLENDMODE_BLEND)

Where in my program would I put this line of code?

7

After creating the renderer, or before you want the blending mode active when you’re rendering.