pixel art

Pixel Art Brushes / Clip Studio Paint

Olá! Hoje trago alguns brushes de pixel art para o Clip Studio Paint!

mock-up

Um mock-up rápido feito no Clip Studio Paint.

Para quem não sabe, sou um grande entusiasta deste programa e que, para mim, praticamente substituiu o Photoshop. Tanto pelas funcionalidades, estabilidade e preço! Enfim… Gosto de colocar estes brushes numa aba separada e utilizar as teclas de atalho ‘,’ e ‘.’ para trocá-los rapidamente ao invés de utilizar teclas de atalho específicas, pois já utilizo várias outras teclas para as ferramentas de desenho.

dee06c17b7de5e53952d4aaaa7ae7b4f

  • PixelArt dvn: Brush de desenho padrão 1×1.
  • Pixel Eraser: Borracha (o’rly?). o motivo que uso esse brush ao invés de apertar ‘C’ (para alternar entre a cor atual e a transparência) é porque sou canhoto, então algumas vezes apertar ‘,’ e ‘.’ é mais rápido para mim.
  • Pixel Fill: Além de preencher uma área com pixels também serve para substituir uma cor por outra em toda a imagem ou camada. Para isso, basta desmarcar a opção “Follow Adjacent Pixels”.
  • Pen Pressure Pixel: Brush para fazer blocagem de cores usando a pressão da caneta.
  • Pixel Marquee, Pixelart Marquee 2  e Pixel Lasso marquee: ferramentas de seleção diversas.

Download

PSDAnim 0.3.4

Olá! Hoje um pequeno update hoje da PSDAnim!

Adicionei um novo recurso que a exibição de animações “móveis” (ou seja não “in-place”) de forma in-place. Na figura abaixo temos um exemplo de animação in-place. O objeto fica parado em relação ao observador. É como se o observador acompanhasse o objeto na mesma velocidade.

walk-in-place_tn.gif

Já uma animação móvel é aquela que o objeto se move em relação ao observador. Como se o observador estive parado.002.jpg

Depois de usar bastante a PSDAnim para animações in-place, comecei a me sentir desconfortável com o aspecto de exibir/esconder os layers para visualizar apenas o quadro que quero trabalhar. Também outro aspecto negativo foi a dificuldade de relacionar um quadro com os outros. Se trabalhasse com animações móveis, esses dois problemas seriam eliminados. Porém no estado anterior da PSDAnim, a visualização seria um problema, pois o objeto apareceria como se estivesse se movendo.

Então, resolvi juntar os dois métodos: exibir in-place e animação de forma móvel. Adicionei mais um parâmetro no nome dos layers usados para separar as animações e esse parâmetro diz quantos pixels deve o quadro ser deslocado para à esquerda. Assim, a animação é exibida automaticamente de forma in-place, mas na ferramenta trabalhamos como se animação fosse móvel. Na figura abaixo, podemos ver o resultado. Temos 4 frames de uma animação de correr e cada frame está deslocado 24 pixels em relação ao anterior, logo walk_1 tem deslocamento de 12 pixels, walk_2 de 24 e walk_3 de 36 pixels. Assim, temos o melhor dos dois mundos e o ganho em produtividade é elevadíssimo!
psdanim034.gif

Download PSDAnim 0.3.4 Now!

O único ponto negativo no momento é que a exportação dos quadros das animações móveis. Antes de exportar é preciso mover os quadros para a posição in-place e depois fazer um crop para eliminar as partes desnecessárias da imagem. [update] Ou não! Desse modo, se organizarmos cada frame na posição certa, já teremos a spritesheet pronta! Por hoje é isso pessoal!

Desafio Semanal #01 – Primeira Fase do Processo

No post de domingo foi dada a especificação, de acordo com a fase 1 da primeira: D1-Receber Especificação do Problema. Evitei dar mecânicas para que cada um tivesse sua liberdade criativa e procurasse responder às suas próprias dúvidas. A partir deste ponto, comecei a procurar informações e referências sobre inundações para obter um entendimento sobre o assunto (nota mental: talvez seja melhor mudar o nome desta etapa para ‘Entender o Problema’). Então, pesquisei na wikipédia sobre inundações em português e inglês. Encontrei acontecimentos interessantes nos anos 30, como esta lista de inundações nos Estados Unidos e a enchente de Porto Alegre em 1941, há fotos e vídeos sobre estes acontecimentos.

