Se você procura uma ferramenta simples e eficiente para criar pixel art e sprites animados para jogos digitais, o Piskel é uma excelente opção.

Ele é um editor online gratuito que funciona no seu próprio browser, sem a necessidade de instalação.

A interface é bem intuitiva e você pode acompanhar uma prévia da sua animação enquanto desenha. O Piskel te permite trabalhar sombras e degradês, alterar cores, ajustar a iluminação e muito mais.

Algumas funcionalidades como a de espelhar o desenho por meio do Vertical Mirror, ou seja, tudo que desenhar de um lado da tela será espelhado do outro lado, torna a vida do iniciante ainda mais fácil.

A ferramenta permite ainda exportar em vários formatos, como GIFs animados ou spritesheet PNG/ZIP (para projetos maiores).

Continue lendo este artigo para saber mais sobre:

Afinal, o que são pixels e sprites animados?
Utilizando o Piskel de graça e sem instalar nada
Começando a utilizar o Piskel (passo-a-passo)
Exemplos de jogos que utilizaram o Piskel
Vantagens e desvantagens: Comparando o Piskel com ferramentas similares

Preparado? Então vamos começar!

Afinal, o que são pixels e sprites animados?

O pixel é o menor ponto de uma imagem digital e uma pixel art é a criação de um objeto ponto a ponto utilizando pixels. Na imagem abaixo temos uma boa visualização do que é pixel e como podemos criar um objeto trabalhando cores e pontos no Piskel.

Além de criar sua pixel art, o Piskel também é útil para criar seus sprites.

Para fazer um personagem andar, por exemplo, precisamos de pelo menos dois sprites. Um do personagem parado e um do personagem com um pé levantado. Quando unimos esses dois sprites temos uma animação básica do personagem caminhando.

Como você deve imaginar, quanto maior o número de sprites com poses diferentes do seu personagem, mais fluida será a animação.

Veja por exemplo um spritesheet do Mega Man correndo usando 8 sprites:

E aqui podemos ver como fica a animação final:

Quanto mais você entender dos conceitos de animação, melhor ficará seus sprites animados. Mas não se preocupe: para começar basta um certo “bom senso” e algumas boas referências de sprites animados para copiar as poses e efeitos.

Dê uma olhada por exemplo nesses dois excelentes mini-tutoriais feitos pelo Pedro Medeiros (@saint11), da Miniboss Studios:

Utilizando o Piskel de graça e sem instalar nada

Como usar o Piskel de graça e sem baixar

O Piskel é uma ferramenta online, ou seja, você utiliza no seu navegador, e open source, o que significa que ele está disponível gratuitamente e continuará dessa maneira.

Ela permite que você crie pixel art, salve em uma galeria online utilizando uma conta do Google (mais sobre isso abaixo) e exportar seus objetos como spritesheets ou GIFs animados.

Navegadores que suportam o Piskel:

Chrome (última versão)
Firefox (última versão)
Edge (última versão)
Internet Explorer 11

Se você quiser usar o Piskel na versão offline, você pode baixar uma versão da ferramenta Piskel no site: https://www.piskelapp.com/download. Essa versão offline está disponível para Windows, Mac OS X and Linux.

Mas antes de sair instalando no seu computador achando que é melhor, saiba o seguinte: a ferramenta foi desenvolvida para rodar em navegador, então a recomendação do desenvolvedor é que ela seja utilizada online, pois o desempenho é bem melhor.

Outra questão que você precisa observar é que a versão offline não está conectada à versão online, ou seja, o que você faz offline não estará disponível online e vice-versa.

Começando a utilizar o Piskel (passo-a-passo)

Você tem algumas opções para começar a usar o Piskel. A primeira é entrar no link da ferramenta e fazer login utilizando uma conta Google.

A segunda opção é clicar direto em “Create Sprite” e ir direto para a tela do editor, sem a necessidade de login (como explico mais abaixo).

E a terceira opção é baixar a ferramenta e instalar no seu computador, lembrando que esta versão offline não está conectada à online.

