Tutorial de Pixel Art – Parte 00

Olá! Para complementar o desafio semanal de game art, irei publicar alguns tutoriais de pixel art! Esta ainda é uma versão preliminar, e será melhorado com o tempo e sugestões dos leitores. Primeiro de tudo, farei esses tutoriais com suposição de que você já saiba utilizar alguma ferramenta de desenho no computador. Se não souber utilizar algum programa de desenho, escolha um, procure tutoriais na net, passe alguns dias para aprender a usá-lo e depois volte aqui. Recomendo fortemente o Photoshop.  No meus exemplos, usarei principalmente o Photoshop Elements 10 ou o Clip Studio Paint PRO. Nestes links há várias listas de ferramentas que você pode utilizar: 1 2 3. A melhor gratuita é o Graphics Gale. Também tem o Asesprite, mas sem pagar, você precisa compilar o código, o que afasta a maioria dos artistas.

Eu ainda me considero um iniciante/intermediário em pixel art, mas gostaria de falar sobre alguns aspectos que, na minha opinião, são importantes para manter a consistência dos assets dentro do jogo. Listarei aqui alguns e caso queira acrescentar algo, deixe um comentário abaixo.

  1. Quais são as limitações? número de cores e tamanho do sprite?
  2. Qual é a perspectiva usada? Qual perspectiva 2D ou 3D?
  3. Como ele funcionará dentro do jogo? Ele interage com alguma entidade? Será animado? Terá algum efeito especial? Fará algum barulho?

Limitações

As limitações dão aos elementos visuais aquela aparência de jogos de consoles de 8-bits ou 16 bits. Na tabela abaixo, temos uma lista de resoluções e número de cores simultâneas dos principais sistemas de jogos.

Sistema Resolução Número de Cores
Atari 5200 180×192 4
NES 256×224, 256×240 16, 4 por Sprite
Master System 256×224, 256×240 32, 16 por Sprite
SNES 256×224, 256×239 256, 16 por Sprite
Mega Drive 256×224, 320×240 64, 16 por Sprite
GameBoy 160×144 4 Tons
Playstation 256×224, 640×480 153.600
NintendoDS 256×192 252.144
PC (VGA) 320×200 256
PC (VESA) 320×240 256

Atualmente, utilizando a Unity, sempre usei as seguintes resoluções para meus jogos em pixel art: 160×90, 320×180 e 640×360 (ampliadas em 12x, 6x e 3x, respectivamente, para a resolução de 1080p). Comparando com a tabela, acredito que o melhor valor para simular um console seria 384×216 (ampliadas em 5x para 1080p).

Os tamanhos mais comuns para uma das dimensões dos sprites e tiles são múltiplos de 8 (8, 16, 24 e 32), por exemplo: 8×8, 8×16, 16×16, 16×32, 24×64. Nos jogos atuais, isso não é um requisito realmente necessário.

Outro aspecto importante a considerar é paleta de cores usada. Para o artista iniciante é difícil criar uma paleta harmoniosa, visto que ele ainda está desenvolvendo sua percepção. Por isso recomendo dar uma lida em harmonização de cores e utilizar alguma paleta já existente que já testada em diversos jogos. Comece com uma paleta monocromática, como a do gameboy que só possui 4 tons, e passe progressivamente para as outras. Estude teoria das cores e com a prática você começará a escolher melhor suas cores. No meu caso, embora não tenha feito um estudo formal sobre o assunto (uma faculdade de arte ou design), tenho uma certa confiança, pela prática e leitura, em criar minha paleta do zero, e quando não fico satisfeito, as ferramentas do photoshop auxiliam nesse processo. Enfim, se você quiser dar uma aparência clássica de jogo retrô, utilize alguma das paletas de cores dos consoles de 8 bits.

Onde encontrar paletas de cores? Os próprios programas de pixel art possuem algumas, mas aqui alguns links:

Se quiser criar suas própriar paletas ou como usar melhor as existentes aqui apresento alguns tutoriais:

Há também algumas ferramentas para auxiliar o processo de criação de paletas:

Perspectiva

Perspectiva é um dos meus assuntos favoritos. Gosto de defini-la como sendo a colocação dos objetos em relação ao observador. Logo num desenho, a primeira coisa a ser feita é definir onde está o observador e sua orientação. Quando você erra a perspectiva, significa que você não representou corretamente aquele objeto de acordo com o que o observador realmente veria. Para um jogo é importante escolher uma perspectiva (um ponto de vista) e mantê-la consistente! Se você não tem conhecimento sobre esse assunto, recomendo estes livros: Perspective, How to Draw. Também não podemos esquecer da iluminação! Mas isso fica para outro tutorial.