Com base nas informações coletadas anteriormente, iniciei a etapa 2 (D2 – Definir Possíveis Soluções). Listei as causas, efeitos e formas de evitar as inundações, como pode ser observado no diagrama abaixo. Também procurei palavras-chave para descrever o ambiente naquela época e como queremos dentro do jogo. Como não havia informado as mecânicas, o sistema do jogo em si, acabei criando-as um neste momento (um exercício de game design é sempre bom!), apenas um esboço para ter informações necessárias para determinar quais serão os assets a serem feitos.

Brainstorm - Clique para ampliar

Brainstorm – Clique para ampliar

Finalmente ao final desta etapa, defini que teremos os seguintes assets:

  • Terreno (não plano): grama e terra. com perspectiva RPG Top-Down. A iluminação será como se estivesse sempre meio nublado pela manhã, perto do meio-dia, com efeito sépia em tudo.
  • Água: representar rios, lagos e mar.
  • Visão subterrânea.
  • Cidade (ruas, prédios, carros), inspirada em Nova York dos anos 30.
    • Prédios para cada nível de ocupação, e antes e depois de serem atingidos.
  • Representação da inundação.
  • Construções de drenagem.
  • Interface gráfica (calendário, tamanho da população, dinheiro, previsão do tempo).

Em seguida na etapa 3, coletei referências sobre os prédios de Nova York de 1930, diversas imagens de inundações em cidades da época e da atualidade, além de imagens que possam representar o “mood” que queremos.

Bom, é isso pessoal. Como é primeira semana deste desafio, ainda tenho que melhorar algumas coisas. Se algo não ficou  muito claro ou se omiti algo que você considera important, poste qualquer dúvida nos comentários. Então, tudo ok? Já podemos colocar a mão na massa (ou os pixels na tela)!

Desafio Semanal de Game Art: Semana #01 – Tema

Chegou o dia!  E o tema é:

Inundações

Você deve criar a arte para um jogo de simulação ou gerenciamento, com a perspectiva RPG Top-Down, ambientado nos anos 30, com limitações do SNES (256×224 com 16 cores por sprite; máximo de 256 cores simultâneas) em que o objetivo é minimizar as perdas provocadas pelas inundações.

O tema foi gerado meio que aleatoriamente baseado em várias listas que criei (gêneros de jogos, perspectivas, página aleatória da wikipédia, etc). As mecânicas fica por conta da interpretação de cada um. Não há necessidade de implementá-las. Fique ligado nos próximos posts ao longo da semana em que detalharei o meu progresso, e claro que você pode começar já! Agora!

Tutorial de Pixel Art – Parte 00

Olá! Para complementar o desafio semanal de game art, irei publicar alguns tutoriais de pixel art! Esta ainda é uma versão preliminar, e será melhorado com o tempo e sugestões dos leitores. Primeiro de tudo, farei esses tutoriais com suposição de que você já saiba utilizar alguma ferramenta de desenho no computador. Se não souber utilizar algum programa de desenho, escolha um, procure tutoriais na net, passe alguns dias para aprender a usá-lo e depois volte aqui. Recomendo fortemente o Photoshop.  No meus exemplos, usarei principalmente o Photoshop Elements 10 ou o Clip Studio Paint PRO. Nestes links há várias listas de ferramentas que você pode utilizar: 1 2 3. A melhor gratuita é o Graphics Gale. Também tem o Asesprite, mas sem pagar, você precisa compilar o código, o que afasta a maioria dos artistas.

Eu ainda me considero um iniciante/intermediário em pixel art, mas gostaria de falar sobre alguns aspectos que, na minha opinião, são importantes para manter a consistência dos assets dentro do jogo. Listarei aqui alguns e caso queira acrescentar algo, deixe um comentário abaixo.

  1. Quais são as limitações? número de cores e tamanho do sprite?
  2. Qual é a perspectiva usada? Qual perspectiva 2D ou 3D?
  3. Como ele funcionará dentro do jogo? Ele interage com alguma entidade? Será animado? Terá algum efeito especial? Fará algum barulho?

(more…)