Como animar uma folha de sprites utilizando o gimp

Como Animar uma Folha de Sprites Utilizando o GIMP

Saber como criar pixel art e sprites se tornou uma habilidade essencial para todos os desenvolvedores de jogos para dispositivos móveis. Leia mais para descobrir como criar seus próprios sprites e onde encontrar recursos para criar sua própria arte em pixels!

O que são Pixel Art?

Pixel art é uma forma de arte digital em que a cor é aplicada a pixels individuais para criar uma imagem. O termo Pixel Art foi publicado pela primeira vez em 1982, embora o conceito existisse há pelo menos 10 anos antes.

Depois de criar pixel art você poderá exportar como formato GIF ou PNG. O formato JPEG não é recomendado, pois usa compactação com perdas que deixa artefatos em suas imagens.

Como Animar uma Folha de Sprites Utilizando o GIMP

Pixel Art pode ser categorizada em duas formas principais, isométrica e não isométrica. A arte pixel isométrica tem uma aparência tridimensional, embora a imagem ainda seja uma forma 2D.

Como Animar uma Folha de Sprites Utilizando o GIMP

6 PASSOS SIMPLES PARA CRIAR UM JOGO PROFISSIONAL E GANHAR DINHEIRO COM ELE.​

ENVIAREI PRO SEU E-MAIL

A pixel art não isométrica apresenta um lado de um objeto, como o topo ou a frente.

Como Animar uma Folha de Sprites Utilizando o GIMP

Um exemplo básico de um sprite animado pode ser visto abaixo:

Como Animar uma Folha de Sprites Utilizando o GIMP

Esta imagem de 512 × 256 é conhecida como uma folha de sprite e é a razão pela qual você pode animar seus sprites. Uma animação de sprite simplesmente mostra uma parte diferente de uma folha de sprite em momentos diferentes para criar uma animação. Há uma grande variedade de animações possíveis para sprites, mas o exemplo acima mostra o uso mais básico de um sprite.

Como Animar uma Folha de Sprites Utilizando o GIMP

Por que você deve usar Sprites?

Se você tivesse que criar cada cena do seu jogo como uma imagem, isso tornaria as coisas muito mais difíceis de editar mais tarde. Com sprites, você pode adicionar e remover elementos visuais como quiser, sem ter que editar qualquer um dos outros componentes visuais da cena.

Isso torna mais fácil projetar cenas complexas do jogo e introduzir novos personagens e objetos para os seus jogadores interagirem.

Melhor performance

Sprites também oferecem um aprimoramento de desempenho, pois coloca menos pressão no seu jogo para repetidamente chamar várias imagens para aparecer na tela.

Em vez disso, uma folha de sprite é chamada e, em seguida, uma parte diferente dela é exibida conforme desejado. É muito mais fácil para o seu jogo chamar uma imagem uma vez e exibi-la de várias maneiras, em vez de solicitar repetidamente novas fontes de imagem.

Como criar pixel art com essas 10 ferramentas

Já falamos sobre como os sprites funcionam, mas agora é hora de começar a criá-los. Para facilitar a experiência com a criação de sprites, você pode usar uma das ferramentas do editor de pixels listadas abaixo. Eles são todos gratuitos para baixar ou usar on-line e podem ajudá-lo a criar o pixel art para sua planilha de sprite.

1. PiskelApp

Como Animar uma Folha de Sprites Utilizando o GIMP

PiskelApp é um editor de pixel online gratuito com ênfase na criação de sprites. Ele permite que você salve seu pixel art on-line e também tem uma função de importação para que você possa usá-lo para editar sua arte pixelizada existente.

O PiskelApp possui uma interface de usuário simples e é uma ótima opção se você quiser mergulhar direto na criação da sua planilha de sprite.

2.Pixie

Como Animar uma Folha de Sprites Utilizando o GIMP

Pixie é outro editor de pixel online totalmente funcional. Embora não seja tão adequado para a criação de sprites como o PiskelApp, ainda é muito fácil de usar e é uma boa opção para quem quer deixar a imaginação correr solta.

A tela branca é o ponto de partida padrão para essa ferramenta e incentiva o desenho à mão livre em vez de desenhos de grade rígidos.

3.Pixlr

Como Animar uma Folha de Sprites Utilizando o GIMP

O Pixlr é um editor de pixels um pouco mais avançado em comparação com os editores anteriores, com uma grande variedade de ferramentas de desenho. Ele oferece o mesmo recurso de salvamento online que o PiskelApp, mas não é tão adequado para a criação de planilhas de sprite.

