A Importância do Estudo das Cores no Desenvolvimento de Games

0 Flares 0 Flares ×

Este é um artigo convidado escrito pela Patrícia Tamega, onde será discutido o estudo das cores no desenvolvimento de games.

Patrícia Tamega é Designer Gráfico e atua produzindo arte para jogos digitais. Você pode conhecer mais sobre o trabalho da Patrícia visitando o seu site ou seu perfil no LinkedIn.

A Patrícia Tamega também é membro da Academia de Produção de Jogos, a nossa plataforma online com cursos, entrevistas, maratonas de desenvolvimento, palestras e muito mais.

E se você está lendo esse post pensando que apenas quem sabe sobre arte e desenho pode criar jogos, fique sabendo que está muito enganado!

Esse é um dos maiores mitos que impedem as pessoas de criar jogos e eu até falo sobre ele em um artigo. Não deixe que ele te impeça de começar a criar seus games, combinado?

Bom, eu tive o prazer de conhecer pessoalmente a Patrícia em um encontro da Academia de Produção de Jogos no começo de 2016:

EncontroAcademiadeProducaodeJogos

(A Patrícia Tamega é essa sentada mais à direita na foto)

Neste artigo sobre o estudo das cores, a Patrícia Tamega vai te mostrar:

  • O Poder da Cor no Universo dos Jogos Digitais;
  • O que são Cores Análogas e Cores Complementares (e como utilizá-las);
  • A Relação entre Cores e Sensações;
  • 6 Dicas Importantes para Acertar na Escolha das Cores do seu Game;

Com vocês, Patrícia Tamega

Dentre todos os recursos que fazem parte da linguagem visual, o elemento cor é o mais importante em um projeto gráfico. Segundo estudiosos da psicologia das cores, ela tem o poder de interferir no comportamento humano.

Em um projeto para vídeo game, a escolha pelas cores certas tem grande importância. Jogos, em sua maioria, são coloridos, e com certeza a experiência do jogador é influenciada pelas cores, mesmo que inconscientemente, pois expressam coisas que não seriam possíveis sem seu uso.

O Poder da Cor

Pelas minhas pesquisas, um artigo sobre cor no “universo dos jogos digitais” tem por finalidade auxiliar os iniciantes na área, pois existe pouco material disponível em língua portuguesa a respeito disso.

Este artigo é sobre as cores aditivas, que são as que mais interessam a um desenvolvedor de games. Obviamente, para quem quer fazer um jogo, mas não entende muito da parte artística.

Espero que este artigo esclareça algumas dúvidas, e que dê uma luz aos leitores!

Cor-Luz

cores-nos-games-1Também chamadas de cores aditivas, temos como primárias da luz o vermelho, o verde e o azul.

Todos os monitores são formados pela mistura aditiva (modelo RGB – Red, Green e Blue).

No sistema RGB, utilizamos proporções de vermelho, verde e azul, em uma escala de 256 valores possíveis (de 0 a 255) para cada uma das três cores primárias.

Multiplicando esses valores (256 x 256 x 256), temos 16,7 milhões de cores possíveis. Uma quantidade que até ultrapassa a capacidade humana de distinguir todas as cores.

cores-nos-games-2

Resumindo, saber misturar as cores pelo Sistema RGB de seu programa gráfico, já dá suporte para escolher uma paleta de cores harmoniosa para seu jogo.

cores-nos-games-3

Estudo das Cores: Círculo Cromático no Sistema Aditivo

cores-nos-games-4O círculo cromático é a representação das cores do Espectro Visível, colocadas de forma prática e didática para seu uso.

Vamos voltar um pouco no tempo, naquela aula de ciências em que aprendemos que o físico Isaac Newton, em 1665, fez um experimento com um prisma, refratando a luz através dele e a dividindo nas cores do arco-íris.

No ano seguinte, Newton criou um diagrama em forma de círculo, que permanece praticamente inalterado até hoje.

cores-nos-games-5

