Desenhe chão em pixel art para um jogo de plataforma, passo a passo

Para desenhar chão para um jogo de vista lateral ou de plataforma, faça o contorno de um bloco simples, preencha com um tom médio de marrom, adicione uma linha escura embaixo da borda de cima e ilumine o topo com três cores de luz, já que o sol está em cima. É um dos sprites mais rápidos que existem. Desenhe abaixo.

Este sprite é largo. É mais fácil desenhar no computador, ou com o celular deitado.

Passo 1

Cores deste passo
Ferramentas
Guia

Mostrar o passo pronto
Timelapse do vídeo do curso do Roman: a mesma peça desenhada no Aseprite, acelerada 31 vezes
Do vídeo do meu curso: a mesma peça, desenhada na câmera, acelerada 31 vezes.

Como o chão é construído

Olhe a estrutura primeiro. Tem o topo do chão, que é iluminado. Embaixo dele tem uma sombra fina, porque o topo se projeta um pouco. E depois o corpo, com um pouco de textura. O chão usa cinco cores: um tom médio, uma sombra e três luzes. A grama, se você quiser, ganha seus próprios verdes.

Passo 1: contorno

Contorno preto de um bloco de chão com o topo um pouco mais largo

Não tem segredo nenhum. Comece no nível onde o chão deve ficar, desenhe uma linha de 15 pixels, desça um pixel, entre um pixel na diagonal, depois desça reto e feche a forma. Desenhe numa camada própria.

Passo 2: Cor

O bloco de chão preenchido com um marrom chapado

Preencha o bloco com o tom médio de marrom e recolore o contorno da mesma cor.

Passo 3: sombreamento

O chão com uma linha escura embaixo da borda de cima e alguns pontinhos escuros

Você só precisa de uma linha da cor escura logo embaixo da borda de cima. Ela mostra que o topo se projeta para fora. Depois espalhe alguns pixels escuros pelo corpo para dar textura.

Passo 4: Luzes

O chão com o topo em laranja claro e creme

A luz vem de cima, então o topo do chão recebe as luzes. Preencha com a mais escura das três cores de luz, adicione uma linha da segunda e termine com alguns pixels da mais clara. Eu deixo três pixels, ilumino o quarto e depois faço mais três. Esses pequenos detalhes deixam o chão com um visual nítido.

Adicione grama

O mesmo bloco de chão com grama verde em cima

Aqui vai um pequeno desafio. Use os verdes para colocar grama no topo, com suas próprias luzes e um pouco de sombreamento. Desenhe a grama numa camada separada. Assim você pode ligar e desligar e ter dois estilos de chão com um sprite só.

Monte uma cena

Uma pequena cena em vista lateral com chão gramado dos dois lados da água e nuvens no céu

Copie o chão, cole e espelhe na horizontal (Shift+H no Aseprite) para o outro lado. Depois mude algumas luzes de lugar para os dois pedaços não parecerem cópias. Quando você conhece a estrutura básica, consegue fazer qualquer variação: uma plataforma flutuante, uma beirada, um bloco com os cantos cortados. Adicione as nuvens e você tem uma pequena fase.