Se você quiser evitar o estilo de 16 bits que o PiskelApp incentiva, confira essa ferramenta.

4.GrafX2

Como Animar uma Folha de Sprites Utilizando o GIMP

GrafX2 é um programa de pintura de bitmap que inclui uma série de ferramentas e efeitos que o tornam especialmente útil para projetar gráficos de jogos, pixel art e folhas de sprite. É gratuito para download e está disponível em todas as principais plataformas de desktop

5.GIMP

O GIMP é um editor de imagens de código aberto para desktop que pode ser usado para tudo, desde manipulação de fotos até criação de arte original. Você também pode usar o GIMP para criar suas folhas de pixel art e sprite. Embora haja um pouco de aprendizado

6.PyxleOS

Se você está procurando uma ferramenta simplificada que permita focar na criação de arte pixelada excelente, confira o PyxleOS. Este aplicativo de desktop de código aberto é projetado especificamente para a criação de pixel art e é extremamente fácil de pegar e usar.

7.LunaPic

O LunaPic é uma ferramenta online com vários recursos para edição de imagens. Um de seus muitos recursos é a capacidade de pixelizar imagens, até mesmo fotografias.

Você só precisa fazer upload de sua imagem, clique em ajustar -> pixelate, escolha o quanto você deseja pixelizar sua imagem e lá vai você!

8. GraphicsGale

GraphicsGale é um editor gráfico de animação que está disponível em opções gratuitas e pagas. A versão gratuita ainda permite que você crie e salve pixel art no formato png, que é tudo o que você precisa para sua folha de sprite.

GraphicsGale é uma ferramenta fácil de usar com uma ampla gama de ferramentas para criação de imagens.

9. Paint.net

O Paint.net é um software gratuito de edição de imagens e fotos para Windows. Esta é uma ferramenta poderosa com uma grande comunidade por trás dele para mostrar como criar pixel art e sprites.

Você pode encontrar muitos tutoriais de pixel art, como o abaixo, no YouTube.

10.Make Pixel Art

Make Pixel Art é uma divertida ferramenta on-line que permite começar a desenhar seus pixels imediatamente. Embora possa ser considerado um pouco básico em comparação com algumas das outras ferramentas, pode ser a sua melhor aposta se você precisar esboçar rapidamente uma ideia ou protótipo de um objeto ou personagem para o seu jogo.

Eu escrevi recentemente uma lista de 5 sites com sprites 100% grátis para usar nos seus Jogos. Confira aqui!

Sprite Sheets

Como Animar uma Folha de Sprites Utilizando o GIMP

Depois de ler esse post lindo e esclarecedor que pode ser visto clicando aqui, ficamos sabemos tudo sobre sprite sheets, o que são e de onde vieram. Agora já podemos botar a mão na massa e criar nosso primeiro gif usando apenas ferramentas online e gratuitas.

Recapitulando

  • Sprite sheets são arquivos que contém sequências inteiras de imagens que, nos games, se transformam nas animações de cenários e personagens que vemos na tela.
  • O conceito surgiu nos primórdios do cinema e é usado até hoje, principalmente em jogos 2D.
  • Entender sobre a técnica nos ajuda a perceber os defeitos e a valorizar a arte dos nossos jogos favoritos.

Por onde começar?

Vamos dedicar um ou mais posts focados em animação no futuro, mas por hora gostaria apenas de mencionar alguns dos softwares usados atualmente que podem ser bem úteis para aqueles que querem se aprofundar no tema:

Toom Boom Harmony: Um dos programas de animação de personagem 2D mais completos atualmente. Além das ferramentas básicas de movimentação, ele ainda conta com recursos de lip-syncing (sincronização dos lábios do personagem à voz do dublador) e rigging (inserção de “ossos” que permitem movimentar o personagem sem ter de redesenhá-lo).

Adobe Animate: Seguindo o Harmony de perto temos o Animate, criado das cinzas do finado Flash. Dentre seus pontos fortes, a movimentação e controle de câmeras são bem fluídos e dão um ar profissional às animações. Além disso, ele é bem integrado com o Photoshop o que facilita a vida para quem ilustra em um e anima no outro.

Adobe Photoshop e Gimp – esses dois softwares não são exatamente voltados para animação mas são ideais para a criação de sprite sheets.

O Photoshop todo mundo conhece, tem várias ferramentas para retoque de imagens e outros tantos recursos para ilustração como camadas com transparência (onion skin), seleção facilitada e uma infinidade de pincéis.

O Gimp é a alternativa ao Photoshop, de fato ele é mais limitado em recursos mas você pode usar gratuitamente (e sem medo daquele keygen com musiquinha 8-bits instalar todos os vírus possíveis junto com o crack do photoshop certo?!).