Caso não queira logar utilizando uma conta Google, lembre-se que é importante salvar seu projeto antes de fechar o navegador.

A vantagem de criar seus projetos logado em uma conta Google é que eles ficam salvos na nuvem e você pode deixá-los ocultos ou abertos para visualização de outras pessoas.

E aí, preparado para testar a ferramenta? Então vamos começar.

Primeiro, abra numa nova aba o link http://www.piskelapp.com/ e, na sequência, clique em “Sign in”, no canto superior direito da tela:

Você será direcionado para uma página de login do Google para que possa se conectar. Caso não tenha uma conta Google, é necessário criar uma antes de prosseguir.

Após se conectar, entrará em um painel de controle no qual poderá criar seus sprites e visualizar a sua galeria. A interface da galeria é essa:

Um recurso interessante é que você pode clonar e editar os sprites de outros usuários caso estejam públicos, basta ter o link do perfil do usuário. Essa é uma excelente forma de testar a ferramenta.

Deixa eu te mostrar como funciona: acesse o link: https://www.piskelapp.com/user/106001, clique em um dos sprites e, na sequência, clique em “Clone”.

Pronto! O sprite escolhido já está na sua galeria. Agora é só clicar em “Edit Sprite” para abrir a tela de edição e começar a brincar no Piskel.

Note que na barra lateral esquerda ficam as tools de edição, no centro temos a tela de desenho e na lateral direita temos as camadas (layers), a visualização da animação e recursos como paleta de cores, salvar, exportar, importar, redirecionamento de tela.

Agora, vá até a ferramenta e teste alguns desses recursos.

Cada tool conta com dicas de atalho para melhor utilização da mesma, basta passar o mouse em cima da tool para conhecê-las.

Para criar um sprite novo, basta clicar em “Create Sprite” no canto superior direito do seu editor. Para salvar, clique no ícone “Save”, na barra lateral direita.

Cada layer no Piskel pode conter, por exemplo, um estado diferente da futura animação. O usuário é quem decide também, livremente, a duração de cada quadro e de cada transição, sendo também possível duplicar, renomear, remover e mover cada um deles (é possível até mesmo definir a quantidade de FPS – frames per second, ou quadros por segundo).

A ferramenta permite:

Decidir a duração de cada quadro e de cada transição.
Definir a quantidade de FPS (quadros por segundo).
Duplicar, renomear, remover e mover quadros.
Segurar a tecla “Shift” ou “Ctrl” na utilização do “Vertical Mirror Pen”.
Mudar o tamanho da tela de pintura (barra lateral direita).
Usar “Layers” para organizar a pixel art.

Vamos conhecer melhor o Piskel? As ferramentas da lateral esquerda do editor são utilizadas para desenhar, selecionar, mover, pintar, apagar, espelhar o desenho. São elas:

Caneta (P) – utilizada para desenhar

Borracha (E) – apagar o desenho

Retângulo (R) – criar um retângulo

Mover (M) – pode ser utilizada para mover as camadas, os frames ou o desenho dentro da tela de pintura.

Seleção Retângulo (S) – serve para selecionar uma área retangular. Utilize CTRL + C para copiar, CTRL + V para colar e Shift para mover a área selecionada.

Lighten (U) – serve para sombrear o desenho, sendo que segurar o CTRL escurece.

Selecionador de Cor (O) – seleciona uma cor sem precisar tê-la na sua paleta.

Vertical Mirror pen (V) – serve para espelhar a imagem. Utilize CTRL para espelhar na horizontal e Shift para espelha na horizontal e na vertical.

Pintar todos os pixels da mesma cor (A) – serve para pintar um conjunto de pixels que tenham a mesma cor. Primeiro, selecione a cor que deseja e depois clique em um dos pixels. Automaticamente todos os pixels que tenham a mesma cor do selecionado serão pintados.

Linha reta (L) – utilize para desenhar uma linha reta.

Círculo (C) – utilize para desenhar um círculo.

Seleção de forma (Z) – permite selecionar formas na área de desenho e movê-las. Utilize CTRL + C para copiar, CTRL + V para colar e Shift para mover a área selecionada.

