[Script] estilo foto antiga/preto e branco

Esse exemplo faz um efeito legal num sprite, deixando como se fosse uma foto antiga. Não é um preto-e-branco puro porque eu só trabalhei no canal azul pra poder criar uma nuança mais amarelada.

O resultado é preto pra sombras, cinza para meios-tons e um leve amarelado nas claridades. O download para o GM 6, 7 ou 8 está [aqui].

O preto-e-branco pode ser conseguido fazendo o mesmo procedimento nos três canais. O exemplo que trabalha com canais diferentes está [aqui]

Também há uma forma mais rápida de se conseguir um p&b usando apenas um dos canais (no caso do exemplo, seria retirar a saturação do canal azul, somando a cor contrária). Basta trocar a linha de código 47 (evento keyboard press spacebar), onde está...

Código:

repeat (2) draw_sprite(channelA, 0, 0, 0);

... e em vez do código acima, substituir por:

Código:

draw_set_blend_mode(bm_add);
repeat (3) draw_sprite(channelA, 0, 0, 0);

Screenshot do efeito normal:


Para o p&b no exemplo que digitei acima:

Posso pedir pra postar os scripts (e os eventos em que eles estão) num spoiler? Fiquei muito interessado, mas tenho dificuldades em abrir o GM (teria que esperar até eu estar em casa e ter um tempinho livre, o que costuma acontecer aos domingos).
Até que baixar do seu site não foi problema, mas sem o GM no computador daqui, não adiantou muita coisa.

Lógico. Tem somente um objeto que faz tudo no evento keypress space. No evento create eu crio uma surface e uma condição para o desenho ser feito no draw:

Create

Código:

surface := surface_create(room_width, room_height);
desenhar := false;

Vou deixar o código aqui comentado porque no projeto não está.

Keypress spacebar

Código:

// written by BrendanLS (bl8086) - http://640kbworld.forum.st

arquivo := '';
arquivo := get_open_filename('Imagens|*.jpg;*.bmp;*.png',working_directory);

if file_exists(arquivo) then
begin

    // Cria o sprite perfeito
    sprite := sprite_add(arquivo, 1, 0, 0, 0, 0, 0, 0);

    /* Mexendo só no canal azul vou criar um sprite do mesmo tamanho que o original, totalmente amarelo (o contrário de azul) */
    surface_set_target(surface);
    draw_clear_alpha($00FFFF, 1);

    channelA := sprite_create_from_surface(
                        surface, 0, 0,
                        sprite_get_width(sprite),
                        sprite_get_height(sprite),
                        0, 0, 0, 0, 0, 0
                        );

    // Agora vou retirar o canal azul do sprite original
    draw_clear_alpha(0, 0);
    draw_set_alpha(1);
    draw_set_blend_mode(bm_normal);
    draw_sprite(sprite, 0, 0, 0); // Desenho o sprite

    /* Essas 4 linhas a seguir podem ser substituídas por duas linhas usando só a cor c_blue ao desenhar, mas eu preferi fazer assim porque acho mais fácil mexer com os outros canais. */
    draw_set_blend_mode_ext(bm_dest_color, bm_zero);
    draw_set_color(~$00FF00);
    draw_rectangle(0, 0, room_width, room_height, 0);
    draw_set_color(~$0000FF);
    draw_rectangle(0, 0, room_width, room_height, 0);

    // Crio um sprite do canal azul
    channelB := sprite_create_from_surface(
                        surface, 0, 0,
                        sprite_get_width(sprite),
                        sprite_get_height(sprite),
                        0, 0, 0, 0, 0, 0
                        );

    // Baseado na saturação do canal azul, vou recriar esse mapa no sprite amarelo
    sprite_set_alpha_from_sprite(channelA, channelB);

    /* Vou mesclar apenas com o alpha pra não resultar em branco. Com o blend de adição e repetindo o desenho 3x (um pra cada canal) chegaríamos ao branco, mas a forma como fiz abaixo foi proposital pra dar a aparência de antigo */
    draw_set_blend_mode(bm_normal);
    draw_clear_alpha(0, 1);
    draw_sprite(channelB, 0, 0, 0);
    draw_set_alpha(0.5);
    repeat (2) draw_sprite(channelA, 0, 0, 0);

    // Deixo o conteúdo da surface totalmente opaco
    draw_set_blend_mode(bm_add);
    draw_set_alpha(1);
    draw_set_color(0);
    draw_rectangle(0, 0, room_width, room_height, 0);

    surface_reset_target()
    draw_set_blend_mode(bm_normal);

    // Apago os sprites temporários
    sprite_delete(channelA);
    sprite_delete(channelB);

    // E finalmente crio o sprite do resultado
    oldsprite := sprite_create_from_surface(
                        surface, 0, 0,
                        sprite_get_width(sprite),
                        sprite_get_height(sprite),
                        0, 0, 0, 0, 0, 0
                        );

    desenhar := true;
end;