Leia também:  Como alimentar um caracol da terra: 8 passos

Animação lvl 01

Para esse exercício não vamos precisar baixar nada, vamos usar uma ferramenta online chamada Piskel que você encontra no site: https://www.piskelapp.com.

  • Ao acessar o site é só clicar em “Create Sprite”. Caso você deseje salvar seu trabalho na nuvem dá pra fazer login usando o Gmail, mas não é obrigatório.
  • Uma vez dentro do aplicativo já dá para começar animar! É só desenhar com as ferramentas da lateral esquerda e clicar em “Add new frame” – marcação nº 1 conforme a figura a seguir – para pedir um quadro em branco.

Como Animar uma Folha de Sprites Utilizando o GIMPAnimação simples do Mega Man disponível como exemplo na página inicial do Piskel.

  • Adicione alguns quadros e relembre os tempos de boneco palito no cantinho do caderno. Na lateral superior direita (marcação nº 2) dá pra acompanhar como a animação está ficando.

Importando a Sprite Sheet

TUTORIAL: Criando e animando sprites no Inkscape – PDF Free Download

Leia mais

Leia mais
Leia mais

Leia mais

Leia mais

Leia mais

Leia mais

Leia mais

Leia mais

Leia mais

Prefeitura de Volta Redonda Secretaria Municipal de Educação Implementação de Informática Aplicada à Educação Produção de tutoriais Suellem Oliveira Jclic Quebra cabeça com Recorte Para a produção deste

Leia mais

Professoras Formadoras do NTE Uruaçu Uruaçu – 2009 Núcleo de Tecnologia Educacional de Uruaçu Rua Maranhão Quadra 02 Lote 01 Bairro JK Uruaçu Goiás Telefone: (62)3357-4237 – Fax : 3357-4217 E-mail [email protected]

Leia mais

B O P E P O TUTORIAL DE PERSONALIZAÇÃO ADICIONANDO IMAGENS E TEXTO ESTÁTICO Com o componente Bopepo, personalizar um boleto se tornou uma tarefa simples. Seguindo os passos abaixo, em poucos instantes

Leia mais

Autor: Eduardo Popovici Tutorial: Criando uma folha de Fichário / Caderno Software: Photoshop CS3 Ext. Ferramentas Utilizadas: Criando arquivo novo Seleções Cor uniforme Lata de Tinta Criando camadas Janela

Leia mais

Sistema Click Principais Comandos Sumário Sumário… 1 1. Principais Funções:… 2 2. Inserção de Registro (F6):… 3 3. Pesquisar Registro (F7):… 4 3.1 Pesquisa por letras:… 5 3.2 Pesquisa por números:…

Leia mais

Oficina de Manipulação e Edição de Fotografia e Imagem Digital GIMP O que é o GIMP É um programa de criação e edição de imagens. Foi criado como uma alternativa livre ao Photoshop, ou seja, é um software

Leia mais

Tutorial SGCD 1. Efetuando Login no Sistema 2. Criando uma nova página 3. Editando uma página já existente 4. Anexando arquivos em páginas e no menu esquerdo 5. Colocando Imagens em páginas 6. Colocando

Leia mais

Tutorial de animação quadro a quadro quadro a quadro é uma técnica que consiste em utilizar imagens ou fotografias diferentes de um mesmo objeto para simular o seu movimento. Nesse caso, trata-se de relatar

Leia mais

Adobe Photoshop CS5 Aula 5 Tema da aula: Mudando a cor dos olhos Assuntos tratados nesta aula: Criar nova camada Renomear camada Ferramenta Zoom Ferramenta Pincel Definindo Cor do Primeiro Plano Regulagem

Leia mais

1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

Como gerar arquivos.plt O formato PLT destina se a uso em plotters. É como se você tivesse um plotter conectado diretamente ao seu computador. No momento que manda imprimir, o AutoCAD (ou qualquer outro

Leia mais

AULA: BrOffice Impress terceira parte Objetivo Ao final dessa aula, você deverá ser capaz de: Conhecer a integração dos softwares do BrOffice; Aprender a trabalhar no slide mestre; Utilizar interação entre

Leia mais

Paint Brush 1- Conhecendo o Paint Brush…2 2- Tamanho do desenho…2 3- Barra de Ferramentas…3 a) Recortar…3 b) Borracha…4 c) Balde…4 d) Conta-gotas…4 e) Lupa…4 f) Lápis…5 g) Pincel…5

Leia mais

