pixelart

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 – Processo

Agora o post que prometi na semana passada. O passo a passo!

1) Comecei definindo a grade (tiles de 16×16) e coloquei o cubo do tutorial #00 para ajudar a determinar a escala da altura. Também coloquei logo a região correspondente ao tamanho da tela.

Passo01

2) Como o tema precisa de espaços urbanos, tratei de elaborar um tileset para as ruas, e montei um mapa para verificar a escala. Achei que ficou bom dessa forma. Nessa etapa ainda não estava me preocupando com detalhes e com relação às cores, só me preocupei com os valores para mostrar uma certa iluminação.

Passo02

Passo02_2

3) Com base numa referência, comecei a elaborar o primeiro prédio. Decidi que cada andar terá altura de 4 pixels. Ainda sem detalhes no objeto, apenas o valor.

Passo03

4) Continuei fazendo outros prédios, baseados nas referências, seguindo as formas retas e quadradas da época que se traduzem bem em pixel art.Passo 4

5) Depois já estava atrasado com o desafio, e comecei a pensar apenas no mock up. Resolvi criar uma determina região da cidade. Defini algumas ruas, onde terá água e um pequena região num nível mais elevado.

Passo04

6) Pensei em colocar alguma textura no tile para as calçadas das ruas. Essa textura só tem 3 cores. Usei modo tiling da PSDAnim para verificar como ficaria a repetição dos tiles. Todos os tiles tem esse mesmo padrão. Para evitar copiar o padrão para cada tile, usei os patterns do Photoshop. Defini o tile como um pattern, selecionei a região da calçada de cada tile e dei um Fill Pattern.

Passo05

7) Depois pensei nas cores finais. Como foi definido que terá um efeito sépia na tela. Resolvi usar um cheat. Criei um Adjustment Layer do tipo Gradient Map e ajustei as cores do degradê. Nesse ponto não estava satisfeito com as valores do asfalto e da água.

Passo06

8) Comecei a fazer os tiles para representar a mudança de nível do terreno. Sempre me preocupando com a perspectiva e os valores.

Passo07

9) Apliquei uma textura ao prédios da mesma forma que foi feita com as calçadas.

Passo08

10) Tendo já boa parte do material, comecei a montar o mapa. Combinei alguns tiles de prédios para fazer um prédio maior. Nesse ponto eu já tinha ajustado os valores da água e do asfalto. Outro detalhe importante são as sombras dos prédios. No fim, não gostei da legibilidade em geral dos prédios.

Passo09

11) Então resolvi colocar um outline para separar mais.

Passo10

12) Então chegamos no resultado final:

Passo11

13) Ficou faltando adicionar a água para representar a inundação. Para isso, foi bom ter separado cada os elementos em camadas desde o início. Os tiles das ruas e calçadas estão numa camada e os prédios em outra camada. Então bastou criar uma camada entre eles e preencher com os tiles de água. Em seguida foi só criar outra camada por cima para representar a água que aparece na frente dos prédios.

Passo12

É isso. Espero que tenha gostado. Amanhã começa o segundo desafio! Até lá!

DesafioSemanal01_result

PSDAnim 0.3.2

Mais um update da PSDanim! (Se você ainda não a conhece, clique aqui).

Durante a elaboração dos tiles do desafio semanal, tive a ideia de adicionar o suporte a tiling na PSDAnim.

Novidades:

  • Conserto de alguns bugs que foram introduzidos na versão anterior.
  • Zoom até 8x.
  • Nova visualização: tiling.

Gostou? Baixe aqui!

 
psdanim3.png

Se tiver alguma dúvida, deixe seu comentário. É isso!

Em breve novas features!

Desafio Semanal #01 – Resultado!

Olá! Aqui trago o meu resultado do desafio semanal! Como fiquei meio focado nesses últimos dias no Our Worlds e em outras coisas, o tempo planejado para o desafio acabou sendo menor do que eu imaginei… Em breve terei esse tempo disponível novamente! Outro ponto, é que escopo planejado acabou sendo muito grande, deixei de fazer muitas coisas da lista que elaborei..  (me empolguei com a ideia do jogo). Mas chega de mimimi! Na imagem acima você pode ver o meu resultado. Foi um bom aprendizado. Utilizei essa perspectiva pela primeira vez par fazer uma arte de jogo e achei satisfatório para o tempo alocado. Enfim… Durante a próxima semana, criarei um post detalhado do processo de criação e o próximo desafio começa no dia 29/11! Até lá!

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…)

Desafio Semanal de Game Art

Olá! Gostaria de propor um desafio semanal para a criação de “game art”. Refiro-me a “game art” como a arte criada para ser usada dentro de um jogo. Como irá funcionar? Primeiro, será dado um briefing com os requisitos e cada participante criará sua ilustração seguindo seu próprio estilo, mas estando de acordo com o requisitado. O objetivo é adquirir um processo de elaboração de assets e treinar as habilidades artísticas necessárias focando em pequenos projetos que serão realizados em menos de uma semana. No final de cada projeto, cada um fará seus próprios assets para serem usado num jogo. Para participar, basta querer fazer! Nada de cadastros ou coisas similares. Se quiser publicar aqui no blog, poste um comentário e será publicado numa galeria junto com os outros. Além disso, eu me comprometo a postar no blog o passo a passo dos assets que estarei criando. Tenha em mente que não sou um artista de nível profissional, logo cometerei erros e minha palavra não é algo absoluto.

Para realizar esses mini projetos (e principalmente para os iniciantes que ainda não sabem qual caminho seguir), é interessante seguir um determinado processo, que aqui elaborarei baseado neste vídeo do Feng Zhu (assista o vídeo!). No nosso caso, como o objetivo é fazer assets para jogos 2D, a parte de concept art será reduzida aos rascunhos, e tão logo quando tivermos algumas ideias, devemos proceder para a elaboração dos mockups, tilesets, sprites, etc.

Processo do Desafio Semanal

Processo de Design para o Desafio Semanal (figura meramente ilustrativa).

O processo é dividido em duas fases: design e solução. A fase de design é composta por 3 etapas:

Fase de Design
D1 – Receber Especificação do Problema
D2 – Definir Possíveis Soluções
D3 – Pesquisar e Coletar Referências

(more…)