draw_set_blend_mode() - Iluminação fraca

A pedidos, estou postando este tutorial aqui.


Eu vou ensinar a como fazer efeito de iluminação fraca (onde um objeto está, fica claro, e o resto um pouco escurecido ou totalmente preto) (veja o resultado final nas imagens abaixo) usando a função draw_set_blend_mode(). Primeiro, vou explicar como ela funciona.

Deixando em volta preto:

Deixando em volta escurecido:

(Clique para ampliar)


A função draw_set_blend_mode() mexe com o rgb (red, green, blue/vermelho, verde, azul) da imagem. Existem quatro argumentos que podem ser usados:

bm_normal: deixa normal - não muda nada, você tem que colocar isso depois do draw em que usou o blend para voltar ao normal e não afetar os outros draws.
bm_add: o rgb da imagem afetada pelo blend é somado aos das imagens que estiverem atrás dela - se a imagem atrás tiver (128, 0, 192), e a com blend (128, 64, 255), o resultado será (255, 64, 255) (o máximo é 255);
bm_subtract: o rgb da imagem afetada pelo blend é subtraído dos das imagens que estiverem atrás, usando para r, g e b a equação R = A-(A*B/255), onde A = r/g/b da imagem de trás, B = r/g/b da imagem com blend, e R = r/g/b resultante - se a imagem atrás tiver (128, 64, 128) e a com o blend (64, 128, 64), o resultado será (95, 31, 95) (mais à frente, explicarei o porque dessa equação);
bm_max: Não funciona do jeito que eu pensava, tentarei descobrir e postarei...

Seguem-se uma tabela e imagens para esclarecer qualquer dúvida que sobrou (uma aplicação do ditado "entendeu ou eu preciso desenhar?").

Blend mode	RGB da imagem atrás	RGB da imagem com blend (da frente)	Resultado
bm_normal	(128, 192, 192)	(255, 64, 128)	(255, 64, 128)
bm_add	(128, 0, 192)	(128, 64, 255)	(255, 64, 255)
bm_subtract	(128, 64, 128)	(64, 128, 64)	(95, 31, 95)

[imagens para esclarecer dúvidas - coming soon]


Explicação da equação do bm_subtract:

R = A-(A*B/255)

A = r/g/b de trás
B = r/g/b com blend
R = r/g/b resultante

Não é tão complicado assim. É só uma aplicação da regrinha de três.

A cor com blend (B) corresponde a uma porcentagem. 255 = 100%, 0 = 0%.
Então, será subtraído da cor de trás (A) uma porcentagem de si mesma equivalente à cor com blend (B). Simples, não? Não?

Ex.: Se o 'r' da cor com blend for 64, isso será equivalente a um pouquinho mais que 25% (se as cores fossem até 256, 64 seria exatamente 1/4, 25%, como vão até 255, 64 é 25,098...%). Então, se o 'r' da cor de trás for 128, será subtraído dele 25,098...% (31,...), resultando em 95,..., e como só se usam números inteiros para as cores, é arredondado para baixo - 95.

Regra de três:

r/g/b de trás	r/g/b com blend
A	255
x	B

Ou seja,
255x = A*B
x = A*B/255
R = A - x
R = A - (A*B/255)

Se matemática não é o seu forte, você não precisa saber exatamente como o bm_subtract funciona, é só saber que ele escurece a imagem, quanto maiores os valores de r, g e b, mais escurece.





Agora, vamos colocar isso pra funcionar.

Lembrando que rgb: (0, 0, 0) = preto, e (255, 255, 255) = branco, para escurecer precisamos diminuir os valores (bm_subtract).

Então, crie um sprite de uma bola com degradê de preto para cinza claro (se quiser que em volta fique apenas escurecido) ou de preto para branco (se quiser que em volta fique totalmente preto), deixando o preto no meio e o cinza/branco em volta:

1. Crie um novo sprite;
   
2. Deixe ele do tamanho que você quer que seja a bola (o alcance da luz);
   
3. Centralize a origem (Origin) apertando o botão "center" na janela do sprite (veja a imagem abaixo);
   
4. Na edição da imagem vá no menu Image > Gradient Fill (ou shift+ctrl+G), na janela que aparecer deixe a primeira cor como cinza claro (na janela de escolha de cores aperte "Definir cores personalizadas" e anote os valores de vermelho, verde e azul, serão importantes depois) ou branco (os valores serão 255, 255, 255), e a segunda cor como preto, e selecione o 6º quadradinho (na direita de baixo) e aperte OK).

[imagem do botão "center" - coming soon]


Sendo que no centro a bola é preta (0, 0, 0), não subtrairá nada, deixando normal. Já em volta, que é branco/cinza ((255, 255, 255) ou quase), vai diminuir tudo para 0 ou quase, deixando preto ou escurecido.


Agora, no evento draw do objeto (que será) iluminado, coloque:

Código:

draw_sprite(sprite_index, image_index, x, y); // Desenha o sprite do objeto (uma vez que há eventos no draw, o sprite do objeto não aparece)

draw_set_blend_mode(bm_subtract); // O rgb do que for desenhado daqui para frente vai ser subtraído do rgb do resto