GUIA PRÁTICO PARA EDIÇÃO DE FOTOS E IMAGENS CRÉDITOS: Márcio Corrente Gonçalves Mônica Norris Ribeiro 1 REDIMENSIONANDO IMAGENS / FOTOS Para uma melhor formatação dos POSTS é necessário padronizar as imagens

Leia mais

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito – Informática O Paint é o programa de edição de imagens padrão do Windows, ao instalar o sistema o Paint é instalado automaticamente. Provavelmente,

Leia mais

Criando e configurando arquivos para impressão gráfica no Adobe Photoshop Exemplo Cartão de Visita 88 x 48mm Etapa 1 Crie um novo documento em Arquivo>Novo e configure-o com as especificações mostradas

Leia mais

Sistema de Recursos Humanos Projeto 1 O objetivo desse sistema é gerenciar a admissão e a demissão de funcionários. Esse funcionário pode ou não ter dependentes. Esse funcionário está alocado em um departamento

Leia mais

Tutorial Windows Movie Maker Grupo de Educação Tutorial da Engenharia Computacional Fazendo o download do Windows Movie Maker Digite : http://windows.microsoft.com/pt-br/windows-live/moviemaker#t1=overview

Leia mais

Lição1 Adobe Photoshop CS5 Área de Trabalho CENTRO DE ENSINO SUPERIOR DO AMAPÁ Ajuste a cor no Camera Raw Clique no menu Arquivo, procure a pasta Lição1 e abra o arquivo 02Start.jpg. Note que a figura

Leia mais

Como aplicar batom multicolorido. 01. Pressione Ctrl+O e abra uma foto qualquer, para este tutorial iremos usar a imagem abaixo. 02. Pressione Ctrl+U para abrir a caixa de Matiz /saturação e defina os

Leia mais

Tutorial de Blender, Animação básica do tipo keyframe Enfim, o momento por muitos esperado! 😉 Agora que você já está mais familiarizado com o blender, com o básico sobre edição mesh e sobre renderização,

Leia mais

Página 1 de 7 Passo a Passo do Checkout no SIGLA Digital Este é um dos principais módulos do Sigla Digital. Utilizado para vendas no balcão por ser uma venda rápida, mais simples, onde não é necessário

Leia mais

SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo

Leia mais

UPE Campus III Petrolina 4 – Layout de Mapas no QGIS 2.0 GT-Paisagem Prof. Dr. Lucas Costa de Souza Cavalcanti 1 INTRODUÇÃO Este tutorial ensina como elaborar o layout de mapas no QGIS 2.0. O layout é

Leia mais

O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,

Leia mais

Tutoriais de apoio para a migração do e-mail @pmmc.com.br para @se-pmmc.com.br Atualização: 30/04/2014 Sumário Introdução… 3 1. Redirecionando e-mails novos… 4 2. Fazendo backup e encaminhando e-mails

Leia mais

Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.

Leia mais

InfoprodutoBrasil INFOPRODUTOBRASIL Como Fazer um Template Profissional passo a passo Adriene Miranda Vol.1 W W W. I N F O P R O D U T O B R A S I L. C O M. BR Olá, meu nome Adriene Miranda. Não sou expert

Leia mais

Como fazer uma imagem em 3 cores Atividade Adaptada National School s Observatory Faça o download do LTIMAGE, o software que vocês utilizarão para a atividade. http://www.schoolsobservatory.org.uk/obs/software/ltimage

Leia mais

Contas a Pagar Todas as telas de cadastro também são telas de consultas futuras, portanto sempre que alterar alguma informação clique em Gravar ou pressione F2. Teclas de atalho: Tecla F2 Gravar Tecla

Leia mais

TUTORIAL: APRENDENDO A LIDAR COM O AXURE PRO Grupo: Danielle Araújo, Elaini Nascimento, Indhyane Souza, Larah Câmara e Nathan Linhares O que vem a ser o Axure? Tutorial aprendendo a lidar com o AXURE PRO

Leia mais

Dúvidas Freqüentes sobre o OpenOffice Apresentação 1 – Como posso inserir mais de um fundo em uma apresentação? 2 – Como uso o slide de uma apresentação em outra apresentação? 3 – Quando recorto um documento

Leia mais

Índice Acesso ao Super Professor Web Como recuperar a senha de acesso? Tenho uma conta pessoal e uma conta da instituição em que dou aula, porém não consigo acessar a conta da escola. O que fazer? Selecionando

Leia mais

Quem não leu o meu primeiro tutorial, corra para ler, pois tem muitas dicas interessantes lá! Quem já leu, preparem-se para mais dicas!! Abra o COREL e coloque a folha na horizontal (paisagem). Feito assim

