Art

Art related posts

Tutorial de Soluções de Design para Personagens, Monstros, etc. – Parte 1

Olá! De volta com mais um tutorial. Depois de ler uma parte do livro Manga Matrix e Super Manga Matrix, me deu vontade de escrever sobre esse assunto e talvez ir um pouco além do conteúdo do livro, trazendo listas mais extensas e um método passo-a-passo para a criação de personages e criaturas fantásticas e originais.

O conteúdo desta série de tutoriais encaixa-se na etapa D2 – Definir Possíveis Soluções, do processo descrito anteriormente.

Muito bem… Então você tem que criar um personagem para um determinado jogo, e você se pergunta: Quem é ele? Qual é sua aparência? Como é seu comportamento? O que ele quer? Por quê? O que ele faz? O que gosta e desgosta? Como ele se veste? Onde vive? Em que época? O que come?

Este tutorial tentará ajudá-lo a encontrar respostas (originais) para algumas destas perguntas.

Primeiro iremos focar na sua aparência, sua forma. Para, isso apresento uma ferramenta, que chamarei aqui de Tabela de Operações Básicas. Estas operações básicas podem aplicadas a qualquer forma, parte ou elemento existente para obter uma nova forma, parte ou elemento completamente diferente da anterior! Quando você sentir um bloqueio criativo, tente aplicá-las!

Tabela de Operações Básicas
Forma Fixa Forma original. Por exemplo: braço com mão normal.
Forma Não-Fixa Uma parte da forma é alterada, tendo outro material. Por exemplo: braço com mão de areia.
Forma Coletiva A forma é representada pela união de partes menores. Por exemplo, raízes e galhos tomam a forma de um braço.
Forma Mecânica A forma é representada de forma mecânica.
Forma Quebrada A forma recebe fraturas/fissões.
Aumento/Diminuição de Número de Partes Por exemplo: 4 braços.
Expansão/Contração do comprimento das partes Por exemplo: dedos são alongados.
Crescimento Crescimento de algo estranho para a forma. Por exemplo, pelos muito compridos.
Combinação/Síntese de Elementos Algum elemento é combinado com outra estrutura.
fc7c3fe9ec1afc8001e935c0b49aa3c9

Exemplo da aplicação das Operações Básicas num braço Adaptado de (Tsukamoto, 2006)

Podemos ver neste vídeo do Feng Zhu a aplicação de algumas destas operações para a criação de silhuetas de objetos.

aranhas copy copy

Neste exemplo, temos à esquerda a silhueta de uma aranha. No meio temos o resultado depois de aplicar algumas das operações básicas: aumento do número de patas, contração do comprimento de algumas patas, crescimento das asas, expansão do abdomen e presas. À direita temos o resultado de uma combinação tendo como base uma aranha recebendo asas de um morcego.

predios

Estas operações podem ser aplicadas a qualquer coisa. Podemos trocar o material de um prédio por areia, duplicar alguma parte, por exemplo.

Muitas vezes a operação mais utilizada será a Combinação, principalmente se o objetivo for criar criaturas meio-humanas ou monstros híbridos, como minotauros, fadas, dragões, pôneis, etc. Para ajudar nesta tarefa, elaborei, baseado no livro, a imagem abaixo. Ela contém as nove Operações Básicas com um espaço vazio para você marcar se ela será utilizada ou não, e depois disso contém a matriz de formas. Todo personagem terá uma forma básica e em seguida as suas partes terão outra forma pela síntese com outro animal ou objeto.

