RGB e Games - As cores no PC

E aí galera?

Bom, como eu havia prometido, fiz um pequeno tutorial explicando o sistema de cores RGB. Esse sistema é importante não só para quem se interessar em aprender Photoshop, mas também para quem quizer usar o Game Maker mais a fundo.

Técnicas de compactação de imagens são muito bem vindas dependendo da aplicação. Já em outros casos, a perda de informação de cores na imagem é tão grande que a diferença ante a original é gritante.

Nesses casos, um pouco mais de conhecimento sobre como funciona o padrão RGB, pode tornar seus games até 80% mais leves e rápidos com uma perda de cores praticamente imperceptível ao olho humano. É importante consolidar o princípio RGB em nossas mentes pois figuras e imagens trabalharão com ele.






Todo o nosso sistema visual é baseado na luz que emana do sol. Essa luz é composta por todas as cores possíveis captadas por nossos olhos. Em resumo, o branco é nada menos que todas as cores "juntas".

Mas, no mundo real, só existem mesmo três cores: o vermelho, o verde e o azul. Daí o nome RGB : Red (vermelho), Green (verde) e Blue (azul).

Na escola, as "tias" nos ensinaram que as cores primárias do nosso sistema visual eram: o amarelo, o vermelho e o azul. Logo, o verde seria um cor secundária, pois seria a mistura do azul com o amarelo.

Na verdade essas cores são mesmo primárias mas, não do nosso sistema visual. Se misturarmos o amarelo, a azul e o vermelho o resultado será um branco muito diferente do branco RGB.

Quando lidamos com luzes (a luz do sol, do monitor do seu pc, etc.) as cores variam como na natureza: elas vão do infravermelho ao ultravioleta passando pelo verde (que fica exatamente no meio do espectro luminoso). Se somarmos todas essas cores, o resultado será o branco. O preto não é cor, ele é apenas ausência de luz.




Dessa forma, qualquer cor visível ao olho humano pode ser obtida através dessas três cores primárias: Red, Green. Blue.

O que vamos fazer é variar a quantidade de cada uma, como se estivéssemos por exemplo, ajustando a intensidade da luz de uma lanterna (luminosidade e saturação).

Matiz

Também chamamos de nuança. Esse valor indica a predominância de determinada cor primária ou secundária.

Saturação

Saturação quer dizer: qualidade de uma cor, ou seja, sua pureza, distinguindo-a de outra do mesmo matiz.

Luminosidade

A característica que uma cor possui de refletir mais luz ou menos luz.


Pegando o "gancho" da luminosidade, queria deixar claro uma característica muito importante sobre reflexão de luz:

No nosso dia a dia, vemos objetos de todas as cores. Dentre as características desses objetos, existe uma propriedade que funciona como um filtro de luz. Quando uma luz branca incide sobre a superfície dos objetos, parte dessa luz é absorvida e o restante é refletido, originando suas cores.

Por exemplo: se um objeto nos parece azul, é porque ele refletiu o azul e absorveu o vermelho e o verde da luz. È graças à essa refelxão, que podemos enxergar tudo o que se passa a nossa volta. Do contrário, enxergaríamos tudo branco ou tudo preto. Veja:

RGB no nosso PC

Nosso computador, mostra imagens na tela através de pontos chamados "pixels" (pronuncia-se "piksêus"). Numa imagem cujo tamanho é de 640x480 pixels, tem-se 640 pontos de largura e 480 pontos de altura. Assim, quanto mais pontos tiver uma imagem, mais qualidade visual ela terá.

Cada pixel possui três informações de cor armazenadas em bytes: um byte para vermelho, um byte para verde e um byte para azul. Dessa forma, a intensidade de cada componente RGB de um pixel é guardada em valores que vão de 0 até 255, denotando sua cor.

Por exemplo:

Um pixel azul terá as informações:

R (Vermelho) = 0
G (Verde) = 0
B (Azul) = 255

Um pixel amarelo terá:

[b]R (Vermelho) = 255
G (Verde) = 255
B (Azul) = 0

Assim, um pixel pode ter até:

256 x 256 x 256 = 16.777.216 (16 milhões de cores)

A esse sistema que é usado pelo monitor do nosso PC damos o nome de True-Color ou Cores Verdadeiras. É como se a natureza "rodasse em modo True-Color"!



Quanto mais pontos tiver uma imagem, melhor será sua qualidade visual e mais memória e velocidade de processamento serão necessários para processá-la. Apesar de isso ser um fato importante, não é necessariamente o tamanho da imagem que determina se ela é boa ou não, mas sim a quantidade de cores que ela possui.

Nós não conseguimos perceber os minúsculos pixels de uma imagem nas grandes resoluções, mas notamos claramente as cores estão "feias".



Daí a preocupação dos fabricantes de placas de vídeo em desenvolver tecnologias para acelerar o processamento das cores, e não somente aumentar a resolução do vídeo, ok?

Bom, agora que já conhecemos um pouco mais sobre o padrão RGB e como são tratadas as cores no vídeo, o nosso próximo tutorial RGB será sobre paletas. Paletas são extremamente usadas em todo tipo de game pra qualquer plataforma. Ela "simplifica" o padrão RGB dos pixels (que possuem suas próprias cores) apontando-os para uma tabela de cores predefinida (cores indexadas).

Isso possibilita usar muitas cores ao mesmo tempo, desenhar muito menos sprites, deixar o jogo bonito e sem cair com a velocidade do processamento. Em resumo, paletas poupam muita, muita memória.

Valeu e até mais!!!

Caramba ... PARABÉNS cara! Seus tutoriais são sempre ótimos.

Valeu pelos elogios cara! Espero que o tutorial tenha ajudado!

apesar de branco ser excesso de cores, ele não é cor

idai né? o que importa é q o seu tutorial está OTIMO!

bem acho que nem preciso dizer que seu tuto está otimo né
bem eu sei que num tem a ver mas eu queria saber como se faz uma
alpha de um sprite num fundo preto
por exemplo esse


Valeu

rodrigo1434 escreveu:bem acho que nem preciso dizer que seu tuto está otimo né
bem eu sei que num tem a ver mas eu queria saber como se faz uma
alpha de um sprite num fundo preto
por exemplo esse


Valeu

Rodrigo, se tu quer deixar o teu logotipo com fundo transparente, abra-o no Photoshop. Se janela de camadas tiver uma camada chamada index ou índice, vá no menu
"Imagem -> Modo -> Cores RGB" para transformar essa camada em plano de fundo ou Background.

Depois disso, vá no menu "Camada -> Nova -> Camada a partir do plando de fundo" para transformar o plano de fundo em camada.

Agora, sempre que você apagar alguma coisa com a borracha ou a varinha por exemplo, o que for apagado aparecerá como gamut (são vários quadradinhos como xadrez em preto e branco, indica transparência).

Quando salvar, salve esse arquivo como PSD (arquivo do Photoshop) e o que for transparente (com gamut) será o alpha da imagem. Daí sempre que você abrir esse arquivo pode fazer o que quizer com o logo sem que a parte preta atrapalhe.

Já no Game Maker...

O GM reconhece arquivos do Photoshop mas não reconhece o alpha do arquivo. Você poderia usar um draw_set_blend_mode(bm_add) para usar o preto de uma forma parecida com o alpha porém a sprite se tornaria "brilhante"(dê uma olhada no tutorial de blends se você não entender isso).

eu entendo isso (blend) mas ia parecer luz, e não com a tranparência, mas deixa queto
valeu

ps::reponda minha mensagem eu já respondi ;)