tutorial

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á!

 

 

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

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