Leia mais

1- Tela inicial do AUTOCAD 2013 2- Clique em NOVO 3- Para mudar a cor do fundo digite OP (de options): Se quiser veja o vídeo ilustrativo desse procedimento: http://www.youtube.com/watch?v=g7kig_yhpx4

Leia mais

Tutorial ConvertXtoDVD 3 Índice: Adicionando seus arquivos de vídeo Adicionando um ou mais vídeos Página 2 Qualidade da conversão Página 3 Personalizando o menu Página 4 Escolhendo um template para o menu

Leia também:  Como aplicar uma compressa gelada: 12 passos

Leia mais

PS02_02-08: Objetivo: FERRAMENTAS DE PINTURA Exercícios: 1) Abra um novo arquivo e altere os valores para a seguinte configuração: 2) Finalize a configuração. A janela da imagem, também chamada de tela

Leia mais

Aula 3 Solicitamos que guarde seus arquivos, para o projeto final do módulo Microsoft Word Tema da aula: Criando um Papel Timbrado Características do Papel Timbrado 1. Nome da empresa no cabeçalho 2. Design

Leia mais

Desenhando no Flash Os arquivos criados no Flash guardam e apresentam as informações gráficas vetorialmente. Isto significa que as imagens são entendidas como formas e preenchimentos e o que é armazenado

Leia mais

CURSO DE INFORMÁTICA BÁSICA AULA 2 O AMBIENTE WINDOWS Relembrando… Gabinete Ligando o computador São três passos básicos O ambiente Windows O Windows é um tipo de software chamado sistema operacional

Leia mais

COMO COLABORAR NO WIKI DO MOODLE 1 Ilse Abegg e Fábio da Purificação de Bastos e-mail: [email protected] O wiki no Moodle é uma ferramenta de atividade que visa produção escolar colaborativa. Isso significa

Leia mais

Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO

Leia mais

Apostila de CmapTools 3.4 Índice Definição do software… 3 Criando um novo mapa… 3 Adicionando um conceito… 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)… 7 Guia

Leia mais

CRIANDO BANCOS DE DADOS NO SQL SERVER 2008 R2 COM O SQL SERVER MANAGEMENT STUDIO Antes de criarmos um novo Banco de Dados quero fazer um pequeno parênteses sobre segurança. Você deve ter notado que sempre

Leia mais

Prof. Breno Leonardo G. de M. Araújo [email protected] http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 10) 1 Roteiro Operações Booleanas Comprimir e Expandir Simplificação Criando Texto Editor

Leia mais

Tutorial ilustração animada Esse tutorial tem a finalida mostrar alguns recursos básicos e itens técnicos para os que estão tendo contato pela primeira vez com essa ferramenta. Uma vez se familiarizando,

Leia mais

Tutorial para uso do programa Edilim Criado pela profª Carina Turk de Almeida Correa 1- Abra o programa Edilim. Clique no botão novo, como mostrado abaixo: Clique no botão novo 2- Todos os arquivos a serem

Leia mais

NÚCLEO DE TECNOLOGIA E EDUCAÇÃO CURSO: WINDOWS MOVIE MAKER TUTORIAL O que é o Windows Movie Maker? É um programa que permite criar nossos próprios filmes com som, músicas, transição e efeito de vídeo.

Leia mais

Permissões de compartilhamento e NTFS – Parte 2 Criando e compartilhando uma pasta – Prática Autor: Júlio Battisti – Site: www.juliobattisti.com.br Neste tópico vamos criar e compartilhar uma pasta chamada

Leia mais

Como criar um jogo para Android com Corona SDK (Parte 1)

Atualizado em 03/07/2017!

A ideia deste post é mostrar aos leitores do blog como desenvolver um esboço de jogo para Android simples, onde um caça-recompensas do oeste americano galopa em seu alazão pelo deserto selvagem. Na verdade é apenas um remake do game Sunset Riders do SNES, mais especificamente da fase 2, em que os personagens estão montados à cavalo.

Se você nunca mexeu com Corona SDK antes, sugiro dar uma olhada na amostra grátis do meu livro sobre o assunto. Clique neste link e informe seu email que você receberá as primeiras 40 páginas em instantes por email.

Apenas Android? Não, esse tutorial funciona para qualquer uma das plataformas suportadas pelo Corona SDK, como iOS, por exemplo.

Copyrights? Esse jogo mobile nunca foi e nunca será lançado, uma vez que os direitos do game Sunset Riders (um dos meus favoritos do SNES) pertencem à Konami. Meu intuito aqui é apenas com o propósito didático de ensinar como fazer um game 2D para celulares.

