[MINI-TUTORIAL] Desenhando sprites/tilesets

Aprendendo a desenhar sprites (para iniciantes)
por Mr.Rafael
-----

No desenvolvimento de um jogo, muitas coisas são vitais para se aprender e executar. Se fossemos resumir, teríamos quatro requisitos:
• Programação
• Sons/músicas
• Roteiro
• Arte

Programação? Beleza, o GM te dá uma facilidade para aprender.
Sons? Não tenho conhecimento, mas desde que eu pegue uma música e dê ao autor os devidos créditos, dá para se sustentar.
Roteiro? Todo mundo tem aquele "quê" para fazer uma redação, ou um conto pequeno.

Agora vamos falar de arte... espere, não sei desenhar! Pois é, mesmo que você se importe mais com a "diversão", gráficos são importantíssimos na criação de um jogo. A harmonia entre eles faz toda a ambientação do jogo, é o que torna a situação do jogo mais crível. Quer um exemplo? Em um jogo de futebol, sua ambientação se torna muito boa com um gramado. Um jogo em que você controla um astronauta? Tons cinzas e rochas dão uma boa impressão.

Vou passar um mini-tutorial que eu, honestamente, nem sei se vou ter coragem de fazer uma continuação depois ('-'), mas enfim:eu não sei desenhar, mas o resultado dos meus sprites são bem satisfatórios. E vou dar uns toques para quem, assim como eu, não sabe desenhar nada e entrega um jogo com um monte de rabiscos/sprites roubados de outro jogo.


Se você é do tipo que mexe mais com linhas de código do que pincéis, sugiro a você o estilo mais básico de todos: Pixel-art. As vantagens são muitas:
• Trabalhar em planos menores (usaremos 16x16)
• Não requer efeitos ou ferramentas avançadas para serem desenhados (mas podem ser aplicados)
• Dá um ar mais "retrô" ao jogo, o que facilita a ambientação

Essa técnica limita-se muito aos projetos 2D e podem requerir mais trabalho para trabalhos "grandes" como RPG's e jogos de tiro. Mas para o mini-tutorial já basta.

Não usaremos nem o Paint nem o editor do GM. Enquanto um não tem zoom o suficiente para trabalhar, o outro é menos acessível (acessibilidade no quesito de abrir e editar de forma rápida). Aqui eu estarei usando o ASE Sprite, um editor gratuito muito bom para o que vamos fazer. Quem se interessar pode baixá-lo no próprio site dele.

Ao abrir o programa, vá em "File - New...". Na tela que vai abrir, coloque os valores de Width e Height em 16. O resultado é uma aba com o plano em 16x16.

Tiles são pedaços de uma imagem grande, que podem ser colocados de forma mais leve e fácil para o background ou foreground. Eu não estou ensinando a "usar tiles no GM": estou apenas mostrando alguns princípios para desenhá-los.

Começando por algo simples, como um formato rochoso:

Ok, temos o traço do que parece ser uma pedra. Mas temos uma coisa interessante: observe os pontilhados vermelhos na imagem abaixo:

Um mesmo tile deve sempre poder ser reutilizado. Para parecer mais natual, os sprites seguem repetições no fim de cada lado. Seu tile precisa se "camuflar" no meio dos demais, fazendo que o jogador não perceba o início e o fim deles. O exemplo mais básico de repetição é o plano xadrez.

Vamos pintar as pedrinhas e ver o resultado:

Mas afinal, por que essa frescura toda? Vejamos neste exemplo de tileset mal-feito:

Os retângulos em amarelo mostram as falhas de repetição. Note que as "pedrinhas" não se fecham corretamente.
A parte em azul-claro é a mais interessante. O "traço" se repete 3 vezes em cada linha/coluna. Através dele também descobrimos onde fica o 'lado" do sprite.

Quando terminar os traçados, forme um plano simples para ver se a repetição está certa. Um fator interessante é que, se a repetição estiver adequada, independente do lado que você recortar no tamanho certo, eles sempre se repetirão corretamente. Claro, não é o caso da imagem acima.


Será que aquele tileset que fizemos no início está pronto? Não mesmo. Precisamos dar a aparência arredondada das pedrinhas. Fazemos isso com sombras.
A sombra é uma extremidade feita em cor escura, feita para dar destaque em alguma parte do desenho. No caso, fizemos isto:

Repare que, em cada pedrinha, eu coloquei alguns traços em verde-escuro na parte inferior delas. Dependendo de como você colocar, a aparência pode ser afundada/pressionada, arredondada (que eu fiz aqui), cilíndrica, etc.
Por falar nisso, você já notou as pedrinhas, não é? Não?! Ok, lá vamos nós mostrar o que são as pedrinhas do sprite:

A parte em vermelho indica o fragmento da figura. Este fragmento é uma pedrinha.
Também tem uma comparação com o fragmento sem sombra e com sombra. A diferença não fica visível quando o zoom está alto, mas poderemos ver claramente abaixo como a figura está...


Finalmente, temos o resultado do tileset :

Espero que tenham gostado deste mini-tutorial! Se eu conseguir tomar coragem para montar outras partes, eu coloco aqui '-'
E quem souber desenhar, gostaria de pedir um tutorial desse tipo também.

o/

muito bom tutorial cara, vai ajudar muita gente por aí, mas eu prefiro o editor de imagens do Game Maker , continue com esse tutorial aí, deixará tudo mais original aqui pelo fórum, pois vejo que alguns fazem com as sprites do Game Maker

gostei de seu tuto! eu não conseguia fazer tilesets que se repetiam de forma a se camuflar, mas agora está esclarecido o porque!
Valew! me ajudou e muito com isso!

muito bom,

(É isso! Tanta enrolação para a criação de um reles tileset de pedra verde. )

hehehe eu tenho é preguiça de desenhar os tiles com formas aleatorias...

Um mesmo tile deve sempre poder ser reutilizado. Para parecer mais natual, os sprites seguem repetições no fim de cada lado. Seu tile precisa se "camuflar" no meio dos demais, fazendo que o jogador não perceba o início e o fim deles. O exemplo mais básico de repetição é o plano xadrez.

Isso é extremamente importante e é algo que todo mundo devia considerar antes mesmo de começar a fazer o tile.
Bem observado.

Você não devia usar essas linhas pretas demarcando as formas porque deixa o desenho mais artificial (afinal não existem linhas!) e por ser uma imagem pequena o espaço gastado com elas pode ser usado para detalhar ainda mais a forma.
Deixar que as próprias cores de sombra e luz deem a forma as pedra deixa a imagem mais bonita.