Cara, não consegui ver no dia, não consegui ver depois e não sei se vou conseguir ver hoje. Tá osso!
Consegui ver as imagens, o resultado é realmente bem bacana.
Mas teve um detalhe que me intrigou. Eu sempre levo algum tempo pra entender os sistemas de blends. O que você usou até agora está me tirando o sono. São esses operadores binários, nunca vou entendê-los completamente...

Código:

(...)
draw_set_blend_mode(bm_normal);
draw_sprite(sprite, 0, 0, 0); // Desenho o sprite

/* Essas 4 linhas a seguir podem ser substituídas por duas linhas usando só a cor c_blue ao desenhar, mas eu preferi fazer assim porque acho mais fácil mexer com os outros canais. */
draw_set_blend_mode_ext(bm_dest_color, bm_zero);
draw_set_color(~$00FF00);
draw_rectangle(0, 0, room_width, room_height, 0);
draw_set_color(~$0000FF);
draw_rectangle(0, 0, room_width, room_height, 0);

Ok, o manual já diz que o til "negates the next value bitwise". Mas eu não sei o que isso significa. "~$00FF00" é mais ou menos a mesma coisa que "-$00FF00"?
Se eu ignorar o til, eu suponho que no final do primeiro retângulo eu ficaria com os verdes da imagem original e, no final do segundo, com mais nada.
Se entendi seu comentário, a idéia é fazer algo semelhante ao que descrevi no primeiro retângulo, mas com o canal azul. Assim:

Código:

(...)
draw_set_blend_mode(bm_normal);
draw_sprite(sprite, 0, 0, 0); // Desenho o sprite

/* Entendi isso aqui:*/
draw_set_blend_mode_ext(bm_dest_color, bm_zero);
draw_set_color($FF0000);
draw_rectangle(0, 0, room_width, room_height, 0);

Entendi certo?

Infelizmente estou sem formas de testar isso, as próximas partes têm montes de imagens intermediárias que eu gostaria de ver uma-a-uma. Eu VOU vê-las em breve, mas não agora.

Legal, daí você joga a saturação dessa sprite azul no retângulo amarelo usando a função sprite_set_alpha_from_sprite. Eu NUNCA entendi essa função. Já usei algumas vezes, mas nunca entendi. Se você souber explicar o que ela faz, vai me quebrar um galhão!

Aí, vem o pulo do gato! Olha seu comentário:

/* Vou mesclar apenas com o alpha pra não resultar em branco. Com o blend de adição e repetindo o desenho 3x (um pra cada canal) chegaríamos ao branco, (...)

Como que cada repetição vai pra um canal diferente?
Nesse momento, a surface está totalmente preta e opaca, você desenha uma sprite azulada (channelB) e repete a sprite amarela (cor oposta) por cima dela, com alpha 0.5. Até entendo que, aos poucos, isso vá tendendo aos tons de cinza, mas não acho que vá coincidir exatamente em momento nenhum.
Aliás, se fosse esse o objetivo, até poderíamos usar o bm_add e desenhar a imagem amarela sobre a azul, ambas totalmente opacas, não poderíamos?
A matemática me confunde, aqui.

Por fim, você usa um truque pra deixar a imagem totalmente opaca. Mas eu não vi em que momento você permitiu que ela tivesse algum pixel transparente! Você usou o draw_clear_alpha(0, 1) e, depois disso, só o bm_normal (até o momento de começar o truque). O que eu perdi?

Seja como for, está comprovado pelas imagens que o resultado é bacana! Realmente quero entender esse código, mas entendendo ou não, kudos pra você!

saim escreveu:Ok, o manual já diz que o til "negates the next value bitwise". Mas eu não sei o que isso significa. "~$00FF00" é mais ou menos a mesma coisa que "-$00FF00"?

O til inverte cada bit do valor. Onde é zero (0) torna-se um (1) e vice-versa. Esse valor em hexadecimal significa que os primeiros dois zeros (00) representam a quantidade de azul dessa cor. O “FF” no meio dele é o valor do verde e os dois últimos zeros são o vermelho.

Se invertermos todos os bits desse número, obteremos a cor contrária. Seria o mesmo se disséssemos que “~$00FFFF é igual a $FF0000 que é igual a c_blue”. Essa forma de escrever é só uma comodidade pra ficar mais fácil lidar com cores.

Se eu ignorar o til, eu suponho que no final do primeiro retângulo eu ficaria com os verdes da imagem original e, no final do segundo, com mais nada.

Isso mesmo. O valor “~$00FF00”, com til, na verdade significa “$FF00FF”, ou seja, a cor magenta. Se ignorarmos o til, o valor vira realmente verde (c_lime) e ao desenharmos um retângulo usando o blend "bm_dest_color --> bm_zero", somente o canal verde da imagem fica visível. É por isso que eu comentei que "poderíamos usar o azul em lugar desses valores".

Se também ignorássemos o til do segundo valor (tal como o primeiro), não importaria qual cor usássemos, pois qualquer uma que não tivesse verde o anularia e a imagem ficaria "preta". Por isso eu disse que as quatro linhas poderiam ser substituídas por duas, usando somente a cor azul ao desenhar.

Se entendi seu comentário, a idéia é fazer algo semelhante ao que descrevi no primeiro retângulo, mas com o canal azul.

Sim. As duas etapas de desenho do retângulo (que poderiam ser substituídas por uma) é só uma outra comodidade. Eu prefiro trabalhar com dois canais, pois acho mais fácil.

Quando eu olhar o código vou me lembrar que usei o inverso de verde (magenta) e o inverso de vermelho (ciano). Além disso, usando o canal vermelho, poderíamos movê-lo sozinho para a esquerda ou direita e fazer um efeito 3D na imagem (daqueles óculos com lentes coloridas, azul e vermelho).

Legal, daí você joga a saturação dessa sprite azul no retângulo amarelo usando a função sprite_set_alpha_from_sprite. Eu NUNCA entendi essa função. Já usei algumas vezes, mas nunca entendi. Se você souber explicar o que ela faz, vai me quebrar um galhão!

Como que cada repetição vai pra um canal diferente?

Essa função usa a mesma premissa de "máscaras" onde, o que for preto torna-se transparente e o que for branco torna-se opaco. Você vai entender o porquê de eu tê-la usado quando eu explicar o motivo de ter separado um único canal.

Quando queremos anular uma cor, nós devemos misturá-la à cor contrária na mesma proporção (no Game Maker, podemos fazer isso usando somente o alpha). Isso significa que, após a mistura, ela perderá a saturação, ou seja, ela se tornará cinza e irá preservar a luminosidade somente se os outros canais se mantiverem inalterados.

A grosso modo, isso equivaleria a inverter o matiz do canal azul (e não inverter a cor, o que também afetaria o verde e vermelho). O problema é que, usando os blends do Game Maker, não é possível preservar a luminosidade, pois ao inverter as cores (mesmo usando só um canal), o que era branco viraria preto e vice-versa. Obrigatoriamente, todos os blends usam os três canais e o alpha. Se tentássemos misturar a imagem ao seu exato inverso, tudo ficaria cinza.

Então, separamos somente um canal, pois ele vai variar da ausência da cor (0) até o valor máximo dela (255) para o canal em questão. Esse é o motivo pelo qual mesclamos 3 vezes, ou seja, somente para simular a presença de outros dois canais que na verdade não existem e chegarmos ao branco (daí o porquê de eu ter comentando que esse não era um preto e branco "puro", e que o p&b perfeito é obtido através do mesmo processo feito nos três canais originais).

Nesse momento, a surface está totalmente preta e opaca, você desenha uma sprite azulada (channelB) e repete a sprite amarela (cor oposta) por cima dela, com alpha 0.5. Até entendo que, aos poucos, isso vá tendendo aos tons de cinza, mas não acho que vá coincidir exatamente em momento nenhum.

Com a função, criamos a cópia do canal azul, porém, amarelada e sem alterar a luminosidade, pois o que era claro e escuro agora é dado por opaco e transparente. Uma é criada com base na outra, então coincidem.

Aliás, se fosse esse o objetivo, até poderíamos usar o bm_add e desenhar a imagem amarela sobre a azul, ambas totalmente opacas, não poderíamos?

Sim, mas só se tivéssemos a quantidade de amarelo na mesma proporção de azul (uma imagem do preto ao azul e outra cópia do preto ao amarelo), o que não é possível separar usando blends. Como eu comentei, os blends sempre trabalham nos 3 canais, portanto, quando você inverter o azul também inverterá o verde e vermelho e o resultado disso será uma imagem que variará do amarelo em lugar das claridades (onde predominava o azul) ao branco em lugar das sombras (onde havia pouco azul).

Note que nós temos que inverter o matiz azul pelo amarelo e não a cor, pois invertendo a cor, também inverterá a luminosidade do canal.

Por fim, você usa um truque pra deixar a imagem totalmente opaca. Mas eu não vi em que momento você permitiu que ela tivesse algum pixel transparente! Você usou o draw_clear_alpha(0, 1) e, depois disso, só o bm_normal (até o momento de começar o truque). O que eu perdi?

O sprite amarelo, como eu comentei, não tem preto nem branco. Ele só tem amarelo e varia do transparente ao opaco. Ao mesclar o alpha usando o blend bm_normal, o alpha da origem é preservado. Por isso deixo a surface totalmente opaca após mesclar.

Seja como for, está comprovado pelas imagens que o resultado é bacana! Realmente quero entender esse código, mas entendendo ou não, kudos pra você!

Eu ainda quero tentar uma maneira de fazer isso em tempo real sem usar um resource. Adicionar e retirar um sprite a cada step para deixar o jogo todo em preto e branco (eu desenharia tudo numa surface, tirando o automatic drawing) seria inviável e lento.

E se eu duplicasse cada resource para uma cópia em p&b, também não me agradaria. Mas o uso de canais é bem legal. O efeito de "3D", como comentei, por exemplo, pode ser feito em tempo real no jogo. Também é possível criar outros efeitos usando "blur" em só um dos canais. Dá um efeito lindo em volta dos sprites, dependendo das cores. Outro efeito interessante usando a luminosidade como referência para áreas de desenho é [este].

Enfim, ainda dá pra fazer muita coisa... Abraço.