Você vai ver nesta primeira parte do tutorial:

Parte 1: Configurando o ambiente e criando o projeto

Primeiro de tudo você deve ter baixado na sua máquina o Corona SDK.

Você encontra ele em coronalabs.com, é gratuito e exige um cadastro apenas para fins de controle futuro, pois caso você venha a cobrar pelo seu app, terá de comprar uma licença.

Opcionalmente, você pode usar algum editor de Lua para uso com Corona SDK também. Neste post falo de um deles que é bem bacana, o Corona Editor.

Uma vez que tenha o Corona SDK instalado em sua máquina, você deve criar uma pasta para seu projeto com o nome que mais lhe agrada. Eu pus o nome de SunsetRiders, e dentro desta pasta, deve-se criar o arquivo main.lua, que conterá o código principal de nossa aplicação. Este arquivo será aberto com o Corona Simulator para ver como anda sua aplicação.

A título de curiosidade: o Corona SDK assume aparência de Android caso rode no Windows e a aparência de iPhone caso rode em Mac. Essas aparências são ajustáveis no menu “Windows->View as”, porém no Windows se limitam apenas a dispositivos com Android. Isso não muda nada para nós, é apenas uma skin.

Parte 2: Configurando o projeto

Como nossa aplicação será um cavaleiro galopando, necessitaremos que a animação rode na horizontal.

Existem duas maneiras de fazer isso: uma delas é indo no menu Hardware e mandando o Corona Simulator rodar para direita e a outra é criando um arquivo de configuração de compilação (build.settings).

A segunda opção é mais bacana pois fará com que o Simulator já fique na posição certa sempre que der um Ctrl + R para recompilar o projeto. Crie um arquivo build.

settings e cole o seguinte conteúdo dentro:

settings = {
orientation = { default = “landscapeRight” }
}

orientation = { default = “landscapeRight” }

Você precisará também de um arquivo de configuração para que sua animação rode sempre em tela cheia.

Você consegue isso criando um arquivo config.lua e adicionando o código a seguir, que determina a resolução do app e se ela usará zoom ou não.

application =
{
content =
{
width = 320,
height = 480,
scale = “zoomEven”
},
}

Pronto, sua animação está devidamente configurada e pronta para ser codificada.

It’s time to pay!

Parte 3: Sprite Sheet

Antes de codificar qualquer coisa, eu tive de sair à cata dos sprites do Sunset Riders, para poder animá-los via Lua. Lua é a linguagem que vamos utilizar no Corona SDK, basicamente uma linguagem de scripting bem simples que você pode saber mais neste post.

Para quem não sabe o que é uma sprite sheet ou sequer uma sprite (não, não é a bebida de limão da Coca-cola), aqui vai uma breve introdução: sprites são os chamados “bonequinhos” dos games 2D, e sprite sheet (folha de sprites) nada mais é do que uma imagem única contendo todos os movimentos do bonequinho. Ou seja: ele caminhando para um lado, para o outro, atirando, etc. Tudo depende do game.

[Tutorial] O guia do Pixel Art

Depois dos excelentes feedbacks de nossos tutoriais sobre como criar um personagem em pixel art e como animar um personagem em pixel art, estamos trazendo um artigo completo que abrirá seus olhos para esse estilo artístico.

Este tutorial foi desenvolvido para explicar o que é pixel art, o que não é pixel art, como começar a fazer e como melhorar sua arte.

O que é pixel art?

Mas se eu faço minha arte no computador, então é pixel art, certo? 
Não. Pixel art é uma subcategoria muito específica da arte digital. Não é o que é feito mas sim como é feito. Por exemplo, essa pintura digital abaixo é uma arte feita no computador, e é feita de pixels, mas não é pixel art:

Porquê nem toda arte digital é pixel art?

O pixel art é diferente de outras artes digitais por conta de seu foco no controle e precisão que o artista criador deve ter. Ele tem que criar uma imagem unindo um conjunto de pixels, colocando um por um, de maneira a se criar uma imagem final composta de milhares de pequenos pixels.

Basicamente, se uma ferramenta for usada para criar pixels automaticamente (por exemplo, o balde de tintas do Paint ou Photoshop), significa que o computador está tomando decisões sobre o posicionamento dos pixels, em vez do artista. Neste caso, não é considerado pixel art.

Isso sim é um pixel art.

Além disso, pixel possui outras duas características únicas: o uso das cores através de suas paletas bem definidas e o tamanho minúsculo das artes.

Por onde eu começo?

Antes de colocar a mão na massa, existem alguma sugestões extremamente importantes que todo iniciante deve seguir.

