Takara Cards: A Criação da Interface de Tabuleiro

3D blender, Animação, Jogos

Atualmente trabalho artista de produção na Post Mortem Pixels. No Takara Cards uma das minhas funções é ajudar a desenvolver o visual das interfaces do jogo. Nesse post quero mostrar um pouco do desenvolvimento do tabuleiro de combate.

interface atual do Takara Cards

O desenvolvimento do design começou com uma marcação de Layout criado pelo Filipe Dilly, game designer do jogo.

Layout inicial do Filipe Dilly

A partir dessa marcação criei uma série de imagens “mockups” da interface finalizada. Essas imagens já traziam acréscimos de algumas características que estava sendo conversadas em nossas reuniões de produção. Na primeira versão que criei coloquei duas margens largas para sugerir um visor de nave inspirado em filmes e animes dos anos 80 e 90, uma pequena barra de progresso entre a nave e seu destino na base da interface, no canto inferior direito um visualizador de música e uma janela de diálogo na canto superior direito. Todas esses elementos foram removidos por boas razões. Alguns foram movidos para outras partes do jogo e outros não contribuíam para a experiência do jogo.

Primeira conceito da interface do jogo.

Nas versões seguintes a barra de progresso foi substituida por um conceito de links que temos na versão atual do jogo. Essas conexões servem para mostrar quais elementos se influencia no tabuleiro ou possuem alguma ligação. Tentei manter a interface de diálogo e e o visualizador de música, mas é possível perceber que esses elementos deixam a interface tumultuada e geram muito deistração e foram removidos.

Linhas de conexão por toda parte.

Nas versões a seguir inseri uma prévia das cartas e fiz um ajuste geral da posição dos botões e elementos de leitura do estado da nave à esquerda.

Previsão de encaixe de cartas.
Ajustes gerais em posicionamento e escala de diversos elementos.

Após algumas versões, que receberam mais uma sessão de limpeza de alguns do excessos, senti a necessidade de criar uma pequena animação demonstrando como esses elementos funcionariam dentro do jogo. Coloquei inclusive alguns elementos de som.

Todas essas versões do design de interface foram feitas em no Inkscape, um programa de desenho vetorial, com ele exportar cada elemento de interface para o Blender e criar uma animação foi um processo bem ágil.

Interface no Inkscape
Camadas no Blender

Com a animação feita o Dilly se sentiu confiante o bastante para dar seguimento no design de interface dentro da Godot, game engine que estamos usando. Estamos utilizando esse mesmo processo para criar as demais interfaces do jogo e refinando o design a cada nova etapa de testes.

Estamos trabalhando para lançarmos o jogo em acesso antecipado ainda esse ano. Nós ainda temos muito trabalho antes do lançamento e outras interfaces que o jogo requer, Espero poder falar dessas outras telas no futuro e também sobre meu trabalho modelando e animando as naves e efeitos do Takara Cards. Enquanto isso você pode conferir nossa página no Steam.

Raposa

3D blender, Ilustração

Eu tenho algumas imagens do processo de execução desse desenho. A imagem original do meu sketchbook:

Eu finalizei a personagem no Gimp:

Depois eu modelei o cenário no Blender:

Também fiz a marcação de luz seguindo a pintura da personagem:

Os dois renders foral levados para o gimp onde pintei a linha e um pouco de textura:

No final combinei personagem e cenário e acrescentei uma camada de pintura para ajustar o tom e acrescentar um pouco de brilho ao redor da janela e da personagem:

Horror! (Pixel Art)

3D blender, Ilustração

Eu fiz  essa ilustração em pixel art:

paola-horror

Essa ilustração começou com um desenho rápido no GIMP:

light

Na verdade, esse desenho rápido começou com esse rascunho:

rascunho

Esse rascunho serviu de base para mais de uma ilustração. Se você observar o post anterior, vai ver que ele também começa nesse desenho.  Além desses dois estudos ainda fiz mais estudos no meu caderno:

sketchbook

Também fiz esses dois desenhos em pixel art, também no GIMP, para explorar o design do personagem:

Mas nada disso adiantou muito. A preguiça falou mais alto e resolvi fazer uma mescla dos dois últimos projetos de pixel art que fiz:

espolio

Peguei o corpo da primeira ajustei umas proporções e, por algum motivo testei a luz. Como resultado descobri que teria que refazer os materiais, ou fazer o efeito na pós produção. Acabei fazendo ambos, tenho certeza que deve existir solução melhor, mas eu gostei bem do resultado:

Na sequencia fiz uma roupa nova e usei o cabelo da outra personagem, com alguns ajustes na lateral do penteado. Também aproveitei para testar um contorno no modelo:

mix-charmix-char2

E com o personagem todo montado e pronto para posar eu resolvi refazer a cabeça, por pura curiosidade. Não usei modelsheet, fui só olhando as imagens que desenhei e fazendo uma média entre todas:

Screenshot_04

A imagem acima é a parte mais difícil para mim, as coisas ainda estão muito feias ainda e longe de terminar, mas eu já estava no modelo por muito tempo para simplesmente desistir. É o famoso momento “ou vai, ou racha!” Quando terminei a modelagem da cabeça (fiz até as orelhas, que não aparecem no final)  criei todos os controles de expressão, novamente motivado por curiosidade:

Screenshot_06

Os valores na bagunça acima são as variações de deformação de cada pedaço no rosto (lista bilíngue em roxo na imagem) e podem ser controlados pelos três “bones” no centro do rosto. Na prática é bem rápido de trocar as expressões faciais dela:

facial-expressions

Finalmente eu podia fazer a pose dela. Detalhe é que eu não tinha um plano, as imagens acima são todas exploratórias. Nenhum dos desenhos combinam com o resultado final. Eu estava descobrindo a coisa enquanto fazia. Testei várias poses e gostei da expressão de terror:

paola-horror-1

Esse processo até aqui demorou alguns dias. O primeiro arquivo é do dia 8 de Fevereiro de 2019 e terminei dia 22 de fevereiro de 2019. Não trabalhei nesse modelo todos os dias desse período e em cada dia gastei um tempo diferente. Após todo o esforço editar o modelo ficou bem mais rápido. Eu até fiz um teste de uma hora para ver o quanto conseguiria variar:

vivi-angry

 

O cenário foi na última hora do processo e demorou alguns minutos. Eu usei um par de “Add Ons” do Blender, o Archimesh e o Archipack. Ambos já vem no Blender, basta ligá-los. E como só precisava sugerir que tinha um cenário o processo foi bem simples:

Screenshot_07

É só isso mesmo, umas colunas e uma escada ridiculamente gigante. Aliás, repara no pezinho torto dela. No enquadramento funciona:

Screenshot_08

Só pela diversão olha como é a cena do meu post anterior:

compare

Acho que esse foi meu “post” mais longo nesse blog. Espero que ajude alguém. =)

 

 

 

 

 

 

Little Fanart:

3D blender, Animação, Ilustração

Eu fiz uma fanart inspirada pelo clipe Little Uneasy da banda Fazerdaze:

Little Fanart: from Daniel Pinheiro Lima on Vimeo.

Esse é o video original:

A partir dele eu fiz esse model sheet:

modelsheet

Fiz o modelo 3D já com a pixel art como objetivo, esse é o primeiro teste:

teste-01

Todo o resto foi modelado olhando o vídeo como guia. Esse é um teste intermediário do cenário:

teste-02

 

Render da 3D view (OpenGL):

teste-02.gif

Wireframe:

teste-03

Resultado final:

final