Podemos dividir os tipos de perspectiva em cônica e axonométrica. A cônica refere-se a perspectiva em que as linhas paralelas convergem para um ponto de fuga, nela quanto mais distante o objeto está do observador, menor fica. Por outro lado, perspectiva axonométrica, as linhas paralelas continuam paralelas no desenho (não convergem).

Em jogos 2D, devido à necessidade de reutilizar os assets, é mais comumente utilizada a perspectiva axonométrica (também chamada de paralela), que é divida em dois tipos: ortogonal e oblíqua. A projeção ortogonal é a mais comum, tanto em side-scrollers como top-down.

A projeção é ortogonal quando as linhas de projeção formam um ângulo de 90 graus com o plano de projeção, e é classificada como isométrica, dimétrica e trimétrica. Os aspectos a serem considerado em cada perspectiva são: ângulo entre os eixos e proporções entre as dimensões.

Perspectiva isométrica é quando todos as dimensões tem a mesma proporção (1 : 1 : 1) e as projeções dos eixos foram 120 graus. Na prática, é utiliza-se para representar os ângulos a seguindo a norma ISO 5456-3 (axonometria normalizada), porém, aqui simplificaremos algumas coisas e usaremos o eixo Y como vertical. Dessa forma, vamos dizer que isométrica os eixos X e Z fazem um ângulo de 30 graus com uma linha imaginária na horizontal (a maioria das ferramentas utiliza essa forma para definir um grid axonométrico). Um jogo que utiliza bem esta perspectiva é o Monument Valley.

Esta perspectiva não pode ser representada corretamente em pixel art. Como assim?! Na verdade, quando se fala em pixel art isométrico, utiliza-se a perspectiva dimétrica. Pois é utilizada a proporção 2:1 (2 pixels para o lado e 1 para cima), que resulta em uma ângulo de arctan(1/2) ≅ 26.56°. Assim, os eixos x e z tem a mesma proporção, mas o eixo y possui outra. A perspectiva utilizada pelos RPGs clássicos, como Final Fantasy 6 e outros, também é dimétrica  (chamada de perspectiva 3/4), porém nela a projeção dois eixos coincidem.

Na perspectiva trimétrica, os ângulos e proporções entre cada eixo é diferente. Neste site você pode calcular as proporções de cada eixo dado cada ângulo.

Finalmente, na projeção oblíqua as linhas de projeção formam um ângulo diferente de 90 graus com o plano da imagem.

Confira todos os links abaixo, para obter mais detalhes dessas projeções:

Resumindo: para definir sua perspectiva, escolha os ângulos e as proporções entre cada eixo (não esqueça da iluminação!!).

A seguir, baseado na lista de pix3m, compilei uma série de perspectivas com os tamanhos e proporções baseados em jogos. Em cada uma foi desenhada um cubo e cada eixo (X Y Z) possui uma cor correspondente. A propósito do cubo é ser um referencial para auxiliar as medições e uma base para as outras formas. Esta será a base em que construiremos os assets. Para ver melhor as imagens abaixo, abra cada um no photoshop e configure a grade para 16×16 pixels com subdivisão em 2).

Perspectiva Exemplo Comentários Adicionais
Ortho Top-Down
Ortho Top-down

Ortho Top-down