Leia também:  Como bloquear no vôlei (com imagens)

Comece pequeno – Quanto maior a imagem que você está tentando fazer, mais tempo e trabalho será necessário para completá-la. Comece criando uma pequena tela. Você ficaria surpreso com o pouco espaço que você precisa para se criar pixel art.

Limite sua paleta – Usar uma paleta pequena é especialmente bom para iniciantes, pois força você a se concentrar no posicionamento de pixels e nas relações entre grupos de pixels. A paleta original de 4 cores do GameBoy é uma boa escolha para iniciantes.

Softwares – Do Paint ao Photoshop, existem milhares de programas que você pode usar para criar suas artes em pixel. Além dos dois citados, você pode optar também por: GIMP, Pyxel Edit, AseSprite, Grafx2 e Pixen.

Tipo de arquivo – Um erro comum cometido por novos artistas de pixel é salvar sua arte como JPEG/JPG. Embora esse tipo de arquivo possa ser bom para outros tipos de imagens, ele causa compactação, o que destrói a qualidade de uma peça de pixel art. Nunca salve como JPG. Em vez disso, salve como PNG ou GIF.

Objetivo

Você deve estar querendo praticar pixel art por alguma razão, certo? Tenha algum “propósito” ou meta para o que você está desenhando, isso vai te ajudar bastante. Por exemplo:

  • “Eu vou desenhar alguns arbustos para o meu jogo”
    “Eu vou praticar formas do corpo”
    “Eu vou brincar e encontrar uma paleta agradável”
  • “Eu vou explorar diferentes formas de desenhar pedra”

Tamanho e Escala

Lembre-se: A escala é a coisa mais importante de um pixel art!

A razão pela qual a escala é importante é porque nos ajuda a garantir que o que estamos desenhando não seja ridiculamente irrealista! Além disso, quanto maior for a área a ser criada, mais trabalho você terá. Quer um exemplo mais visual? Confira:

  1. Tamanho 8×8 – Uma tela pequena, com poucos detalhes e pouco trabalho.
  2. Tamanho 16×16 – Tamanho médio usado por artistas em geral, recomendado.
  3. Tamanho 32×32 – Uma tela grande, que exigirá mais detalhes e trabalho.

A Paleta de pixel art

As paletas de cores são organizadas e formadas em torno da ideia de que elas trabalham juntas, para permitir que você, como artista, pinta de uma maneira harmoniosa.

Existe um número incontável de paletas por aí. Então qual escolher?

Abaixo deixarei um exemplo de paleta bastante utilizada. Confira:

Respectivos códigos hexadecimais das cores na barra superior (da esquerda para direita): 

#e4a672 #b86f50 #743f39 #3f2832 #9e2835 #e53b44 #fb922b #ffe762
#63c64d #327345 #193d3f #4f6781 #afbfd2 #ffffff #2ce8f4 #0484d1

Porém, se você quiser se aprofundar um pouco mais nesse estudo das cores, existem 3 outros tipos de paletas para pixel art criadas por artistas experientes. Caso queira saber mais, você pode conferi-las: Paleta de Arne 16, Paleta DawnBringer32 e Paleta Pico-8.

E como uma última opção, você pode acessar ao Lospec, um site que contém um gigante banco de dados de paletas para pixel art. Você pode conferir clicando aqui.

Pintura com pixels

Existem 6 etapas básicas para se desenhar um sprite. Dê uma olhada na imagem a seguir:

Aqui temos o exemplo de um sprite rápido de se fazer de uma planta parecida com uma palmeira com formas muito básicas. Uma coisa interessante é usar um pincel/lápis de 2×2 pixels. Isso pode fazer a sua arte parecer um pouco mais volumosa e mais harmoniosa para os olhos.

  1. Aqui começamos com uma “moita” aleatória, que será as nossas folhas.
  2. Este é o primeiro estágio de iluminação das folhas. Talvez seja interessante ir de cima para baixo em 45 graus, mas você pode ir de qualquer direção.
  3. Este é o segundo e último estágio de iluminação das folhas. Pense no volume e brinque com o quanto de brilho existe naquelas folhas.
  4. A forma básica do tronco é colocada.
  5. A iluminação do tronco é colocada. Agora, lembre-se que as folhas geram sombra. E profundidade é incrivelmente importante para tornar a sua arte incrível! Então há uma sombra vindo das folhas no tronco.
  6. Última camada de iluminação feita e alguns detalhes extras.