O objetivo de utilizar um círculo cromático é encontrar cores que funcionem bem juntas, de forma harmoniosa.

As harmonias cromáticas mais utilizadas em um círculo cromático são: entre as cores análogas, as complementares e a tríade, como mostra o esquema abaixo.

Cores análogas

cores-nos-games-6
Duas ou mais cores ao lado da cor escolhida

O personagem Aquila, de Sir Oliver, é feito com cores análogas, isto é, cores “vizinhas” no círculo cromático.

Recurso simples e prático para utilizar em personagens de animais que não usam vestimenta.

Aquila, de Sir Oliver

O cenário do jogo Badland é feito de cores análogas. Elas criam um visual cromático agradável. Logicamente neste caso, o tratamento com luz dá um espetáculo à parte na arte!

Badland

Os cenários do jogo Swamp Attack são criados em matizes próximas, análogas, que são relações simples entre as cores, gerando um ar suave ao ambiente.

Swamp Attack

Cores complementares

Cores opostas no círculo cromático
Cores opostas no círculo cromático

O personagem do jogo Bullet Boy veste roupas e acessórios com cores complementares (vermelho e verde). Aliás, a arte toda utiliza esta mistura de cores, apenas variando a intensidade de saturação e luminosidade. O fundo com pouca saturação e o primeiro plano com bastante saturação (contraste).

Bullet Boy

No jogo Red Ball, os assets, os botões e o personagem (vermelhos) são complementares ao cenário (tons de verde).

Dá para trabalhar a diferença de contraste entre primeiro plano e fundo utilizando transparências diferentes nas camadas (layers). Mas isso é uma outra história!

Red Ball

O herói de Dragon Quest 8 usa dois pares de cores complementares (vermelho e verde, e um tom de azul com um amarelo alaranjado). Podemos dizer que é uma relação complementar dupla. Sem contar o cenário, que é todo feito utilizando cores análogas e complementares.

Dragon Quest 8

Tríade

Três cores com espaçamento igual no círculo.
Três cores com espaçamento igual no círculo.

Para mim, o melhor exemplo de tríade é o personagem Sonic. E, detalhe: é uma tríade primária, pois utiliza as três cores primárias!

Sonic

Porém, é importante dizer que as tríades mais fáceis de manejar são as tríades de cores secundárias e terciárias.

No caso do Sonic, o branco dá uma base suave, e o verde da tríade está só nos olhos do personagem, senão poderia parecer muito berrante.

Outras Representações da cor em um programa gráfico

Existem outros sistemas para mistura de cores, como mostra a figura abaixo, da janela de cores do programa Photoshop, da Adobe.

Cor no Photoshop

E por que conhecer outros sistemas?

Apesar do sistema RGB ser o mais utilizado pela facilidade intuitiva que oferece, é importante conhecer o HSB, pois ele auxilia na compreensão do conteúdo.

No Sistema HSB, também chamado de HSV, temos o H (Hue), de Matiz; o S (Saturation), de Saturação e o V (Value) ou B, de Luminosidade.

cores-nos-games-17

MATIZ: é a fase da cor no espectro visível.

SATURAÇÃO: é a quantidade de cor (mais ou menos contraste).

LUMINOSIDADE: é a quantidade de luz (mais escura ou mais clara).

O esquema abaixo lado mostra em destaque o espectro visível ao olho humano.

cores-nos-games-18

Para entendermos a importância dessa explicação, da relação existente entre os três parâmetros cor/ saturação/ luz, preparei alguns exemplos.

No jogo Journey, temos pouca saturação, por isso, pouco contraste. O contraste que existe (pois tem que existir pelo menos um pouco), é gradativo até o primeiro plano.

cores-nos-games-19

Em oposição ao Journey, o jogo Fez tem um contraste alto, isto quer dizer que as cores são bem saturadas.

Fez game

Acredito que neste momento não exista melhor exemplo para explicar cores claras e escuras. O jogo Limbo utiliza essa relação de forma primorosa.

É possível trabalhar com uma escala acromática que inclua todas as tonalidades entre o preto e o branco, com variação de luminosidade.

cores-nos-games-21

Cores e Sensações

cores-nos-games-22

Apesar de uma mesma cor poder significar algo diferente para cada pessoa por inúmeros motivos, como cultura local, experiências pessoais, faixa etária, memória afetiva, humor, etc., existem as sensações em comum que as cores proporcionam.

cores-nos-games-23

Estas dicas auxiliam na escolha das cores, mas lembrem-se que temos matematicamente 16,7 milhões de possibilidades de cores.

O conceito clássico nos ensina que as cores quentes são emocionais e as cores frias são racionais.

Sensações Visuais Cromáticas

Amarelo – Luminosidade, Alegria, Ludicidade, Criatividade. Indicado sempre a projetos para crianças.

Laranja – Dinâmica, Estímulo, Força, Comunicação.

Vermelho – Comando, Ação, Atenção. É a cor que mais mexe com os instintos humanos. Use com moderação!

Verde – O verde puro é o ponto de equilíbrio entre a emoção e a razão. É a cor da Natureza, da Sorte, da Segurança.

Azul – Racional, Individualista. Dependendo da matiz, cor da Limpeza, da Educação.

Púrpura – Luxo, Nobreza e Vaidade.

Sensações Visuais Acromáticas

Preto – Mistério, Requinte, Sofisticação.

Cinza – Seriedade, Sabedoria, Tecnologia, Futurismo.

Branco – É a Base, a Pureza, a Paz, a Calma.

Dicas

1 – Crie sempre paletas reduzidas, pois não é necessário (normalmente), utilizar um número muito grande de cores em um mesmo jogo.

2 – Antes de escolher as cores, leve em consideração o tipo de jogo, o estilo do jogo, em que época acontece, o local, o tipo de cenário, a idade dos jogadores, os personagens, entre outras coisas.

3 – Um bom contraste depende da escolha correta de dois elementos: da figura e do fundo.

4 – Você pode escolher uma cor como elemento de destaque para seu jogo.

5 – Muito importante dizer também que as cores não fazem só o papel de deixar o jogo bonito. Elas têm a função de “levar” o olhar do jogador para o lugar certo no monitor, auxiliando-o na jogabilidade.

6 – No universo dos games, as cores ajudam a contar uma história, a criar harmonia e integração, e a movimentar o jogador.

Conclusão

Espero que essas dicas possam ajudar na escolha das cores de seu primeiro ou do seu próximo jogo.

Qualquer dúvida, crítica ou sugestão, estou à disposição de todos os leitores!

Meu nome é Patrícia Tâmega, sou Designer Gráfico, estou trabalhando em alguns projetos de games e participando da Academia de Produção de Jogos.

Bibliografia

FRASER, Tom; BANKS, Adams. O Essencial da Cor no Design. São Paulo: Senac, 2013.

FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. Psicodinâmica das Cores em Comunicação. 6. ed. São Paulo: Blucher, 2013.

Comentários Finais (por Raphael Dias)

E aí, o que achou desse artigo? Incrível, não? 🙂

E se você quiser se aprofundar ainda mais na parte gráfica de um jogo, eu também recomendo este guia sobre Pixel Art, um dos estilos mais utilizados no desenvolvimento de games.

Agora eu tenho uma dica e uma pergunta pra você:

A dica é você adicionar a Patrícia Tamega no LinkedIn (basta clicar neste link). Lembre-se: networking é muito importante, então não deixe de se conectar com seus colegas e possíveis colaboradores futuros.

E a pergunta é a seguinte:

Qual das 6 dicas que a Patrícia deu neste artigo você achou a mais importante?

Comente abaixo dizendo qual dica você mais gostou e porquê. Se você tiver alguma dica adicional, não deixe de compartilhar com a gente também!

Vou ficar esperando aqui o seu comentário 🙂