[TUTORIAL] Coisas para evitar - Spriting

[Thayam 187]

Fala ai meus amigos do TK!

 

Durante a noite recebi algumas PM's sobre alguns sprites feitos, e neles percebi alguns erros básicos, que eu também cometi e que você também irá cometer haha!

Então resolvi trazer este novo tutorial para a comunidade, que fala sobre "Coisas para se Evitar" na hora de fazer sua sprite, acredito que será uma mão na roda para aqueles que estão iniciando neste mundo

Enfim, chega de enrolar vamos lá:

 

Coisas para evitar na hora de criar sua sprite!

AA Ruim:


Muito AA (anti-aliasing demais) – você só quer usar o AA necessário para suavizar a borda. Se você usar muito, as bordas podem parecer borradas, e você perde a nitidez da linha:



 

Muito pouco AA – aqui o artista usou pixels independentes para facilitar a transição, mas ele apenas conseguiu embotar a borda um pouco. Ele podia ter feito uma transição mais suave usando linhas longas para mostrar uma transição mais gradual como no segundo exemplo:

 

AA banding - quando segmentos de AA se ligam com as linhas que estão suavizando, o AA banding ocorre. Estarei criando um tópico para melhor explicação do AA banding

 

 

Anti-aliasing (o temido pelos bravos jovens aventureiros haha )

A não ser que sua linha esteja perfeitamente horizontal, perfeitamente vertical, ou em 45 graus, as bordas de seus segmentos de linha, naturalmente, serão um pouco irregulares.



Por conta da natureza quadrada do pixel e do padrão de grade, estamos restritos a fazer linhas angulosas e curvas difíceis de retratar. AA é a contramedida correta nestas situações.






Dithering ruim:

Existem várias maneiras comuns em que o dithering é mal utilizado. O erro mais comum é simplesmente o uso demasiado do dithering. Se o dithering está cobrindo metade do Sprite, provavelmente só será melhor se você adicionar uma nova cor à paleta. Pontilhados deveriam idealmente ser utilizados para afunilar as extremidades e bordas de um campo opaco de pixels. Quando muito dithering é usado, a área pontilhada se transforma em um campo próprio:



Neste ponto o dithering não está mais servindo como um amortecedor entre as cores, mas criando texturas indesejáveis. Criação de textura pode ser um aspecto útil de dithering, mas apenas quando usado corretamente. Se você está tentando suavizar ao invés de adicionar textura, então o dithering não está funcionando como deveria.

 

Banding:

Banding, mais simplesmente, é quando os pixels se alinham. Quando pixels vizinhos terminam na mesma coordenada x ou y na grade subjacente, a grade imediatamente se torna mais evidente, os pixels estão expostos e a resolução aparente se torna menos legal.
Aqui estão vários exemplos de banding, os quais ocorrem porque os pixels se alinharam. Estes nomes não são linguagens comuns, mas vão funcionar para os fins deste tutorial:

Hugging:

Aqui um campo de cor opaca é contornado por uma fileira de pixels. É bom usar contornos, mas certifique-se o contorno e a forma que ela contém não se alinham e revelam a grade.



Pixels gordos:



Pixels gordos podem ocorrer sozinhos em quadrados pequenos, juntos como linhas gordas, ou multiplicados como largas linhas (escadas de banding).

Banding pula-um:



Mesmo se houver um espaço negativo entre duas coligações, a mente irá preencher a lacuna e a coligação permanecerá.

Banding 45 graus:



Embora as linhas de pixels se alinhando tenham apenas 1 pixel de espessura, coligações ainda estão presentes.

 

 

 

Pillow-shading:

Sombreamento cercando uma área central com tons cada vez mais escuros.
O Pillow-shading é ruim porque não presta atenção à fonte de luz, e conforme a forma da área e não da forma que ela representa de como a luz a afeta. Pillow-shading é, muitas vezes, mas nem sempre, combinado com banding. A maneira de corrigir o Pillow-shading é simplesmente prestar atenção de onde vem a direção da luz:



A razão pela qual o pillow-shading está errado não é porque a fonte de luz é frontal (da direção do espectador). Você não tem que colocar a fonte de luz no canto. A razão pela qual o pillow-shading é incorreto é porque segue formas planas e não se concentra em como as formas tridimensionais são literalmente.
Assim, é possível usar uma fonte de luz frontal, desde que você preste atenção às formas:

 

Ruído:

Na maior parte do tempo, pixels independentes (pixels que não pertencem a um grupo de pixels) são incapazes de transmitir informações suficientes por si só, e a sua inclusão normalmente só cria ruído. O ruído é qualquer tipo de informação que não contribui para a peça e serve apenas para interromper a área que habita e distrair o espectador. No pixel art, o ruído é muitas vezes composto de pixels independentes. Para os fins deste tutorial, o ruído de pixel único será o que eu estou me referindo quando eu uso o termo "ruído". A razão pela qual é preciso ter cuidado ao usar um pontilhado 25% (ou qualquer dithering, na verdade) é por causa do ruído que todos os pixels independentes criam.
Pixels independentes expõem a grade subjacente, revelando a resolução da imagem. Lembrem-se, na natureza, pixels viajam em grupos. É a natureza de um pixel pertencer a um lugar num grupo de pixels. Por esta razão, pixels independentes só devem ser usados por razões muito específicas e propositais.

Casos justificáveis da presença de pixels independentes:

Usado como realces especulares

Detalhes independentes chamam bastante a atenção para si, mas às vezes isto é exatamente o que você deseja. Para brilhantes reflexos especulares, pixels individuais, muitas vezes, funcionam muito bem. Para um exemplo, veja o pixel branco usado no nariz do monstro abaixo.

Representando detalhes pequenos mais essenciais



Normalmente, será apenas uma questão de detalhes em imagens muito pequenas, como os olhos em um sprite pequeno, ou o bico de um pássaro pequeno. Ou estrelas, ou pequenas bolhas.

 

Sel-out (contornos quebrados)

Sel-out (abreviação para selective outlining, traduzido para linhas quebradas) é suavizar uma linha para a cor do plano de fundo. Isto significa que o sel-out é realmente um tipo de AA ruim, mas o termo se tornou popular o suficiente para justificar sua própria seção.



A ideia é geralmente escurecer o contorno para aproximar-se de uma cor mais escura, de modo que o sprite será bem interpretado em qualquer fundo, ao invés de fundir em um fundo da mesma cor. Sel-out não é o sombreamento de um contorno de acordo com uma fonte de luz. Um contorno completo com variação de luz não criará acentuações tão pior quanto uma linha quebrada irá:



Talvez este seja um exemplo mais simples. O semicírculo à esquerda é sombreado de acordo com uma fonte de luz (mais uma vez, vindo do canto superior esquerdo). A parte superior do semicírculo à direita tem sel-out aplicado:

 

É Isso ai pessoal, não vou prolongar mais o assunto pois já ficou um tópico muito grande. Mas esses são erros comuns, mas que são fáceis de serem evitados, nesse final de tutorial você já deve ter rabiscado alguma coisa ai no seu pc não? Porque não posta aqui, para que possamos avaliar e compartilhar conhecimento? haha

 

Agradeço a atenção de todos e até o próximo Tutorial

 

 

Créditos:

Pixelaria (Tutorial)

Thayam (Trazê-lo ao TK)

Way20 (por indica-lo quando comecei minha jornada)

Editado Janeiro 20, 2015 por Thayam (veja o histórico de edições)

[luanluciano93 1993]

Tópico aprovado e movido para a seção correta. Ótimo tutorial amigo, obrigado por compartilhar, reputado.

[Thayam 187]

Eu que agradeço cara, vamos movimentar esta seção tão daora, porém ultimamente meio vazia :/

 

abraço