Observações:

    • Dê à luz uma direção agradável;
    • Lembre-se de que apesar de ser uma imagem 2D, devemos passar uma ideia de 3D. Logo, mantenha sempre a profundidade em mente;
  • Tente manter as formas limpas, não exagere demais na mistura das cores.

Saca só o processo criativo do personagem abaixo:

O personagem acima foi criado a partir de uma tela de 32×32 pixels de tamanho, isso permite que o personagem possa ser mais alto (ou largo, se preferir).  O mais interessante, é que conforme podemos visualizar no primeiro frame (à esquerda), o personagem foi esboçado aleatoriamente com a ferramenta lápis para só depois ser finalizado.

Então você pode simplesmente criar algumas “bolhas” na tela e ir preenchendo, até formar alguma coisa e você torná-las vivas! Perceba também os detalhes das cores e iluminações, que são extremamente importantes no pixel art.

Reserve algum tempo e tente criar um personagem. Se você precisar redesenhar algumas vezes, não tem problema. Afinal, poderão acontecer várias tentativas até chegar a um ponto perfeito para você.

Linhas e curvas

Aqui está um dos erros mais cometidos por iniciantes em pixel art: o mal ordenamento de linhas e curvas em pixels. Confira as duas imagens abaixo, as linhas da esquerda foram criadas de maneira desordenada e as da direita, foram feitas da maneira correta:

Mas qual o segredo por trás disso? Bom, quando se trata de desenhar linhas, é importante manter a matemática em mente. Como assim? Pense em múltiplos de 1, 2, 3, 4 e etc.

No primeiro exemplo, as linhas vão de uma ponta a outra seguindo, obrigatoriamente, a cada 2 ou 1 pixel. Isso mantém as coisas “limpas” e evita linhas aleatórias bagunçadas.

No segundo exemplo, as curvas seguem um pré-ordenamento numérico, sendo, no caso, 1,1,2,3,8,3,2,1,1,1.

Outro exemplo de linhas e curvas:

Delinear

Caso você opte por delinear o sprite, deverá seguir a regra para a forma inteira, ao invés de apenas o contorno. Por exemplo:

  • Na primeira imagem, temos o personagem sem contorno, o que está bem agradável visualmente.
  • Na segunda imagem, temos um contorno apenas em volta dele. Além de deixar visualmente horrível, é uma má prática.
  • Na terceira imagem já temos a aplicação da técnica de delineação correta.
  • Na quarta imagem, temos o personagem com cores ainda mais escuras nas linhas para dar mais profundidade, o que torna o efeito realmente incrível.
  • Lembre-se: jamais use a cor preta para delinear, mas sim uma cor extremamente escura.
  • Outro exemplo de contorno bem aplicado:
  • Saturação

O problema mais comum que os novos artistas encontram em relação à saturação é o uso de cores com saturação muito alta. Quando isso acontece, as cores começam a queimar os olhos. Na imagem abaixo, observe como as cores na segunda imagem (à direita) são muito mais suaves para os olhos:

Criando rochas

A simplicidade é a chave do sucesso, quando falamos de pixel art. Quer um exemplo disso? Confira essa rocha criada abaixo:

As rochas são relativamente fáceis de construir. Tendo em mente que uma pedra é formada por camadas e pedaços, ficará fácil de criar a sua, não exigindo uma paleta complexa de cores.

Criação de armas e itens

Desenhar armas e itens é processo muito simples. Você não precisará ser tão preciso assim. Dê uma comparada nos designs abaixo, da esquerda para a direita:

  • Primeiramente, confira que todos os itens em questão foram criados em uma tela de 16×16 pixels.
  • Os itens à esquerda utilizam de técnicas simples. Os da direita foram finalizados da forma correta.
  • Pequenos detalhes fazem a diferença: dê detalhes a uma picareta de que ela foi utilizada; dê a uma espada algumas rachaduras; faça o pão meio comido, etc.
  • Lembre-se: cada pixel conta.

Conclusão

Não subestime esse estilo artístico por parecer “velho”. O pixel art é usado – e muito – até hoje em projetos de variados tamanhos. Inclusive, o game Celeste foi feito em pixel art e “mesmo assim” ainda concorreu ao prêmio de melhor jogo do ano de 2018 contra o God of War 4 e Red Dead Redemption 2.

Espero que essas dicas possam te dar uma boa direção para criar suas próprias artes em pixel art. Lembre-se de praticar bastante, afinal, a prática leva a perfeição.

Você pode ainda conferir o nosso curso exclusivo sobre design de jogos 2D, com foco especial em pixel art, clicando aqui.

Relacionado

Seja o primeiro a comentar

Faça um comentário

Seu e-mail não será publicado.


*