Por exemplo, podemos usar como tipo base um touro (mamífero) e combinar com humano, para formar um minotauro; podemos usar uma ave como base e colocar asas de inseto e uma calda de folhas; ou ainda criar uma cidade onde os prédios tem a forma de instrumentos musicais. Apenas tenha cuidado para não formar uma quimera com muitas características desnecessárias ou que não sejam atrativas, Para isso deve-se aplicar o método da Subtração, descrito no Super Manga Matrix: “um personagem é analisado para identificar qualquer característica desnecessária ou que faltem alguma qualidade atrativa. Estas características são reduzidas para enfatizar elementos mais importantes. A simplificação pode ser feita reduzindo o tamanho de um elemento, reduzindo sua cor ou fazendo-o menos percebível. Isto ajuda a dar destaque a parte que você quer enfatizar.”.

TabelaVazia copy.png

Para ajudar ainda mais em quais partes serão alteradas, criei outra tabela que procurei minuciar todas as partes possíveis.

TabelaPartes-3

Tabela detalhada das Partes. Tamanho Original.

Resumo do Método para as Formas:

  1. Decomponha o objeto em partes menores.
  2. Identifique quais partes serão alteradas e como serão.
  3. Aplique as Operações Básicas sobre estas partes.
  4. Repita quantas vezes for necessário.
  5. Identifique e subtraia os elementos menos importantes.
  6. Profit!

No próximo post, detalhei  o processo para a escolha da vestimenta de nossas criaturas. Até lá!

 

 

Advertisements

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!

Project 0807 – Portmortem

Olá pessoal! No final de semana não teve updates no blog porque participei da Ludum Dare, uma tradicional competição de desenvolvimento de jogos.

Sshot02

Jogar AGORA!

Sempre quando participo de uma jam entro num modo berserker, em que o tempo se dilata e o sono não existe.

Passei dois dias, cerca de 43 horas só programando, criando sprites e sons apenas de placeholder. O sábado foi basicamente para criar o sistema combate com combos e o domingo passei criando a IA, evolução do personagem, sistema de insanidade, menus e outras coisinhas.

LD

Como estava o jogo 24 horas depois depois do início

Na madrugada de segunda-feira os principais componentes do jogo já estavam prontos, comecei a fazer o level design, e horas depois fui dormir pensando em fazer a arte quando acordar.

LevelDesign

Level Design feito no Photoshop Elements!

Quando acordei nem abri a Unity, senão poderia perder tempo programando algo e abri o Clip Studio Paint para fazer os sprites. Lá eu já tenho preparado meus brushes de pixel art. Então, fiz uma listinha de animações a serem feitas.

526775538b8d907236c93921c3381e6b

Fazendo as animações no Clip Studio Paint junto com a PSDAnim

Ainda bem que não parei para contar quantos sprites eu teria que fazer, senão desistido! Só de animações do jogador e de um inimigo foram quase 300!! Se juntar com os outros assets, são mais de 300!! Para fazer todos esses assets tive que simplificar bastante a arte dos personagens. Mais uma vez, a PSDAnim foi extremamente útil! A PSDAnim não é apenas visualizar, ela foi pensada também para exportar os frames prontos para serem usados. Depois de pronto todos os sprites, todos os arquivos foram processados de uma vez só, por um script em python que estava incluso nas versões antigas da PSDAnim. (na versão atual há um menu para exportar apenas o arquivo carregado).

QUADROS2

Frames exportados de uma vez só!

Quando terminei a arte já eram 7 horas, e precisava integrar todos esses sprites dentro da Unity. Agora outro ponto que preciso automatizar é a criação de Animations e e do AnimationController dentro da Unity! Aí sim, ficará uma toolchain perfeita! Quando terminei essa parte, já eram umas 22 horas. Então foram os detalhes finais: adição da DPSpritePalette para efeitos de mudança de paleta (diferentes tipos de inimigo, quando sobre dano, e efeito de transformação).

Finalmente os últimos minutos foram de play test, e ajustes no level design. Não tive tempo de fazer os  efeitos sonoros finais e de criar as músicas… Mas é isso. Gostei do resultado final, talvez ainda tenha algum bug aqui ou acolá. :P. Agora preciso de mais alguns dias para descansar e voltar com a programação normal do blog! Até!

 

 

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!