Agora que você já sabe o que são
Sprites, vamos descobrir como cria-las da maneira mais simples e objetiva possível.
Neste post vamos conhecer melhor uma ferramenta de criação e animação de pixel
art e vamos praticar criando um projeto exemplo do clássico Super Mario com a animação de corrida.
Conhecendo o Piskel
Para facilitar nessa tarefa, vamos utilizar a ferramenta
Piskel por ser uma das mais praticas que testei ate agora! não precisa
instalar nada no computador.
piskel é uma ferramenta online
(esses são alguns dos meus desenhos, para quem nunca tinha desenhado nada na
vida, acho que comecei bem.)
Para começa acesse https://w.piskelawwpp.com/
. sugiro que crie uma conta para poder salvar suas criações online. depois de
tudo feito está na hora de começa seu projeto.
acesse "Create Sprite" para iniciar um novo projeto
esse será seu ambiente de trabalho:
no lado esquerdo temos nossas ferramentas de desenho( lápis, lápis
espelhado, balde de tinta padrão, balde de tinha para cores especificas,
borracha, ferramenta de traçado, ferramenta de retângulo, ferramenta de
circulo, ferramenta de mover, varinha de seleção, seleção retangular,
seleção livre, lighten, ferramenta de catar cor).
Ao lado temos os "frames", falaremos deles depois;
No centro fica nossa área de desenho, aqui que vamos desenhar cada sprite
individualmente.
No lado diretos temos varias ferramentas importantes:
Janela de Pré-visualização: onde você vera em tempo real o
movimento de suas sprites.
Layers: Onde você poderá criar camadas em no seu desenho.
Transform: Onde você poderá aplicar mudanças de posicionamento e
outros.
Paletes: aqui ficam armazenadas as cores que você esta usando no
seu desenho, facilitando o acesso.
Como desenhar bem mesmo sem nunca ter desenhado antes?
não existe formula magica nem "dom", o que existe é pratica e
conceitos. podes praticar pegando exemplos da internet e tentando
replica-los com algumas poucas mudanças. fazer isso algumas vezes vai
te trazer resultados bem satisfatórios em pouco tempo e isso ajudará a
animar a continuar evoluindo suas habilidades artísticas.
outra dica é aprender os conceitos básicos de desenhos como paleta de
cores e sombras. com um domínio razoável desses conceitos você já será
capaz de resultados muito satisfatórios
O que são fremes?
frames são imagens estáticas que combinadas geram a ilusão de
movimento, quanto mais fremes, mais fluido a sensação de movimento
esse GIF por exemplo, o astronauta está se movimentando, mas isso não
passa da ilusão de varias imagens sendo exibidas alternadamente no
tempo certo.
|
|
gif astrounauta 32x32 ampliado
|
|
todos os frames do gif do astronauta
|
É usando frames que vamos animar nossas pixel art, fazendo movimentos
suaves e constantes de um frame para o outro e exibindo de forma ordenada.
em um post futuro vamos usa-las dentro de um projeto de jogo. por enquanto
vamos focar em aprender a fazer e aprimorar as animações.
Projeto de Exemplo
vamos criar um projeto de exemplo para colocar em pratica tudo que
aprendemos acima. nesse projeto vamos recriar o clássico personagem Mario e
anima-lo.
Passo 1: Criar um projeto no Piskel
antes de tudo eu recomendo fortemente que crie uma conta no piskel, assim
será muito mais fácil salvar e editar seus projetos futuramente.
Use o botão 'Create Sprite' para iniciar um novo projeto.
por padrão os projetos no Piskel são criados em 32x32 pixels. vamos usar
esse tamanho para nosso desenho
Passo 2: Por onde começar a desenhar
vários artistas com algum tempo de pratica usam referencias para criar suas
obras, então vamos fazer o mesmo para ter um ponto de partida. Pesquise por
exemplo do objeto a ser desenhado, como vamos desenhar o Mario, vamos
pesquisar exemplos na internet:
|
|
Pesquisa no google: Mario pixel set
|
por ser um personagem criado originalmente em pixels, é muito fácil achar
referencias na internet
vamos usar essa imagem como referencia:
 |
| fonte: depositphotos |
Passo 3: começando os frames
vamos começar da esquerda para a direita da nossa imagem referencia:
para o primeiro frame vamos começar com cabeça do Mário, vamos desenhar seguindo a imagem de referencia. é importante que você escolha as cores manualmente para treinar sua percepção de cores e sombras;
comece pelo chapéu e vá descendo ate chegar no pescoço. tente deixar o mais centralizado possível. caso não esteja, você pode usar a ferramenta de mover (move tool) para deixar o desenho onde você achar melhor.
com a cabeça pronta, você pode duplica-las em outro frames. o movimento será aplicado no corpo do nosso personagem
Ainda no
primeiro frame, vamos começar a desenhar o corpo do nosso personagem, se você seguir a risca o desenho de referencia, não será um trabalho muito difícil.
Já temos nosso
primeiro frame pronto. o Mário parado!
no segundo frame, vamos fazer um sutil movimento nas pernas e nos braços do personagem
por fim, no
terceiro frame vamos fazer mais um movimento sutil nos membros, usando o
segundo freme como referencia!
verifique se os fremes estão visíveis (as caixinhas numéricas tem que está amarelas, indicando que estão visíveis )
sua animação está pronta!
 |
| Gif Personagem andando 32x32 ampliado |
Comentários
Postar um comentário