// Vou explicar o resto do código depois
draw_sprite(nome do sprite da bola em degradê, 0, x+sprite_width/2, y+sprite_height/2);

draw_set_color(make_color_rgb(vermelho, verde, azul));
draw_rectangle(0, 0, room_width, y+sprite_height/2-(altura da bola/2), false);
draw_rectangle(0, y+sprite_height/2+(altura da bola/2), room_width, room_height, false);
draw_rectangle(0, y+sprite_height/2-(altura da bola/2), x+sprite_width/2-(largura da bola/2), y+sprite_height/2+(altura da bola/2), false);
draw_rectangle(x+sprite_width/2+(largura da bola/2), y+sprite_height/2-(altura da bola/2), room_width, y+sprite_height/2+(altura da bola/2), false);

draw_set_blend_mode(bm_normal);

Agora, a explicação:

draw_sprite(nome do sprite da bola em degradê, 0, x+sprite_width/2, y+sprite_height/2);

Nos valores de x e y, eu coloquei (x+sprite_width/2, y+sprite_height/2). Vai funcionar se a origem do sprite do personagem for (0, 0). Desse jeito, vai desenhar o sprite da bola (que tem a origem no centro) exatamente no centro do personagem (posição dele mais metade do tamanho). Se a origem do seu objeto estiver centralizada, mude todos os "x+sprite_width/2" e "y+sprite_height/2" do código para "x" e "y". Se for em alguma outra posição, você terá que descobrir os valores que deixarão centralizado.

Agora, a última parte, para desenhar retângulos em volta e escurecer/empretecer todo o resto (eles também serão afetados pelo blend bm_subtract):

draw_set_color(make_color_rgb(vermelho, verde, azul)); // Lembra daqueles valores que eu disse para você anotar quando estava criando a bola em degradê pois seriam importantes? Coloque-os aqui. Assim, a cor usada para desenhar os retângulos será a mesma das bordas da bola.

Daqui pra baixo, desenha os retângulos, o "false" no final de cada um deles significa que serão preenchidos (false para "outline" (algo tipo "linha de fora"), que se fosse true faria o retângulo ter só as bordas, vazio por dentro).
No final, colocarei uma imagem para mostrar como funcionarão esses retângulos.

[1] draw_rectangle(0, 0, room_width, y+sprite_height/2-(altura da bola/2), false);
// Desenha um retângulo da esquerda à direita da room, de cima da room até a parte de cima do sprite da bola (meio do personagem menos metade da altura do sprite da bola)

[2] draw_rectangle(0, y+sprite_height/2+(altura da bola/2), room_width, room_height, false);
// Desenha um retângulo da esquerda à direita da room, da parte de baixo do sprite da bola até a parte de baixo da room

[3] draw_rectangle(0, y+sprite_height/2-(altura da bola/2), x+sprite_width/2-(largura da bola/2), y+sprite_height/2+(altura da bola/2), false);
// Desenha um retângulo da esquerda da room até a esquerda do sprite da bola, da parte de cima do sprite da bola até a parte de baixo dele

[4] draw_rectangle(x+sprite_width/2+(largura da bola/2), y+sprite_height/2-(altura da bola/2), room_width, y+sprite_height/2+(altura da bola/2), false);
// Desenha um retângulo da direita do sprite da bola até a direita da room, da parte de cima do sprite da bola até a parte de baixo dele

draw_set_blend_mode(bm_normal);
// Coloquei isso porque, como disse antes, sempre precisa voltar ao normal depois para não afetar outras coisas


[imagem mostrando funcionamento dos retângulos - coming soon]


Se alguma coisa não der certo me avisem. Apreciem desmoderadamente.

Meu. Na boa!
Isso é que é um tutorial!

É difícil eu aprovar um e esse eu assino em baixo.

APROVADO PELO M.A.S.

muito bom cara!

eu nao sabia direito como funcionava o max
vc sabe como funciona aqueles outros?

Código:

bm_zero
bm_one
bm_src_color
bm_inv_src_color
bm_src_alpha
bm_inv_src_alpha
bm_dest_alpha
bm_inv_dest_alpha
bm_dest_color
bm_inv_dest_color.
bm_src_alpha_sat

muito bom o tutorial, muito bem explicado e formatado!
Flww

Vlw gente

Esse outros bm's são usados na função draw_set_blend_mode_ext(), que eu não sei como funciona, só sei que também mexe com alpha... Ainda quero tirar um dia pra descobrir...

PS.: Esqueci de colocar umas imagens ali no tutorial (coming soon), quando der tempo eu coloco.

Edit:

Eu estava fazendo as "imagens para esclarecer dúvidas", para mostrar na prática como funcionam os bm's, e descobri que o bm_subtract e o bm_max não funcionam bem assim...
O bm_subtract usa alguma equação complexa (ou simples, sei lá) que eu estou tentando descobrir, ele não simplesmente subtrai, ele escurece a cor de trás se baseando na com blend de algum outro jeito. E o bm_max também faz alguma conta maluca. Se eu descobrir, coloco aqui.

Edit 2:

Descobri como funfa o bm_subtract. Já postei lá. Agora só falta o bm_max.

muito bom