Seleção Laço (H) – utilize essa ferramenta caso queira mais liberdade para selecionar uma área, pois ela proporciona um formato livre de seleção.

Pontilhamento (T) – funciona semelhante a caneta, mas com a vantagem de pular pixels. Conforme vai desenhando, a imagem vai sendo formada com intervalos de pixels.

Esta ferramenta serve para selecionar a cor primária e secundária. Clicando na seta, você pode inverter as cores.

Agora, vamos conhecer os recursos localizados na lateral direita do editor Piskel.

É nesta janela que aparecerá a animação dos seus sprites. O botão Toggle Onion Skin no canto esquerdo permite visualizar uma projeção semitransparente das telas anterior e seguinte ao sprite atual.

Já o controle Frames Per Second (FPS) serve para verificar a suavidade da animação, podendo ajustar até 24 FPS.

Layers ou Camadas – recurso que permite criar, mover, editar, mesclar e excluir camadas.

Transformar – permite modificar a tela de pintura. As opções (da esquerda para a direita) são: girar verticalmente, girar no sentido anti-horário e clonar a camada atual, alinhar a imagem no centro da tela de pintura.

Paleta de cores – este recurso permite que você crie, edite e salve suas paletas de cores. Criar uma paleta de cores é bem simples! Vamos testar? Abra seu editor Piskel, localize o recurso Paleta de Cores (Palettes) e clique em +. Será aberta uma caixa na qual você precisará inserir alguns dados.

Primeiro, nomeie a paleta. Você também pode importar uma imagem ou paleta. Use um código HTML ou ajuste as cores da paleta a partir dos controles disponíveis.

Para adicionar uma nova cor à paleta basta clicar no quadrado pontilhado que contém um + (como a gente pode ver na imagem ao lado):

Depois de adicionar todas as cores que deseja, clique em Save, no canto inferior direito.

Temos também recursos bem importantes, como definir as preferências, redimensionar a área de desenho, salvar, exportar e importar objetos.

Em preferências, você pode definir o background, a opacidade da camada, o número máximo de FPS e o formato de cor do desenho (Hex ou RGB). Pode ainda ajustar as configurações do grid.

Em redimensionar você ajusta a área da tela de pintura e na opção Salvar, salva o objeto na sua galeria Piskel na versão online, sendo possível salvá-lo offline no Browser ou no seu computador como arquivo no formato .piskel.

O recurso Exportar permite exportar imagens, spritesheet e Gifs animados, e o recurso Importar permite importar imagens, gifs animados e arquivos no formato .piskel.

Exemplos de jogos que utilizaram o Piskel

Quando decidi escrever este artigo sobre sprites animados, o primeiro exemplo de jogo que me veio na cabeça foi o Nuclear Fart, de um aluno da Academia de Produção de Jogos.

Durante a 4a Maratona Academia PDJ (um evento online de desenvolvimento que fazemos com os alunos), o Nuclear Fart foi desenvolvido pela equipe Pixel Travelers, do Lucas Soares.

Dá uma olhadinha no Devlog que o Lucas criou no nosso fórum interno durante o evento:

Durante a concepção e criação do Nuclear Fart, o Lucas foi postando algumas animações que produziu para o game.

Olhe por exemplo essas animações do dinossauro e seu ovo:

E no gif abaixo, a tela de abertura do jogo:

E por último, uma animação do gameplay do jogo:

Bem maneiro, não acha?

Correção: embora todas as animações mostradas acima pudessem ter sido feitas no Piskel, o Lucas comentou abaixo que usou o Aseprite para o Nuclear Fart.

Numa rápida pesquisa também encontrei que o Laboratório de Games da PUC-RJ produziu três jogos utilizando Piskel, sendo eles: O Resgate (2017); As Aventuras de Lara (2017); e Em Busca do Amor (2017). Para baixar os jogos, visite o itch do Lab de Games: https://rpgriopucgames.itch.io/laboratriodegames2

