Grayscale

O Efeito Grayscale (Escala de cinza)

O efeito escala de cinza, como o próprio nome diz, visa transformar uma imagem colorida em uma imagem com tons de cinza (:P). Este é um efeito bem interessante, pois pode ser usado de diversas maneiras, tanto criando paisagens com ares misteriosos, tanto para servir como a paleta do jogo inteiro.

Como fazer a conversão?

Bom, vou apresentar aki duas técnicas de conversão: A conversão por porcentagem, e a conversão por média. Estas são apenas duas técnicas que eu conheço, mas podem haver mais.

Conversão por média

Este é sem dúvidas o modo mais simples de se fazer, mas também o mais precário. Tudo que fazemos com ele é pegar os valores dos componentes R, G e B e obtermos sua média. Fazemos isso com cada um dos componentes.

O código é o seguinte

r := (ir + ig + ib) div 3;
g := (ir + ig + ib) div 3;
b := (ir + ig + ib) div 3;

cor:= RGB(r,g,b);

ir, ig e ib são valores pegos previamente e representam respectivamente os componentes R, G e B do pixel selecionado. Podemos pegar esses valores usando as funções GetRValue, GetGValue e GetBValue, como no exemplo a seguir:

ir := GetRValue(Origem.Picture.Bitmap.Canvas.Pixels[x, y]);
ig := GetGValue(Origem.Picture.Bitmap.Canvas.Pixels[x, y]);
ib := GetBValue(Origem.Picture.Bitmap.Canvas.Pixels[x, y]);

Nada de mais né?

Entretanto…

Imagine que temos uma imagem dividida em três partes, sendo cada uma preenchida com uma cor diferente, vermelho, verde e azul. O que acontece? Ela vai ficar totalmente cinza. Como resolver isso?

Conversão por porcentagem

Este métódo eh um pouco mais complicado, mas não tanto, tudo o que fazemos é simplesmente usarmos a porcentagem dos componentes. A porcentagem de cada componente pode variar. Vamos ver um exemplo:

r := Trunc(0.3 * ir + 0.59 * ig + 0.11 * ib);
g := Trunc(0.3 * ir + 0.59 * ig + 0.11 * ib);
b := Trunc(0.3 * ir + 0.59 * ig + 0.11 * ib);

Simples certo? Quem me passou esta escala de porcentagem foi o Christiano, de acordo com ele esta é a escala usada pelo Photoshop. Bom, sendo ou não. Ela funciona :D e é o que importa.

Com isso, solucionamos o problema mencionado acima, pois estamos trabalhando com a porcentagem de cada componente. E não com a média de seus valores. Note por exemplo, que o resultado da média da cor vermelha, por exemplo, será igual ao resultado da média da cor verde:

Vermelho:

(255 + 0 + 0) / 3 = 85

Verde:

(0 + 255 + 0) / 3 = 85

Essa é a falha que ocorre na primeira técnica. Já na segunda técnica:

Vermelho:

76,5 + 0 + 0 = 76,5

Verde:

0 + 150,45 + 0 = 150,45

Notaram a diferença :D

Bom, é isso ai e tenham um ótimo dia.

;)

7 Responses to “Grayscale”

  1. Lucas N. Says:

    Cara! muito bom… essa tecnica é muito simples e eficiente.

    Parabens!

  2. Vinícius Godoy Says:

    Legal conhecer efeitos assim. São detalhes como esse que fazem a diferença! :)

  3. quikkoo Says:

    a pedido do christiano vou acrescentar algo q passou batido na postagem

    os números usados para fazer a conversão de rgb para escala de cinza (gray = 0.3 * red + 0.59 * green + 0.11 * blue) são aproximações relacionados com a sensibilidade do olho humano à percepção das cores primárias

    como pode ver ñ é uma informação que fará alguma diferença na técnica de se obter os tons de cinza, mas apenas pra que seja informado de onde vêm tais “números mágicos”

    flw moçada, t+

  4. W_snipes Says:

    Isso ae mt bom o artigo e oque o quikkoo postou tambem.

    Parabens ae!

  5. Paulo Says:

    Preciso comprar alguns jogos para meu site.
    Alguma sugestao? quero saber de precos tambem.
    Grato Paulo Sousa

  6. Christiano Says:

    Paulo, se você está querendo jogos para um site, precisa especificar quais tipos de jogos você quer.

    É um site para JOGAR ONLINE ou BAIXAR JOGOS?

    Qual o objetivo do site, é ser um portal de jogos online mesmo ou os jogos são somente para atrair a atenção do público?

    Jogos em Flash possuem um preço bastante variável, mas se for desses jogos estilo puzzle mais simples, o jogo em si pode custar de R$ 150,00 a R$ 600,00, como disse, dependendo de como é o jogo.

    O melhor a ser feito é você entrar em contato diretamente com empresas desenvolvedoras de jogos em Flash (como a Personal Coder e a Elfland Studios, por exemplo) ou procurar pessoas que atuem como freelancer nesse ramo, assim você poderá conversar mais à vontade sobre isso, ok? Pois, como disse, cada caso é um caso. ;)

  7. Guedes Says:

    Minha sugestão é você usar formatação nos códigos, como abaixo:
    [sourcecode language='delphi']
    r := (ir + ig + ib) div 3;
    g := (ir + ig + ib) div 3;
    b := (ir + ig + ib) div 3;

    cor:= RGB(r,g,b);

    ir := GetRValue(Origem.Picture.Bitmap.Canvas.Pixels[x, y]);
    ig := GetGValue(Origem.Picture.Bitmap.Canvas.Pixels[x, y]);
    ib := GetBValue(Origem.Picture.Bitmap.Canvas.Pixels[x, y]);

    r := Trunc(0.3 * ir + 0.59 * ig + 0.11 * ib);
    g := Trunc(0.3 * ir + 0.59 * ig + 0.11 * ib);
    b := Trunc(0.3 * ir + 0.59 * ig + 0.11 * ib);
    [/sourcecode]

Leave a Reply