Tamanhos: 8×8, 16×16, 24×24, 32×32, 64×64, livre.
Proporções: 1 : 0 : 1
Apenas um plano é visível.
Zelda Top-Down  Zelda Top-down Tamanho: 16×16, com sub-tiles de 8×8.
Proporções: 1 : 1/2 : 1
Cinco planos visíveis para as salas.
Para objetos, utiliza a mesma perspectiva da RPG Top-Down.
A técnica do “ponto de fuga local” é bastante usada em personagens e elementos do cenário.
Oblique Top-Down  Oblique Top-down Tamanho: grupos de 8×8 ou 16×16
Proporções: 1 : 20/13 : 1
Muito estranha.
RPG Oblique  RPG Oblique Tamanhos: 8×8, 16×16, 24×24, 32×32, etc.
Proporções: 1 : 1 : 1
Dois planos visíveis e com os três eixos com as mesmas proporções.
Planometric Oblique  Planometric Oblique Tamanho: 48×48
Proporções: 1 : 1 : 1
Muito Interessante. Três planos visíveis.
RPG Top-Down  RPG Top-down Tamanhos: 16×16, 32×32
Proporções: 1: 11/16: 1 ou 1: 1/2: 1
Bastante comum.
Trimétrica Trimétrica Baseados na relação 2×1 ou 4×1.
Proporções: 1 : 1 : 3/4 e 1 : 1 : 1/2
Não tem simetria.
Earthbound Oblique Earthbound Oblique Tamanho: livre.
Proporções: 1 : 1 : 1/2
É uma das projeções cavaleira.
Isométrica  Isométrica Tamanhos: 32×16, 64×32, 128×64, etc.
Para ilustrações usa-se uma variação de 30×31
Proporções: 1 : 1 : 1
Bastante comum
Ortho Side-view Ortho Side-view Tamanhos: 8×8, 16×16, 32×32, livre.
Proporçòes: 1 : 1 : 0
Utilizada por quase todos os jogos de plataforma. É mais precisa, pois o jogador sabe exatamente onde pisar.
Oblique Side-view  Oblique Side-view Tamanhos: 8×8, 16×16, 32×32, livre.
Proporções: 1 : 1 : 1/2 ou 1 : 1 : 1/4 ou 1: 1 : 1 (você é livre para especificar).
Mais dinâmica, não recomendável para jogos de plataforma que precisem de pulos precisos.
Você pode especificar a direção do eixo Z (para o lado, como em Super Time Force Ultra, ou para cima).

Agora veremos alguns exemplos interessantes.

Exemplos Interessantes

Na prática, os jogos tentam utilizar uma série de truques para serem mais agradáveis (ou real) visualmente, que é o caso de uma perspectiva cônica. O mais comum é o efeito de paralaxe, tornando objetos distantes menores, com menos saturação e contraste, e movendo-se numa velocidade menor. Outro exemplo é a utilização de pontos de fuga “locais”, pois apenas se linhas paralelas daquele objeto convergem para o ponto de fuga (como nas portas das figuras abaixo).

No jogo Aladdin de SNES, podemos ver que ele tenta simular uma perspectiva cônica. A câmera está olhando para um ponto no horizonte (as linhas verticais não convergem) e está a uma certa altura do chão (podemos ver bastante coisas no plano do chão).

Em primeiro plano, podemos ver a parte de cima da tenda de algumas barracas (logo, a câmera está acima destas tendas).

No próximo plano, temos as plataformas do jogo em si. Repare que cada lado das bordas das plataformas do chão são levemente inclinados para sugerir um ponto de fuga, mas como esses tiles são reutilizados, na prática acabam sendo projetados de forma paralela. Outro ponto interessante, são as plataformas que simulam a perspectiva cônica, pelo escorçamento, a medida que a altura aumenta (cada vez menos podemos ver a parte de cima de cada plataforma).

A seguir, cada barraquinhas possuem seu próprio ponto de fuga (no centro da barraca e um pouco acima da mesma). Já as janelas mais próximas dos prédios, possuem uma perspectiva ortogonal (claro, isso é uma consequência da reutilização dos assets). As janelas que estão mais distantes são sempre colocadas acima das janelas citadas anteriormente, e para simular a perspectiva cônica, são desenhadas como se câmera estive num nível abaixo destas janelas.

Nos próximos planos, devido a distância, os elementos começam a se achatar mais, perder contraste e saturação (perspectiva “área”) até ficarem apenas com a silhueta. Não podemos esquecer do efeito de paralaxe, outro elemento importante para simular uma perspectiva cônica.

Funcionalidades

“Form follows function.” Louis Sullivan

Se um elemento gráfico do jogo tem algum funcionalidade, significa que ele está atrelado a alguma mecânica do jogo. Logo isso terá de estar descrito no Game Design Document, e antes de elaborar o asset é preciso ler e entender bem o documento. Pois a aparência do asset vai depender da sua funcionalidade.

Enfim… Vimos estes assunto apenas de forma superficial. Qualquer dúvida, deixe um comentário abaixo. Além disso, entrarei em mais detalhes durante os desafios semanais. E o próximo tutorial será de Tilesets! Aguardem.

Links Úteis

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s