O indie game Retro Space Ball, desenvolvido pelo artista RikOclon, também foi produzido utilizando o Piskel para criação da pixel art. Você pode conferir o jogo aqui: https://rikoclon.itch.io/retro-space-ball

Outro indie game que também teve seus gráficos produzidos no Piskel é o Ghostory. Desenvolvido pela RigidCore Games, o game é um 2D puzzle de aventura no qual o personagem é um viajante solitário que sofre uma maldição e, por isso, ele pode assumir a forma de fantasma e humano, dependendo do que vai acontecendo ao longo do jogo. O objetivo do personagem é sair da caverna.

Confira mais alguns trabalhos desenvolvidos com Piskel:

Raijin Run – https://www.artstation.com/artwork/wel09
Vatigun – https://www.artstation.com/artwork/GVK13
Rombo – https://www.artstation.com/artwork/rddVO
Heartless – https://medinam.itch.io/heartless

Vantagens e desvantagens: Comparando o Piskel com ferramentas similares

Acredito que a maior vantagem do Piskel é ter uma versão online e ser totalmente gratuito.

O Aseprite, por exemplo, tem uma versão trial, mas você não consegue salvar o seu trabalho. O Graphics Gale é um editor gráfico focado em pixel art e também é uma boa opção, a diferença é que precisa baixar e instalar. O Pro Motion NG também tem uma versão gratuita, mas com muitas restrições.

Já no Paint, MSPaintXP ou no PIQ, sendo este último uma ferramenta online, você só consegue criar a pixel art, pois não tem recurso de animação.

O Pixel Art Maker também é um editor online, mas não tem opção login para salvar os projetos na nuvem e nem recurso de animação. É um editor bem mais simples que o Piskel.

O Photoshop (sem Anti Aliasing) também é uma opção, mas por ser uma ferramenta mais complexa e utilizada para diversas finalidades, a curva de aprendizagem é um pouco maior.

Semelhante a interface do Photoshop, temos o Krita e o GIMP, ferramentas de desenho open source e que também permitem animação. Temos também o IDraw Chara Maker 3, um programa simples que é mais voltado para a criação de sprites para jogos de RPG.

De qualquer forma, eu recomendo que você utilize o Piskel em suas primeiras aventuras em Pixel Art e sprites animados.

Conforme você for aprendendo mais sobre técnicas de Pixel Art e animação, poderá optar por utilizar uma ferramenta mais avançada ou continuar extraindo o potencial máximo do Piskel.

Pronto para colocar a mão na massa?

Neste artigo eu te dei uma visão geral do Piskel e suas principais funcionalidades, mas nada como experimentar na prática como as coisas funcionam.

Por isso, eu tenho um desafio pra você!

O Piskel realmente é o tipo de ferramenta que você consegue abrir pela primeira vez e já sair criando coisas.

Então o que eu quero que você faça agora é o seguinte:

Abra o Piskel no seu navegador: https://www.piskelapp.com/
Siga os passos deste artigo (caso ainda não tenha feito) para entender rapidamente a sua interface;
Invista 10 minutos criando a sua primeira animação (não importa quão simples ou boba seja. Apenas faça!).

Seguir os passos acima não vai te tomar mais de 15 minutos. E eu te garanto que você se sentirá muito bem em já colocar em prática o que aprendeu neste artigo.

Na maioria das vezes não precisamos estudar ainda mais antes de dar o próximo passo. O que precisamos é praticar o pouco que aprendemos.

Agora chegou a sua vez de praticar. Siga os passos acima, faça sua primeira animação e me mostre colocando nos comentários abaixo ou me marcando no twitter @prodjogos.

Vou ficar esperando para ver sua primeira animação!

e você quer criar jogos simples e com potencial de lucro, você precisa conhecer jogos semelhantes que tiveram boas vendas na Steam.

Para isso, eu criei um ebook com uma seleção de 16 jogos simples e interessantes que você poderia ter feito em poucas semanas.

Além dos jogos, também incluí a quantidade de cópias vendidas de cada um desses jogos (dados reais vazados da Steam).

Faça o download do ebook gratuitamente no botão abaixo: