🤔 Para Refletir :
"Publique seu jogo. Dê a cara a tapa. Vai ter hater? Sim, porque você foi lá e fez, tem gente que nem faz!"
- HenriqueGibi

[The Digifami Web] Curso de Arte em Pixel (3º Ano)

Victor Sena Masculino

Conde
Membro
Membro
Pixel Art 💘
Juntou-se
01 de Agosto de 2015
Postagens
267
Bravecoins
1.024
Área
Pixel Art
3iC0lho.gif

Curso de Arte em Pixel
(3º ANO)


Classes

Sala de Aula do 1º Ano - Sala de Aula do 2º Ano - Sala de Aula do 3º Ano​

Enterbrain Co. Ltda comentou:
Quando se descobre que pode criar os próprios recursos para jogos, muitas pessoas provavelmente pensam em desenhar em pixel. No entanto, ao tentar fazê-lo, podem enfrentar várias barreiras, como não conseguir desenhar bem, não saber como fazê-lo, demorar muito tempo, entre outras coisas. Embora seja importante experimentar e aprender sozinho, desistir no meio do caminho pode não valer a pena. Aqui, apresentamos técnicas e conhecimentos básicos, bem como algumas dicas, para que você possa usá-los como referência para aprimorar suas habilidades.

※ Para as pessoas que dizem ~ "ver online é difícil", criamos uma opção para baixar os materiais de cada aula em um único arquivo compactado. Cada arquivo está em formato de auto extração. Se você está preocupado com os custos de navegação, não hesite em usar esta opção.
Download (ダウンロード):
SALA DE AULA DO 3º ANO

É uma sala de aula de terceiro ano, onde os fundamentos já foram dominados e estão trabalhando em atividades práticas.​

● AULA 01 - Expressando textura de objetos? U
● AULA 02 - Expressando textura de objetos? V-1
● AULA 03 - Expressando textura de objetos? V-2
● AULA 04 - Expressando textura de objetos? V-3
● AULA 05 - Expressando textura de objetos? V-4
● AULA 06 - Fundamentos de animação 2
● AULA 07 - Animação de efeitos
● AULA 08 - Criando personagens em miniatura conforme design
● AULA 09 - Animação de atuação para personagens em miniatura
● AULA 10 - Animação de personagens grandes
Akida Komachi (あきだ こまち)​
Professora do 3º Ano​
Uma antiga professora bonita, apelidada de "Komachi do Pontilhado". Uma mulher forte que ainda é habilidosa mesmo em sua velhice. Ela tem uma reputação pela sua atenção aos detalhes em suas aulas devido à sua natureza nervosa e sua habilidade em lançar o giz é afiada como a de uma veterana. No entanto, ela costuma faltar devido a doenças frequentes.​
D6dUgOa.png
● AULA 01 - EXPRESSANDO TEXTURA DE OBJETOS? U ●
Vamos dominar a textura e a sensação tridimensional para desenhar um mapa.
D6dUgOa.png

"Vocês, que concluíram um longo estudo básico e adquiriram habilidades, devem estar ansiosos para desenhar gráficos para jogos. A partir daqui, vocês vão aprender conhecimentos práticos e habilidades criando materiais para jogos. Primeiro, aprenda as regras para expressar a textura e a forma tridimensional ao desenhar um mapa."

PRIMEIRO, APRENDA CONHECIMENTOS BÁSICOS PARA CRIAR MAPAS
MÉTODO PARA CRIAR MATERIAIS QUE SE REPETEM
No caso de software que monta mapas em unidades de 16x16 pixels ou 32x32 pixels, como o RPG Maker, é necessário criar o material para que possa ser colocado em várias fileiras e colunas, sem parecer estranho, mas você está enfrentando uma dificuldade onde não consegue criar adequadamente, como se você tivesse colocado azulejos/tiles uns sobre os outros?​
gnNdG0e.png

Eu vejo uma linha estranha, parece um campo​
U8T5Ust.png

Está meio desalinhado.​
Há um método para criar um material que deve se conectar, enquanto corrige-o, eu gostaria de explicar os três métodos típicos. Escolha o método de criação que mais lhe convier, adicione sua própria modificação e tente desenvolver um método ainda mais fácil.​
●MÉTODO DE AJUSTE NO POSICIONAMENTO CONTÍNUO●
Método de edição do chip central, colocando pelo menos três linhas na horizontal e três na vertical. É eficaz para corrigir forçosamente a borda, mas tem a desvantagem de ser difícil de criar com chips decorativos. Como você precisa copiar muitas vezes, é necessário prestar atenção na amplitude de desenho.
wBpCckZ.png
Coloque os chips que deseja editar e corrija o chip central (parte com moldura branca) para se conectar aos chips ao redor. Não mexa nos chips fora da moldura branca. Depois de corrigir um pouco, copie o chip central e cole-o novamente na horizontal e na vertical. Repita até que a borda fique perfeitamente natural.​
●MÉTODO DE VERIFICAÇÃO DE ROLAGEM●
Selecione a unidade básica e use as funções de deslocamento de pixels e rolagem. Se você rolar em um loop, poderá trazer a borda que deseja corrigir para a posição desejada. É necessário um pouco de prática.​
f5qjUkf.png
Selecione a faixa com a unidade básica e use o deslocamento de pixel para mover cerca de metade da quantidade da unidade básica (neste exemplo, um deslocamento de 10 pixels). Se você puder configurar um loop, a parte que estava na borda irá para o centro. Corrija essa parte interrompida. Depois de terminar, verifique se está alinhado verticalmente e horizontalmente.​
●MÉTODO DE CORREÇÃO DE REARRANJO●
Configure uma grade com metade da unidade básica e rearranje como na imagem abaixo. A parte que era a borda virá para o centro, tornando mais fácil corrigi-la. Se precisar voltar ao estado original, pode ser um pouco complicado.​
50FoV2k.png
Primeiro, desenhe a lápis e configure a ferramenta para que possa selecionar uma faixa com metade do tamanho da unidade básica (definindo-a para se encaixar na grade) e reorganize as quatro peças para que fiquem diagonalmente opostas. Então, como na imagem à direita, a parte da borda se moverá para o centro, tornando mais fácil a correção.​
Unidade básica... uma unidade de chip no RPG Maker, 16x16 ou 32x32.
Dependendo da ferramenta que está usando, o método mais fácil de criar pode ser diferente, então é bom experimentar. A professora usa o método de verificação de rolagem. Algumas ferramentas têm a função conveniente de "exibição de azulejos/tiles na área selecionada", portanto, pode ser útil usá-las.​

FUNDAMENTOS DE REPRESENTAÇÃO DE MAPAS
Em jogos, os mapas enfatizam mais os aspectos simbólicos do que a realidade, ou seja, é importante que sejam facilmente identificáveis à primeira vista. Especialmente em jogos com menos cores e baixa resolução, é necessário aumentar esse aspecto simbólico. É importante lembrar disso, mesmo que seja no canto da mente.

Alguns podem não entender o que significa essa imagem simbólica. Quando se fala em símbolos, há coisas que vêm antes de padrões e formas. E isso é a cor. Por favor, olhe a imagem abaixo.​
bvFWi8k.png

Se você souber que isso é um mapa de antemão, provavelmente verá o azul como o mar, o amarelo como o deserto, o verde-amarelo como a pradaria e o verde escuro como a floresta. Primeiro, essa imagem de cor é importante.​


Em seguida, a forma também é importante. É possível entender o que é pela forma. Como você pode ver na imagem abaixo, se você desenhar de tal forma que a silhueta mostre do que se trata, mesmo que seja colorido, deverá ser capaz de representar o que deseja.​
oT2AK6e.png

Tentei desenhar uma urna com uma alça apenas com a silhueta. Se você tiver uma boa imagem da forma, deve ser capaz de entender que é uma urna, mesmo que seja pintada aleatoriamente. O truque é desenhar a forma de tal maneira que você possa entender o que é apenas com a silhueta, tanto para desenhar uma árvore quanto para desenhar uma casa.​

Com base nas duas condições acima, acredito que seja possível criar um chip ideal adicionando a expressão de textura aprendida no segundo ano.​

COM ATENÇÃO À TEXTURA, CONHECIMENTO PARA CRIAR MATERIAIS
OBJETOS NATURAIS E ARTIFICIAIS
Ao entender a diferença entre objetos artificiais e naturais, você pode ajustá-los para controlar a atmosfera do campo, a atmosfera de terras não desenvolvidas e a atmosfera da cidade. Os mapas também têm o papel de criar um ambiente adequado para o local, então é importante primeiro destacar a diferença entre objetos naturais e aqueles feitos pelo homem.

Aqui, aprenda quais regras existem e como usá-las na prática ao desenhar.​
●CONCEITO BÁSICO DE OBJETOS NATURAIS●
Embora nem todos os objetos naturais sejam tratados da mesma maneira, a característica dos objetos naturais é que sua "disposição aleatória".

Por exemplo, a grama cresce livremente em cada local onde não há intervenção humana e não é uniforme em altura e tipo. Essa aleatoriedade é a característica mais proeminente dos objetos naturais. As árvores também são únicas, com poucas formas idênticas e as ondas do mar não se aproximam da mesma forma. Portanto, é útil pensar em objetos naturais como tendo "formas acidentais" irregulares.

No entanto, ao criar mapas de jogos como material, não se pode fornecer muitas árvores diferentes e não é possível criar superfícies de solo com várias combinações de cores, mesmo que seja natural. Como resultado, é necessário pensar em desenhar objetos naturais de maneira apropriada para que sejam padronizados.

●COISAS A TER EM MENTE AO DESENHAR OBJETOS NATURAIS●
  • Tente evitar que as bordas sejam perceptíveis quando você colocar os objetos lado a lado;
  • Tome cuidado para que não pareça um padrão artificial;
  • Sempre consulte referências;
  • A menos que seja algo especial, use cores que se aproximem da cor natural;
  • Forneça plantas e terrenos adequados à região;
  • Para dar realismo, use várias cores para que pareça natural (em outras palavras, não desenhe com uma única cor).
●CONCEITO BÁSICO DE OBJETOS ARTIFICIAIS●
Todas as coisas artificiais são feitas para serem convenientes para os humanos viverem. Mesmo algo tão simples como um calçamento de pedra não é apenas uma pilha de pedras, mas é colocado de modo que a superfície seja plana e o tamanho das pedras sejam geralmente uniforme para facilitar o trabalho. Por exemplo, tijolos e outros materiais com o mesmo tamanho e forma são frequentemente usados para realçar as características artificiais dos objetos.

Além disso, em cidades com pouca mão de obra, o calçamento pode ser plano, mas as pedras podem ser irregulares, enquanto em cidades mais culturalmente ricas, além da praticidade, a arte é adicionada, tornando-se um padrão decorativo. A criação de objetos artificiais deve levar em consideração a cultura local e suas características específicas.

Além disso, os objetos artificiais são feitos para acomodar o tamanho humano, ao contrário dos objetos naturais. Por exemplo, uma cadeira deve ter um tamanho que permita que as pessoas se sentem nela confortavelmente e a entrada de uma casa deve ser grande o suficiente para as pessoas passarem facilmente. Ao desenhar móveis e objetos, é necessário ter em mente a proporção com o tamanho dos personagens.

●O QUE TER EM MENTE AO DESENHAR OBJETOS ARTIFICIAIS●
  • Pense em como os humanos viverão com o objeto;
  • Use combinações de curvas e linhas para expressar decoração;
  • Mantenha a proporção com o tamanho dos personagens;
  • Sempre consulte materiais de referência;
  • Crie edifícios que estejam em harmonia com a região (para evitar casas de gelo no deserto, por exemplo).

rIHfrPW.png
Este é um exemplo da amostra de grama e terra. Embora seja predominantemente verde, há também a mistura de tons de marrom e as manchas estão espalhadas aleatoriamente, formando a grama. A parte da terra também é criada com muitas cores espalhadas aleatoriamente. Essa aleatoriedade cria uma atmosfera natural, mesmo que a grama e a terra estejam dispostas em um padrão contínuo.

O limite entre a grama e a terra terá um nível diferente de atmosfera natural, dependendo se é feita com linhas aleatórias e confusas ou com linhas curvas definidas. Quando as linhas são limpas e curvas, parece que a mão humana esteve envolvida na criação.

Se você estiver procurando criar uma imagem ilustrada, não há problema em usar linhas curvas. No entanto, se quiser que pareça mais realista, a naturalidade será comprometida.
pEzXMVO.png
Padrões organizados e alinhados claramente emitem uma atmosfera artificial. Ao combinar um padrão natural de terra com um limite aleatório, dará a impressão de que o padrão artificial foi naturalmente quebrado ou rachado. Se você processar tudo ao longo de um padrão linear, criará uma sensação de que o padrão foi meticulosamente quebrado pela mão humana.
SdTjeMT.png
Coisas naturais têm padrões aleatórios. Para desenhá-las, a dica é desenhar aleatoriamente. Se você colocar um a um cuidadosamente, é natural que seja padronizado. É adequado usar a palavra "adequado" para desenhar o mouse de maneira natural.
  1. Comece pintando a cor base do campo;
  2. Desenhe linhas grossas com uma cor escura;
  3. Use uma cor comum ou uma cor intermediária entre a cor clara e a escura para pintar aleatoriamente;
  4. Embora seja um campo, não há apenas um tipo de grama e é natural ver a terra. Comece aleatoriamente a espalhar cores que não sejam verdes, mesmo que pareça deslocado. Adicionamos quatro cores aqui;
  5. Verifique se não ficou com linhas ou repetições visíveis.
É importante notar que, quando há várias cores, o resultado final se tornará um conjunto natural.
WxxHvyX.png
Para coisas artificiais, use linhas retas e curvas.
  1. Primeiro, pinte a cor base;
  2. Use a ferramenta de linha reta para dividir em um padrão de azulejos/tiles;
  3. Adicione cores claras para criar profundidade. Se você deixar assim, parecerá que foi feito pelo ser humano, mesmo que seja feito com materiais naturais;
  4. Da mesma forma com a grama, se você espalhar aleatoriamente pixels e adicionar muitas cores, poderá criar a aparência de uma rocha natural que foi cortada e polida;
  5. Dê uma olhada na configuração final para verificar se ela tem um aspecto de padrão.
USO DE ILUSÃO DE ÓTICA
Todas as imagens, incluindo imagens em pixel arte, são desenhadas em duas dimensões (plano), mas devem representar a terceira dimensão dentro dessas duas dimensões. Diferentemente da criação de esculturas de argila, que são tridimensionais, mostrar uma figura tridimensional em uma superfície plana exige o uso de nossa percepção e hábitos.

Aqui, vamos revisar o conhecimento sobre como criar uma ilusão de tridimensionalidade como uma revisão para os alunos do segundo ano.​
★MÉTODOS DE REPRESENTAÇÃO PARA CRIAR UMA ILUSÃO DE TRIDIMENSIONALIDADE★
Desde a luz natural (luz solar) até as fontes de luz usadas na vida cotidiana, todas elas estão sempre acima de nós. O método de criar uma ilusão de degraus é usar a luz que brilha de cima para baixo, que é o básico. Discutimos brevemente o efeito da luz no segundo ano, mas aqui vamos explicar de maneira mais clara.​
F2af2ZY.png
Esse é um método de criar uma ilusão de tridimensionalidade com base no brilho da cor. Parece ser um simples pedaço de papel colorido, mas é um elemento importante para representar figuras tridimensionais.

Os olhos humanos são imprecisos e tendem a ver as cores escuras como baixas e as cores claras como altas. Isso ocorre porque os humanos têm a sensação de que "a luz sempre vem de cima". A cor intermediária de ciano é usada como base, o azul escuro é visto como baixo (fundo) e o ciano claro é visto como alto (frente).​
qX3tg5u.png
Além disso, é bom saber que a diferença nos tipos de cores, ou seja, a diferença na tonalidade das cores, pode ser usada para criar uma ilusão de tridimensionalidade. Se o verde for considerado como uma altura normal, o amarelo, uma cor quente, parecerá estar na frente e o azul, uma cor fria, parecerá estar mais ao fundo. Isso ocorre porque as cores quentes são percebidas como cores próximas à luz ou seja, acima de nós, de maneira inconsciente.​

Dat4k0k.png
Vamos adicionar mais elementos. Aqui temos uma imagem de paisagem plana e monótona. As montanhas são pintadas com um verde uniforme e não é possível saber qual está mais próxima ou distante.​
o4C9GRt.png
Vamos usar o método de representação com base no brilho da cor que aprendemos primeiro. Agora podemos entender qual montanha está mais distante, mas algo parece estranho, não é? Isso ocorre porque a diferença de brilho entre a montanha e o céu é muito grande. Parece que há um buraco no céu, não é? Mas isso não acontece na vida real. É porque há elementos, como ar e poeira, que não aparecem a menos que haja uma certa densidade entre a montanha e os olhos.​
Fa5a9H1.png
A imagem que representa essa noção de "atmosfera" é essa. Ao fazer com que ela se misture cada vez mais ao fundo, a saturação cai e parece que está distante. Embora este método não seja muito usado em "map chips", é uma técnica usada em cenas de longa distância, como penhascos nebulosos onde não se pode ver o fundo ou em cenas de batalha. Portanto, lembre-se disso. Se você reduzir a saturação e o contraste, naturalmente terá um efeito de névoa que dá a impressão de haver ar no meio.

Integrar as cores ao plano de fundo também é uma técnica para criar a sensação de profundidade.​
★REGRA DE DESTACAR OU AFUNDAR★
Você já aprendeu sobre como desenhar coisas parecendo estar saindo ou afundando na aula do segundo ano. Aqui, gostaria de explicar como essa ilusão é simples.​
aQSnlz3.png
O que você acha desta imagem? Parece que o lado esquerdo está saindo e o direito está afundando, certo? Na verdade, essa imagem é exatamente a mesma, sem mudar a cor ou a posição dos pixels, exceto pelo fato de ter sido invertida. Isso ocorre porque os seres humanos sempre veem a luz de cima e essa é a maneira mais simples de criar uma sensação tridimensional. Essa é uma técnica frequentemente usada em "map chips", então lembre-se disso.​
★REGRA DA DIFERENÇA DE ALTURA PELA ESPESSURA DA LINHA DA BORDA★
Ao usar todos os elementos que parecem estar mais longe, você pode criar livremente a sensação de altura de uma etapa.​
9yS0V43.png
Embora seja a mesma disposição de pixels, a cor é mudada progressivamente. À esquerda, a parte da borda é branca e não parece haver muita diferença de altura, mas à medida que você vai para a direita, parece que há uma diferença de altura cada vez maior.​
Gq8SYX0.png
Esse também é um método usado ao desenhar gráficos de rosto. Para representar a diferença de altura entre o queixo e o pescoço, é comum sombrear mais escuro. Ao clarear a diferença de cor e a espessura da linha da borda, pode-se criar uma sensação de profundidade.​

A técnica de expressar texturas ásperas ou suaves também usa os mesmos efeitos de luz mencionados acima.
★TRANSPARENTE, OPACO, ILUMINADO★
Ser transparente ou opaco é um elemento importante na expressão da textura. Coisas opacas podem ser madeira ou solo, enquanto coisas transparentes podem ser vidro ou cristal. Ser transparente ou opaco é uma das texturas importantes.​
SNLnw3I.png
Eu tornei o fundo preto para ficar mais fácil de ver, já que um fundo escuro facilita em distinguir.​
Objetos opacos não são afetados pelo plano de fundo. Objetos transparentes são influenciados pelo plano de fundo. No caso de uma esfera, a borda é visível mais espessa, portanto, a cor é retida na borda.

Objetos que estão emitindo luz não são afetados pelo plano de fundo e ficam mais escuros à medida que se afastam do centro. Como esta imagem não recebeu nenhum processamento, teria uma sensação de "suavidade" ao tocá-la.
Yk2b9mC.png
Quando os tiles são colocadas em áreas com sombras ou diferenças de cor, imediatamente obtemos uma impressão áspera. Isso ocorre porque as diferenças de cor entre cores adjacentes são percebidas como "degraus", como já explicado anteriormente.

O padrão do dithering é usado quando se deseja expressar essa aspereza. Quanto maior a diferença de cor, mais áspera a textura se torna. Como este desenho tenta minimizar as diferenças de cor, pode ser difícil ver em tamanho real.

É importante ter cuidado ao usar preenchimentos de cor em objetos lisos apenas para compensar a falta de cor. Isso pode resultar em uma textura áspera indesejada.​
dAeBPQC.png
Ao adicionar brilho, você pode criar uma sensação de suavidade. Para preservar essa suavidade, é melhor usar texturas sutis ou padrões discretos.​

EXPRESSÃO DA ÁGUA
Devido à sua transparência, expressar a água pode ser difícil, especialmente quando se precisa criar movimento em animações. Além disso, a água também pode congelar, então é preciso considerar como representá-la quando estiver nesse estado. Para desenhar a água de forma realista, é necessário usar efeitos de cor.
  • A água é semi-transparente, o que significa que é possível ver através dela.
  • Em qualquer estado, a sombra da água é azul (não cinza).
  • As áreas molhadas parecem mais escuras.
WraydaS.png
Se você está desenhando um muro de pedras e deseja criar um canal de água usando essas pedras, pode manter a mesma configuração de pixels até a altura da água e simplesmente mudar as cores para a água. Ao clarear a parte onde a água encontra com o muro, você poderá criar uma aparência ainda mais convincente.
9fd3yNo.png
Quando se deseja destacar a transparência, a cor azul da água pode parecer um pouco turva ou refletir algo. Nesses casos, a tela fica um pouco escura, a claridade e saturação da água são diminuídas. Isso se baseia no fato de que áreas molhadas ficam mais escuras.
w3UDCeQ.png
Combinando esses dois elementos, você pode criar uma atmosfera ainda mais realista. Como a tela fica escura, a parte inferior da água deve ser mais clara para equilibrar. Se você criar uma animação na borda da água, será possível expressar o movimento.

Você também pode criar a atmosfera da água mostrando as coisas que existem nela (por exemplo, algas). Se a água parecer artificialmente azul, você pode torná-la mais realista adicionando um tom de verde para mostrar a presença de algas. Decida experimentando até se adequar ao desenho.

Se a ferramenta não tiver a função de mudança de cor, a única opção é pintar manualmente. Quando pintar manualmente, encontre a cor mais clara e a mais escura e pinte-as sequencialmente para minimizar os erros.

Também há uma maneira de reduzir a aspereza dos pixels para representar presença da água, mas é necessário editar manualmente os pixels.​

COMO COLETAR INFORMAÇÕES PARA MAPAS
Como é difícil desenhar um mapa apenas com a imaginação, informações são essenciais para produzir algo bom, mesmo que seja um pouco.

Por exemplo, mesmo para desenhar uma mesa, a realidade é diferente de desenhar algo apenas imaginando. Especialmente para vincos de tecidos cujas memórias são imprecisas, é difícil desenhá-los com imaginação. Para dar textura ao solo, é inevitável depender das informações.

Além disso, informações são essenciais para saber que tipo de material é necessário no mapa. Se você quer saber quais são os móveis em uma casa típica alemã, como é o design do jardim ou se deseja destacar as características de uma determinada região, deve ter informações. Se você desenhar apenas com imaginação sem informações, a cidade será uma imagem monótona e uniforme, o que geralmente acontece em todo o mundo. Se você quiser dar personalidade a cada cidade, deve ter informações.

Portanto, a melhor maneira de coletar informações é ver com seus próprios olhos, mas nem sempre é possível. Portanto, é necessário preparar informações em livros com fotos, por exemplo. No entanto, como os livros de imagens são caros, é difícil comprá-los e colecioná-los com facilidade.

Porém, nos últimos anos, com a disseminação da Internet, é possível coletar informações gratuitas em todos os lugares. Se você quiser informações sobre o telhado de sua casa, por exemplo, pode procurar um site especializado em telhas de telhado digitando "telhado" em um mecanismo de pesquisa. É uma boa ideia cultivar o hábito de marcar boas informações como favoritas ou salvar dados de imagem para preparar sua própria biblioteca (de uso pessoal).

No entanto, informações em papel também são essenciais, se possível. Se você colecionar revistas de viagens ou folhetos de casas, eles serão úteis quando precisar deles. É importante cultivar o hábito de coletar recortes de papel antes de jogar qualquer livro fora. Essa também é uma maneira importante de coletar informações.​

Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2001 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 02 - EXPRESSANDO TEXTURA DE OBJETOS? V-1 ●
Vamos desenhar mapchips necessários na prática (chão)
D6dUgOa.png

"Quando você começa a conseguir desenhar um pouco, certamente quer usar suas próprias ilustrações no seu jogo. No entanto, há muitos gráficos necessários para um jogo, especialmente mapas que precisam ter várias texturas e formas. Aqui, vamos trabalhar em cada chip de mapa necessário de maneira consistente, um por um."

OS MATERIAIS USADOS NO RPG MAKER DEVEM SEGUIR AS REGRAS DO PROGRAMA
Há muitas pessoas que querem criar jogos no RPG Maker e usar seus próprios gráficos. No entanto, o programa tem regras sobre o tamanho das imagens necessárias, o arranjo individual dos chips e a quantidade de cores utilizáveis. Essas regras estão descritas no manual e na ajuda do programa, então primeiro dê uma olhada e entenda as regras da imagem que você quer criar.

Nesta aula, vamos trabalhar com o objetivo de criar materiais que possam ser usados no "RPG Maker 2000". Consulte as regras do conjunto de chips do "RPG Maker 2000". Se você quiser criar tudo do zero, é bom começar desenhando uma imagem como [esta].​
x7t4OB3.png


COMECE FAZENDO A PARTIR DO CHÃO
Por que começar a criação a partir do chão? Porque todo o resto será algo que ficará acima do chão. Ao desenhar o chão primeiro, quando você desenhar algo para colocar em cima, poderá verificar imediatamente se está alinhado corretamente. Se você criar primeiro algo para colocar em cima, como uma árvore, precisará redesenhar sempre que o chão mudar. Ao preparar primeiro o chão necessário e desenhá-lo enquanto verifica o alinhamento, você será capaz de desenhar árvores ou outros elementos genéricos que possam ser usados em qualquer tipo de terreno.

Como dica para criar materiais, se você seguir a ordem de chão, parede e objetos menores, reduzirá as partes que precisam ser corrigidas posteriormente, tornando a criação de materiais mais fácil.​

VAMOS CRIAR UM CAMPO DE GRAMA!
Antes de criar um campo de grama, imagine claramente em sua mente o que é. Mesmo que seja um campo de grama, a imagem de um gramado arrumado e um campo selvagem com grama alta são diferentes. Pense cuidadosamente sobre que tipo você deseja criar antes de começar!​
  • Um campo de grama representa um estado em que a grama está crescendo, como o nome sugere;​
  • Abandone o preconceito de que "grama é verde" e desenhe com base em referências adequadas. Dependendo da tonalidade escolhida para a grama, a imagem na tela pode mudar drasticamente. Já que ela vai cobrir uma grande área, é importante escolher um tom agradável aos olhos, com uma aparência brilhante;​
  • Tenha uma imagem clara do comprimento da grama. O arranjo de pixels varia de acordo com o comprimento da grama.​
★DICAS PARA COLOCAÇÃO DE PIXELS COM BASE NO COMPRIMENTO DA GRAMA★
A colocação de pixels varia de acordo com o comprimento da grama. Confira abaixo como ficará.​
pT4vozR.png

Baixo​
Grama realmente baixa, como musgo, que não tem muita diferença de altura, é suave e uniforme. É possível expressar a sensação de grama apenas com cores, mesmo pintando de uma cor só.​
tVxL2iY.png

Normal​
Gramado um pouco mais alto, como grama de jardim, que não é muito profunda em altura. Este tipo de altura é adequado para áreas urbanas. Desenhe cerca de 2 pixels de altura em cores semelhantes, tomando cuidado para não deixar as bordas muito nítidas.​
Lqdmiet.png

Alto​
Gramado com altura considerável. À medida que a grama cresce, as sombras das folhas caem naturalmente sobre a grama, criando diferenças de luz e sombra dentro do pixel. Desenhe pixels com cuidado, tendo em mente cada folha da grama. Pode ser interessante desenhar a grama como se estivesse ondulando. Quanto maiores forem as diferenças de luz e sombra, mais alta parecerá a grama.​

e9eUeoH.png
  1. Pinte a cor verde básica;
  2. Com uma cor um pouco mais escura, desenhe duas linhas verticais de 2 pixels de altura para criar a sombra da grama. Tente não alinhar as linhas verticalmente e horizontalmente, para que a aleatoriedade do desenho diminua a aparência de um padrão quando alinhado;
  3. Com uma cor um pouco mais clara, desenhe também linhas verticais, tendo em mente as linhas já desenhadas. Se a diferença de cor em relação à cor original for pequena, pode desenhar aleatoriamente apenas as linhas verticais;
  4. Escolha uma cor intermediária entre a cor básica e a sombra, desenhe para que a sombra não se destaque demais. Ajuste a aparência do desenho para que fique mais atraente, como apagando a cor original, adicionando cores mais claras ou escuras ou apagando a sombra;
  5. Finalmente, verifique o desenho como um todo e faça ajustes, observando o brilho. Se desejar uma aparência mais clara, adicione mais cores claras e para uma aparência mais escura, use mais cores escuras.
VAMOS CRIAR TERRA!
Criar terra usando mapas de chip é necessário, por exemplo, para partes onde a grama foi arrancada, como estradas e áreas de cultivo. Em desertos e terrenos baldios, a terra é geralmente a parte principal e a grama é apenas um complemento. Existem vários tipos de terra, por isso, comece a criar com uma boa imagem em mente!
  • A cor da terra varia de acordo com o local. A terra rica em nutrientes é de cor marrom escura, enquanto em locais com poucos nutrientes e pouca água, a terra é de cor marrom claro com um toque amarelado;
  • A cor da terra também depende se estiver molhada ou não. Se a terra estiver úmida, a cor será mais escura e se estiver seca, será mais clara;
  • A quantidade de cascalho ou pedras pequenas também faz diferença. Pense cuidadosamente em qual parte do mapa deseja colocar a terra.

★DICAS PARA CRIAR DIFERENTES TIPOS DE TERRA★
FYka3Sg.png

Molhado​
O solo molhado é geralmente composto de húmus de alta qualidade e está localizado em áreas constantemente sombreadas. Ele tem uma densidade devido à sua umidade e inclui suplementos verdes como musgo. É recomendado desenhar conscientemente a sensação de umidade. Se as tonalidades forem diferentes, unifique a luminosidade e defina um tom geralmente baixo para dar a sensação de peso.​
DUda4OL.png

Seco​
É uma condição de solo um pouco seco, com pedrinhas misturadas. Se o solo estiver localizado em uma área ensolarada e frequentemente visitada por pessoas, a grama pode ser removida e é necessário desenhar conscientemente a poeira. Devido ao acúmulo de cascalho, é necessário usar uma tonalidade um pouco mais clara e escura. Se conseguir expressar bem a textura áspera, poderá destacar a diferença de material ao lado da grama.​
bc6lYVm.png
  1. Pinte a cor base. Se possível, uma cor amarela que dê uma sensação leve é recomendada;
  2. Adicione a cor das sombras das pedrinhas, pixels escuros. Como com a grama, evite colocar os pixels em linha reta e desenhe-os de forma aleatória;
  3. Com uma cor mais clara que a cor base, espalhe os pixels aleatoriamente, prestando atenção às saliências. Ao desenhar, evite os pixels escuros que foram adicionados inicialmente, para que as saliências sejam destacadas;
  4. Adicione uma cor ainda mais clara e desfoque levemente as áreas ao redor dos pixels escuros. Para melhorar a compatibilidade com o gramado, evite adicionar muitas cores verdes;
  5. Ajuste a imagem para que ela fique bem e completa. Se estiver muito clara, escureça a cor base para que fique mais escura.
VAMOS FAZER UM CALÇAMENTO DE PEDRA!
O calçamento de pedra pode ser usado não apenas como um revestimento exterior, mas também como um revestimento interior. Sendo uma construção artificial, é necessário padronizá-lo a um certo grau, de modo que possa ser visto como um padrão. Mesmo com o mesmo calçamento de pedra, é possível criar muitos tipos diferentes, alterando a cor, forma e textura da pedra.

  • Quanto mais artístico for o design (com desenhos), menos é necessário enfatizar a textura da pedra;
  • Como base, pense nas pedras reais para conseguir uma textura mais realista;
  • Para objetos artificiais, é importante dar uma sensação de vida. Por exemplo, no caso de um calçamento de pedra, à medida que as pessoas caminham, os cantos das pedras se desgastam e as diferenças de altura entre as juntas diminuem.

★DIFERENÇA DE TEXTURA DEVIDO À MANEIRA COMO É TRABALHADA★
NwJwuaj.png

Rústico​
É um calçamento de pedra simples, com pedras colocadas de forma a ficar aproximadamente plana. É importante selecionar pedras que pareçam ter sido naturalmente niveladas, de modo que a aleatoriedade da disposição das pedras não afete a textura da pedra. Também é importante não uniformizar o tamanho das pedras, deixando lacunas entre elas e mostrando um pouco de terra para um acabamento mais bonito.​
C7OwVX2.png

Fininho​
É um calçamento de pedra feito cortando e nivelando as pedras. Para locais com muito tráfego de pessoas, é importante que as bordas sejam arredondadas um pouco para evitar degraus, mas ainda deixando uma linha artificial nítida. As lacunas entre as pedras devem ser completamente preenchidas e a terra não deve ser visível.​
SDmH5iZ.png

Elegante​
É um calçamento de pedra composto por pedras cortadas em formas geométricas precisas, como quadrados e círculos, polidas para formar um padrão. Para evitar a formação de degraus, as pedras são encaixadas com precisão e polidas até perderem a textura da pedra. É adequado para uso em locais onde a intervenção humana é evidente, como em um castelo.​
LSKR4Py.png
  1. Pinte a cor básica da pedra;
  2. Desenhe as linhas nos limites entre as pedras. Desenhe de modo que as linhas sejam repetidas de cima para baixo e da esquerda para a direita;
  3. Pinte com uma cor ligeiramente mais escura ao redor de cada pedra, deixando uma margem ao redor de cada pedra. Isso torna cada pedra mais nítida e destacada;
  4. Use a cor para representar a textura da pedra. Você pode alterar a cor de cada pedra. Em vez de tornar as pedras completamente cinzas, é melhor ser consciente e dar um toque de azul ou vermelho para obter melhores resultados. Coloque os pixels um por um, como se estivesse colocando uma pedra de cada vez;
  5. Após verificar os loops de cima, baixo, esquerda e direita, ajuste a espessura das linhas de contorno. Se você colocar destaques/brilhos fortes, pode dar uma sensação mais polida, mas tenha em mente que se as bordas ficarem muito evidentes, é melhor ser mais discreto.

LIMITE COM SUPERFÍCIES DIFERENTES
Depois que a superfície estiver pronta, vamos criar a borda entre as superfícies. Se você habilitar a função de geração automática para essa borda, tornará muito mais fácil montar o mapa. Consulte a página acima para obter informações sobre como configurar a geração automática.

Comece criando a borda entre elementos naturais.​
Uma8xe3.png
Comece criando uma combinação de duas peças que deseja conectar. Copie e organize cada uma com 4 peças de altura por 3 peças de largura. Cada peça tem 16x16 pixels.​
cuDyVAw.png
Deixe uma linha vazia na parte superior da seção de grama e enquanto se concentra nos quatro cantos, pinte com cores brilhantes que não são atualmente usadas na seção de grama. A aleatoriedade tornará mais realista. Quando terminar de pintar, pinte essa seção com cor transparente.​
AulWJYz.png
Com a cor transparente habilitada, sobreponha-a à seção de terra para evitar desalinhamentos.​
aQafAkG.png
Adicione sombras de grama ao longo da borda da terra para criar uma sensação tridimensional. Concentre-se em fazer com que a seção de grama pareça mais alta que a seção de terra.​
OJ0yDCd.png
Copie os quatro cantos de 4 peças e a seção de terra, como mostrado na imagem.​
uMCV5Aw.png
Adicione novas peças para unir os cantos. Pode ser necessário desenhar com cor transparente e sobrepor as peças de grama, ou simplesmente desenhar alguns pixels. Certifique-se de conectar tudo.​
tOhJeTi.png
O quadrado vermelho na imagem tem 8x8 pixels. Copie e coloque-o na posição mostrada na imagem.​
SK8raEf.png
Copie os quatro quadrados de 8x8 pixels para a posição mostrada na imagem para concluir a criação automática das peças da borda entre a grama e a terra. Agora você pode integrá-las ao RPG Maker e verificar a conexão automática das peças.​
Em seguida, criaremos um limite entre objetos naturais e artificiais. Se a grama for mais alta que o pavimento de pedra, é possível usar o método acima mencionado. Se o pavimento de pedra for mais alto ou igual à grama, faça o seguinte:​

MEKwW2Z.png
Primeiro, crie uma imagem com duas variedades de chips que você deseja conectar, cada uma com 4 chips de altura e 3 chips de largura. Um chip é de 16 x 16 pixels.​
6lVEcrX.png
Pinte o restante dos chips com uma cor vibrante, deixando uma linha vazia na parte superior. A técnica é apagar uma por uma as pedras do pavimento.​
tOSzdji.png
Com a cor transparente selecionada, sobreponha sem deslocar as partes da grama.​
QnFDmoz.png
Proceda a colocar a sombra do pavimento de pedra sobre a grama, aplicando anti-aliasing para harmonizar a transição entre a grama e o pavimento.​
XuCedqB.png
Daqui em diante, é como a combinação de objetos naturais com objetos naturais; coloque os quatro cantos dos chips conforme o esquema abaixo.​
khtsSif.png
Desenhe novos chips para conectar os cantos. Pinte as áreas que deseja tornar em grama com uma cor vibrante, aplique a cor transparente e coloque por cima do chip de grama.​
O7S8ja8.png
Reorganize conforme o esquema, como a combinação de objetos naturais com objetos naturais.​
Ia4ctsU.png
Copie as áreas de 8x8 pixels de cada canto para a posição indicada na imagem para concluir a criação dos chips de limite entre a grama e a pedra. Em seguida, implemente no RPG Maker e verifique a conexão dos chips gerados automaticamente.​

DoNTzKV.png

Da mesma forma, você pode criar várias combinações.

Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2001 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 03 - EXPRESSANDO TEXTURA DE OBJETOS? V-2 ●
Vamos tentar desenhar as chips de mapa necessários (animação de mapa)
D6dUgOa.png

"Depois de desenhar o chão, desenhe uma chip um pouco mais difícil de animar. Certifique-se de dar transparência à água. Esta parte é um pouco difícil, então se você não conseguir fazer, use uma amostra apenas para a parte do oceano."

VAMOS DESENHAR ÁGUA!
Antes de desenhar a parte que será animada, desenhe a base do fundo do mar. Se a água for rasa e clara, você deve conseguir ver a areia no fundo. Se for profundo, mesmo que seja claro, você não poderá ver o fundo. Comece a prestar atenção nessa diferença. Além disso, em imagens reduzidas como em um campo, não podemos desenhar detalhes finos, como pedregulhos. Aqui, vamos desenhar a água em tamanho real (fora do campo) para dominar como desenhá-la.

Agora, quanto à expressão de textura, acredito que você já entende como desenhar quando há água, conforme aprendeu em U. Portanto, não vou descrever aqui sobre cores e outros detalhes. Se não entender bem, por favor, releia a aula anterior.​

VAMOS DESENHAR UMA PARTE RASA DA PRAIA
z8J82xf.png
Primeiro, desenhe a praia usando a mesma técnica para desenhar a terra na aula anterior. Como isso se tornará o fundo do mar, é bom que a cor seja um pouco azulada, consciente de que está sob a água. Mostrar os pixels de areia faz parecer transparente. Não se preocupe com a cor da areia, pode-se adicionar uma variedade de cores, como azul ou verde, para parecer mais bonito. Como com outras superfícies, faça com que seja um loop correto.​
ULV5v7t.png
Em seguida, desenhe a linha de bolhas para parecer como a maré do mar. Comece desenhando com uma única cor em um fundo transparente como este. Desenhe como se estivesse desenhando paralelepípedos, para que pareça real. Pode-se sair um pouco da área grande, mas só precisamos da área em vermelho.​
xnUkWql.png
Recorte a área em vermelho e ajuste para que as bordas superior, inferior, esquerda e direita sejam um loop. Crie um efeito aleatório variando a espessura das linhas. Desenhe círculos com aproximadamente o mesmo tamanho, mas mudando ligeiramente a forma e o tamanho, tornando mais parecido com o fluxo da maré. Ao desenhar nas áreas em que as linhas se cruzam, crie uma aparência mais natural.​
P3bSi8f.png
Verifique como ficou sobre a praia. Se a transparência da água aparecer, é sucesso. Se não aparecer, torne a cor da areia mais azul ou mais escura.​
ggOq8o0.png
A partir de agora, vamos criar uma animação um pouco mais difícil. Copie o chip da maré e faça como a figura. A partir daqui, vamos editar o chip do lado direito.​
VSGEvlg.png
LsDwVgf.gif
Desloque-o 8 pixels para baixo e esquerda. Nesta etapa, usando o chip da maré anterior, crie duas animações. A figura direita é a parte da animação e se tudo der certo, pode parecer como água, mas vamos modificar um pouco mais aqui.​
L2Le9fl.png
Configure vários chips da segunda maré. Apenas o chip central é editado.​
FvryfEr.png
goz7G39.gif
Ajuste lentamente os pixels, aumentando os círculos menores e diminuindo os maiores, enquanto observa os chips acima, abaixo, esquerda e direita. Verifique se ainda está correto. Esta figura mostra a animação combinada com a primeira imagem.​
ngbkrHt.png

4oNmfca.gif

1-2-3

ullyACo.gif

1-2-3-2​
No terceiro quadro, copiamos o segundo quadro e executamos o mesmo processo descrito acima novamente. As três imagens resultantes foram animadas para criar a figura. É um efeito de ondulação menos perceptível e mais genérico, adequado para representar o oceano. Se estivermos criando animações para, por exemplo, lava, também podemos usar a mesma técnica. No entanto, precisamos estar conscientes de que, como são animações com um número limitado de padrões, precisamos ajustá-las para parecerem ondulantes quando estiverem concluídas. No RPG Maker 2000, podemos escolher entre os padrões de animação 1-2-3 e 1-2-3-2, mas é preciso escolher o método que fica melhor após experimentar os dois. Se for a primeira vez que estamos animando, pode ser difícil decidir a ordem da animação desde o início. Por isso, é mais fácil escolher o que parece melhor no momento.​
5FSKF1d.gif
Agora, juntamos a imagem da praia e a imagem do oceano para finalizar a composição. Se houver uma grande diferença entre as cores do oceano e da praia, podemos aplicar anti-aliasing após a composição. Se as diferenças de cor forem pequenas, talvez não seja necessário aplicar anti-aliasing.​
jwbLWce.gif
Também podemos projetar a sombra do oceano na areia e representar a transparência. Nesse caso, é necessário substituir as cores do oceano que são usadas na praia por outras cores que não são usadas. É uma boa ideia usar uma cor completamente diferente, como mostrado nessa figura. Devemos colocar as sombras da mesma maneira que o exemplo. O oceano é composto por um padrão de imagem para cada padrão de ondulação, enquanto a praia e as sombras são a mesma imagem usada em três padrões.​
p1DlFiU.png
Cada parte do oceano é movida dois ou três pixels em todas as direções.​
BUHiKfZ.png
A imagem brilhante da praia é composta com a imagem do oceano.​
KW5yaeV.png
As cores usadas para o oceano são substituídas por uma cor transparente.​
ZHf8zUs.png
A sombra da praia é colocada e a imagem é composta.​
4wAOq2X.png
Colocamos o padrão original do oceano sem rolagem por cima. Com isso, a sombra está completa.​
M9Ci1qS.gif
Sem anti-aliasing
EcXuJaR.gif
Com anti-aliasing​
A sombra nos permite entender a profundidade da imagem, além de servir como uma representação de transparência. No entanto, como a diferença de cor entre a sombra escura e a cor brilhante do oceano é grande, o anti-aliasing é necessário.​
*Da mesma maneira, é possível criar lava e outros elementos usando o mesmo método.
Depois de terminar a água rasa, agora vamos criar o limite entre a areia e a água, com as ondas que batem na praia. O padrão de animação 1-2-3 que mencionamos acima funcionou muito bem, então certifique-se de que a linha de costa também fique bonita com esse padrão. Isso pode ser um pouco complicado e para criar automaticamente, é necessário definir o número de chips e sua configuração. Certifique-se de prestar atenção a isso também.​

VAMOS TENTAR DESENHAR AS ONDAS BATENDO NA PRAIA
MaSV5I4.png


R6UdrYJ.png
Primeiro, desenhe a praia como faria com o solo. Certifique-se de que a cor seja harmoniosa com a água. Se a cor da praia não combinar com a água devido à paleta de cores, é possível alterar a cor da água para ajustar. Se você tiver um software de conversão de cor ou um software de edição de fotos como o PhotoShop, poderá ajustar a cor dessa maneira. Se você fizer manualmente, também é possível trocar as cores usando uma ferramenta de troca de cores pela paleta.​
zDYaO4M.png
Primeiro, crie um modelo de animação acima, em vez de começar a desenhar a praia imediatamente. Com este estado de uma cor, você pode expressar o movimento da linha da costa. Para o número e configuração de chips neste momento, consulte essa figura. Se for muito trabalhoso, use essa imagem diretamente.​
utdhRWG.png
Coloque a imagem que você desenhou anterior sobre a praia alinhada. A parte roxa é a parte da água, então use uma cor de praia escura para contornar como um anti-aliasing e adicione uma borda para se tornar a parte da maré do mar. Quando a borda estiver completa, pinte a parte roxa como uma cor transparente.​
38g0v5Z.png


XVwJJH1.gif
Coloque os três padrões de água em linha e sobreponha a imagem acima. Agora o padrão básico da água está completo. Verifique a animação. A parte da água é uma animação na ordem 1-2-3, então a linha de costa também deve ser assim.​
vBJuYWu.png
Reorganize a imagem finalizada em unidades de 8x8 como no exemplo. Os chips com a moldura verde serão trocados verticalmente e os chips com a moldura azul serão trocados horizontalmente. Isso fará com que se conectem perfeitamente ao criar automaticamente.

Se você colocar esses três tipos de chips conforme especificado, estará concluído. Inclua-os no conjunto de chips e verifique se a linha costeira está conectada corretamente.​

VAMOS DESENHAR A CHAMA TREMULANTE!
Quando há animações na tela, como água e chamas, o cenário do jogo fica muito mais vibrante. Além de animações como a água, as chamas que tremulam tornam o jogo ainda mais realista. Também gostaríamos de ter fumaça e outros efeitos, mas aqui, vamos nos concentrar em desenhar chamas.

Como chip de chama, há muitas aplicações, como suporte de vela, fogueira, tocha, representação de incêndio e lareira. Mapas sem elementos de animação podem parecer muito calmos, então, se você puder desenhar chamas, poderá deixar a tela muito mais chamativa. Vamos tentar desenhar chamas!​

VAMOS DESENHAR UMA FOGUEIRA
5BDcKkz.png
Primeiro, desenhe a lenha. O processo é mais ou menos o seguinte: defina a posição aproximada, desenhe as linhas principais e dê forma, em seguida, preencha.​
kSkFBGX.png
Desenhe as chamas em uma cor que se destaque sobre a lenha. Aqui, é importante prestar atenção na proporção com a lenha. Se as chamas forem extremamente grandes ou pequenas, o equilíbrio da fogueira pode ser afetado. Quando chegar ao tamanho e forma adequados, apague a área em torno das chamas com a cor transparente e pinte com a cor da chama.​
7VkNbJQ.png
OyQv8pb.gif
Mais ou menos OK​
Crie quatro padrões de movimento de chama com uma única cor. Com a imagem de chamas tremulando em mente, desenhe até que pareça estar queimando. Se usar faíscas de fogo de forma habilidosa, parecerá que está queimando. Ao considerar movimentos de baixo para cima e rotações centradas na lenha, você pode obter uma imagem de tremulação como se fosse pelo vento.

Certifique-se de que a animação não fique caótica. A chave para representar as chamas é movê-las sutilmente.​
LARLIcu.png
Componha o movimento da chama que você desenhou sobre a lenha. Agora, parece mais uma fogueira. As chamas não são opacas, mas semitransparentes, então, tente dar a impressão de que estão penetrando um pouco na lenha e desenhe mais um pouco da lenha. Isso fará com que pareça mais ou menos semitransparente.​
7CdxeP9.png
Antes de finalizar as chamas, é importante lembrar da mudança de cor devido à diferença de temperatura. Você aprendeu isso na aula de ciências. A área mais próxima da lenha é mais quente e branca, enquanto a área mais afastada da lenha esfria com o ar e fica vermelha. Isso cria um gradiente de cor.​
nnWj5j4.png


n2ii8qh.gif
Primeiro, desenhe o branco na área mais quente e o vermelho na parte mais fria e faça ajustes enquanto verifica a animação. Por fim, use as cores restantes para aplicar o anti-aliasing e a fogueira estará completa.​
Para animações, o método de desenhar em cores simples e adicionar detalhes depois que o movimento esteja perfeito torna o trabalho mais fácil. O anti-aliasing deve ser usado no acabamento. É difícil fazer correções enquanto se desenha uma animação com anti-aliasing.

A chama desta vez foi modelada a partir de uma fogueira, mas as cores e tremulações das chamas variam dependendo do tipo, como a chama de uma vela ou de uma lâmpada. É bom observar regularmente como as chamas se movem e lembrar das cores, por exemplo.​

Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2001 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 04 - EXPRESSANDO TEXTURA DE OBJETOS? V-3 ●
Vamos desenhar fichas de mapa necessárias na prática (objeto 1)
D6dUgOa.png

"Depois de preparar solo e o mar, o próximo passo é criar o material principal no conjunto de chips. Aqui, explicaremos como desenhar objetos, aplicar técnicas e criar texturas para alcançar a conclusão do conjunto de chips para construir uma cidade. Como já dominamos as técnicas de pixel arte, explicaremos apenas a criação do material principal. Certifique-se de reler a aula anterior e entender por completo."

COMECE DESENHANDO OS OBJETOS MAIORES E ESSENCIAIS
O RPG Maker tem limitações no espaço para colocar imagens disponíveis, então, mesmo que você queira desenhar objetos maiores depois, pode acabar ficando sem espaço. Para evitar isso, avalie cuidadosamente o que é essencial e comece a desenhar a partir dos objetos maiores. Se você estiver criando uma cidade, a casa é o maior objeto essencial no chip, então comece desenhando a casa.

●DICAS PARA EVITAR FALHAS●
Se você adicionar chips sem planejamento, poderá acabar sem espaço e terá dificuldades para organizar o mapa. Por isso, é importante decidir a quantidade de chips necessários e fazer um rascunho inicial. Isso reduzirá os problemas que você terá mais tarde e consequentemente economizará tempo na produção.

Consulte [aqui]¹ para ver um exemplo de rascunho. É importante criar uma silhueta e verificar se há partes faltando quando você colocar o desenho no mapa. Você pode adicionar objetos menores posteriormente, por isso não se preocupe com o espaço em branco. Tente agrupar o espaço em branco em uma área para ficar mais organizado.

uxKlMYO.png

No entanto, lembre-se de que o rascunho é apenas um rascunho e não é necessário seguir rigidamente essa posição, da quantidade no uso do chip e notas para o material que você criou. Se você achar que pode reduzir o número de chips durante a produção ou mudar as posições, sinta-se livre para fazer isso. Considere o rascunho como uma orientação.

Para criar o rascunho, você pode desenhar livremente, mas tente desenhar os objetos pequenos fazendo com que sua forma seja compreendida e a silhueta seja clara. Ao ver o desenho, preste atenção à proporção em relação aos objetos ao redor e aos personagens. É recomendável desenhar com habilidade para evitar situações em que o barril é maior que a árvore ou a entrada é menor que o personagem.

Se você não tiver espaço suficiente, como uma porta de entrada, pode criar uma porta como personagem. No entanto, se você criar uma porta como personagem, precisará de mais espaço para colocar os eventos, o que não é recomendado ao criar um jogo. Se você decidir criar uma porta como personagem, é melhor fazer algo como uma porta que não precisa de muitos eventos e também tenha animações. É recomendável criar a névoa de uma cachoeira ou de uma fonte como um objeto animado separado, em vez de desenhá-la no mapa.​

VAMOS TENTAR DESENHAR UMA CASA
Uma casa é composta por telhado, paredes, janelas, portas, chaminés e outros acessórios. As casas não têm a mesma forma, então é desejável que haja muitas combinações diferentes. Nesse caso, a parte mais difícil é o telhado. Acredito que o grau de conclusão varia muito dependendo de como você desenha o telhado.​
yIpqBhg.png
Primeiro, vamos desenhar as telhas do telhado. Você precisa criar pelo menos dois tipos de telhas: uma vista frontal e outra vista lateral. Como existem muitos tipos de telhas, consulte as informações disponíveis para decidir qual tipo usar.

Se você tiver a noção de que várias peças do mesmo formato estão unidas, elas parecerão mais reais. Você as empilha de baixo para cima. Quando você criar um material que se repete em um loop de 16x16, estará concluído.​
Em seguida, desenhe as telhas laterais junto com as telhas frontais.​

8z5fGpn.png
1. Primeiro, desenhe uma linha reta no mesmo ângulo do telhado. Se você desenhar mais linhas do que as linhas verticais das telhas frontais, criará uma sensação tridimensional, mas se for difícil, desenhe com uma largura uniforme;

tDYJaar.png
2. Corte as peças que você preparou para a vista frontal ao meio como mostrado na figura;​
M9VpCkd.png
3. Encontre a junção das telhas, como na figura 3 e desenhe uma linha vertical;​
bxVqnM3.png
4. Misture as linhas verticais que você desenhou no passo 3 com a figura que você desenhou no passo 1. Agora você criou um rascunho das telhas laterais do telhado;​
egRWzMU.png
5. Comece desenhando o contorno das telhas de acordo com o rascunho;​
dHO57u9.png
6. Desenhe as partes do contorno das telhas e dê atenção à textura para fazê-las parecerem telhas. Nesse momento, certifique-se de que a área ao redor seja transparente;​
bXo8EzF.png
7. Com base nas linhas do rascunho, coloque as telhas na fileira, sobrepondo-as em cerca de dois pixels e empilhando-as de baixo para cima. Comece colocando as telhas desenhadas no passo 6 do lado esquerdo e continue colocando-as alternadamente em um loop. Quando isso estiver concluído, o telhado estará completo;

8. Em termos de cor do telhado, leve em consideração o ângulo da luz. Se a fonte de luz estiver do lado esquerdo, o lado esquerdo do telhado deve ser claro e o lado direito escuro. Desafie-se a criar um senso de tridimensionalidade com essa diferença de brilho.​

gnuoBkT.png
Vamos finalizar as telhas da frente. Adicione calhas e pequenos itens que conectam o topo do telhado. Se a cor do telhado for uniforme, a imagem pode ficar monótona. Então, vamos criar um degrade mudando gradualmente as cores, com a parte de cima mais clara e a parte de baixo mais escura. Isso dará profundidade ao telhado da frente.​

fVNYglj.gif
Coloque as telhas do telhado conforme desenhamos acima e recorte-as para formar a forma básica do telhado.​

GQMvbRY.png
Vamos adicionar calhas e pequenos itens que conectam o topo do telhado para dar mais realismo. Acredito que é fácil de criar, fazendo um item de cada vez e conectando-os, assim como com as telhas.​

SsPS5JN.png
São pequenos ajustes. Vamos mudar a perspectiva, aumentando ou diminuindo e corrigindo áreas que pareçam estranhas. Nesta imagem, há áreas com cores claras que chamam atenção, então eu mudei a cor dessas áreas para uma mais escura. É um trabalho minucioso.​

l5mELF6.png
Ao combinar com o telhado frontal, pode-se montar desta maneira. No entanto, se considerarmos a construção tridimensional real, este formato é imprópria. Isto ocorre quando o telhado frontal não possui ângulo, ou seja, é vertical como um muro. A mesma inclinação que temos com o telhado lateral também deve ser aplicada ao telhado frontal e isso dará mais realismo.​

6jyX85q.png

Não parece mais natural assim?​
Se dobrarmos o ângulo básico do telhado, teremos certamente este tipo de forma.​

oomHff1.png

É essa a imagem que temos em mente.​
Vamos tentar fazer o design das paredes da casa sem incluir cores transparentes, preferencialmente colocando-as como a camada inferior de chips. A razão para isso é que as janelas e portas são colocadas na parte superior da parede usando uma camada superior de chips.​
ciKXO0G.png
Quando desenhamos para a camada inferior, é difícil expressar as saliências do telhado, então uma maneira de disfarçar é colocar um piso de pedras ou algo abaixo.
Se você imaginar que a parte superior da parede é clara e a inferior é escura, dará uma sensação de profundidade. Embora seja mais realista, às vezes não é recomendado em gráficos de estilo popular porque pode escurecer demais a imagem.​
Para o design da parede, sinta-se livre para decidir com base em materiais de referência.
Quando é necessário um sutil gradiente e textura, como uma parede, é a hora de usar um padrão/pattern de azulejo/tiles. Além das cores da mesma tonalidade, ao focar apenas na luminosidade e usar cores diferentes, também é possível criar variações. Ao espalhar os pixels de forma aleatória em vez de alinhá-los de forma ordenada, eles parecerão mais realistas. Você pode baixar a imagem acima e ampliá-la usando uma ferramenta gráfica para entender melhor como os pixels são espalhados.​
*Se você preparar dois tipos de pedras para o mesmo local (uma para a parede e outra para o chão), pode criar uma variação alterando sutilmente a cor das pedras.


Vamos desenhar objetos pequenos necessários em uma casa.​
● EXEMPLO DE COMO DESENHAR JANELAS ●
9e0N1W6.png
1. Primeiro, decida a posição e o tamanho. Ao tirar o contorno diretamente com uma cor que se destaca na imagem da parede, não haverá erros. Não é apenas um quadrado, você também pode fazer uma janela com uma forma diferente. Consulte as referências e tente encontrar a forma que se adapta à parede;​
CPYr3UU.png
Xm9fdH5.png
2. Pinte tudo exceto o contorno da janela com uma cor transparente. Ao fazê-lo como uma camada superior que inclui uma cor transparente, também pode ser usado como uma janela do segundo andar, o que ajuda a reduzir o número de chips;​
iLAAqop.png
3. Tire o contorno do quadro da janela facilmente. Decida aqui também qual cor quer para o quadro. Se a parede for de cor clara, marrom ou preto ficam bom e se a parede for complexa, como tijolos ou a cor for escura, um quadro branco também ficará bonito. Experimente várias opções;​
hzYrQjI.png
4. Adicione profundidade ao quadro da janela. Nesse momento, ao usar a regra de que cores escuras parecem mais distantes, é fácil criar uma sensação tridimensional. Além disso, se você colocar um destaque/brilho, tendo em mente que a luz vem de cima, também deve ser capaz de expressar bem a forma;​
k92nBCg.png
5. Pinte a parte do vidro da janela de forma escura. Em termos de cor, escolha uma cor que combine com a imagem, como verde escuro, azul escuro ou marrom escuro;​
rg7VgNw.png
6. Desenhe o vidro. O vidro é liso e brilhante, portanto, tenha cuidado para não criar irregularidades e mantenha a nitidez de borda a borda. Se houver contraste, será mais nítido, portanto, você deverá ser capaz de dar mais expressividade ao vidro;​
oKYI2Dq.png
7. Termine o quadro da janela. Aqui também, se você se concentrar em tornar a parte superior clara e a parte inferior escura, criará uma sensação tridimensional. Como estamos usando uma moldura de madeira aqui, fornecerei uma amostra de paleta de cores para referência. Com isso, a janela está concluída.

*Coloque-o em cima da parede e verifique. Se a posição estiver errada, faça as correções necessárias. Será bom usar a mesma janela para o primeiro e segundo andares, mas se não for possível, crie uma versão com posição diferente para o primeiro e segundo andares.
7qFbvVa.png
Faça também portas da mesma maneira. Quando desenhar a porta, comece desenhando a entrada sem a porta e depois adicione a porta sobre ela. Isso resultará em uma aparência natural. Se quiser animar a porta no jogo, faça a parte da porta como um personagem.​

9VTC9aN.png

Quando montado, fica assim.
Se você preparar uma chaminé, flores na janela, etc; ficará ainda mais vivo, então decore o máximo que o espaço permitir.
Se o telhado e as paredes tiverem cores frias e sem graça, pequenos objetos em tons brilhantes e chamativos podem tornar a imagem mais colorida.

CqTG1s1.png

Prepare uma chaminé para a frente e uma para os lados.

Zj8GuEl.png

Tente também diversas maneiras de decorar as molduras das janelas.
Se houver espaço, também é eficaz aumentar a variedade de tipos de portas.

VAMOS DESENHAR PLANTAS
Ao desenhar pequenos objetos, incluindo plantas, o truque é primeiro desenhar o contorno e em seguida, preencher com os detalhes. Não é fácil desenhar tudo desde o início. Você pode usar a silhueta desenhada no esboço inicial.​


Aqui teremos com galhos secos e folhas densas.
Explicaremos os passos para criar ambas as versões.​

xLtPBBM.png
1. Primeiro, desenhe o contorno da árvore. Nesse momento, é importante ter em mente a proporção entre a árvore e o personagem. Também é importante prestar atenção ao tamanho. Tente desenhar de forma fluída, buscando um padrão natural de galhos. É preciso ter cuidado para não criar um padrão monótono na tela quando os galhos são dispostos lado a lado, especialmente se estiverem muito inclinados ou tiverem formas peculiares. O ideal é que haja uma distorção natural moderada e que os galhos estejam bem integrados como as peças;​

svIS5Q1.png
2. Desenhe as linhas de contorno. Nesse momento, é importante prestar atenção em quais galhos estão mais próximos ou mais distantes do tronco. É importante não desfazer as curvas e o equilíbrio natural que já foram criados;​

WcCPRJD.png
3. Adicione as sombras. Desenhe as linhas de contorno das ramificações menores com uma cor de sombra para criar uma sensação tridimensional e destacar a finura dos galhos. É importante não desordenar a relação de profundidade dos galhos e também seguir a direção da luz;​

QcMcbps.png
4. Não se esqueça de adicionar os destaques/brilhos após ter adicionado as sombras. Isso tornará a forma mais tridimensional. Além disso, ajudará a reduzir o efeito de anti-aliasing, o que significa que os pixels dos galhos não serão tão visíveis e artificiais;​

gJ3jdCE.png
5. Ao trabalhar em detalhes, certifique-se de que as sombras, os destaques/brilhos e as linhas de contorno se misturem. Se você não esquecer de desenhar a partir de um ângulo um pouco mais alto, o desenho ficará mais natural;​



6M2iXfx.png
1. Use um verde claro para desenhar os aglomerados de folhas que estão à frente dos galhos e do tronco. Desenhe-os como nuvens densas também, mas como um aglomerado. É uma boa ideia esconder a ponta dos galhos com as folhas. As folhas não devem cobrir completamente o tronco, mas sim revelar parcialmente algumas partes dele, criando uma sensação tridimensional. O objetivo é dar a impressão de profundidade, criando uma impressão de que as folhas da frente, as folhas mais distantes e o tronco estão todos separados em diferentes níveis;​

vphFRXg.png
2. Depois de desenhar o contorno das folhas, desenhe uma linha que contorne as bordas. É recomendável usar uma cor ligeiramente diferente para contornar as folhas da frente e as de trás para criar profundidade;​

yYr7k6h.png
3. Como o desenho pode parecer plano se deixado assim, adicione sombras para cada aglomerado de folhas. Quanto mais textura a folhagem tiver, melhor será o resultado;​

Us1fhje.png
4. Faça ajustes nos detalhes e adicione cores para finalizar. Se você aplicar muito anti-aliasing, a sensação de realismo pode ser prejudicada, portanto, é melhor que os pixels tenham uma aparência um pouco áspera;​

sgE1fOq.png
5. Desenhe as folhas na árvore morta desenhada anteriormente. Primeiro, desenhe as folhas do lado de trás dos galhos e do tronco. Desenhe-os como pequenas nuvens densas para que fiquem naturalmente estilizadas. Não seja ambicioso no começo e desenhe-os levemente;​
Basicamente, para criar uma sensação mais fácil de tridimensionalidade, comece desenhando as partes que ficarão ocultas e depois coloque as partes visíveis por cima.


nJqiR3t.png

Quando desenhar flores, comece traçando o contorno das folhas, faça o contorno, adicione sombras e luzes, depois desenhe o contorno da flor e finalize com sombreamento.

24UGrUv.png

O mesmo procedimento básico se aplica ao desenho de tocos de árvores. Ao traçar o contorno, é importante separar a área do corte da área não cortada e obter um equilíbrio de formas.


Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2001 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 05 - EXPRESSANDO TEXTURA DE OBJETOS? V-4 ●
Vamos desenhar fichas de mapa necessárias na prática (objeto 2)
D6dUgOa.png

"Ainda são necessários muitos objetos para completar o mapa. Como o básico é o mesmo, vamos aplicar mais e mais, criar os materiais necessários."

VAMOS TENTAR DESENHAR OBJETOS PEQUENOS
Existem vários tipos de objetos pequenos, mas é bom escolher aqueles que mostram um pouco do nosso estilo de vida. O processo não é diferente do desenho de plantas, mas para objetos artificiais, é importante ter uma disposição cuidadosa dos pixels para destacar a diferença de aparência em relação a plantas e outros objetos naturais.
Para os objetos necessários na cidade que exigem um certo número de chips, há cercas. Comece desenhando primeiro os que têm mais chips.​
MKcCh0g.png
1. Primeiro, desenhe uma placa. No caso de cercas, as placas semelhantes se alinham em sequência, então é mais fácil terminar uma placa, depois copiar e colar;​
IyhSSdF.png
2. Desenhe prestando atenção na textura áspera da madeira e nas linhas retas resultantes do processamento feito pelas mãos humanas;​
Z8IrHzD.png
3. Copie e coloque em sequência. Pode-se alterar ligeiramente a altura;​
E5AuEM8.png
4. Embora a forma seja a mesma para objetos artificiais, como se tratam de objetos naturais, como madeira, pode parecer artificial se o mesmo objeto for alinhado. Portanto, altere ligeiramente a disposição dos pixels e faça uma arranjo;​
HDcbTEF.png
5. Copie três chips por vez, conforme a figura;​
Nha1yob.png
6. Desenhe placas horizontais de uma única cor. Somente no caso em que há uma frente e um verso, desenhe como na figura. Pode ser desenhado em linha reta, mas ter uma ligeira inclinação pode deixar a tela menos monótona;​
dTt2itN.png
7. Desenhe com atenção à textura da madeira. Ao mudar um pouco a cor entre placas verticais e horizontais, pode-se expressar sutilmente a diferença entre elas. Também é recomendado dar linhas verticais às placas verticais e linhas horizontais às placas horizontais, para enfatizar as diferenças na direção dos pixels;​
eIcAlAP.png
8. Imagine a placa vista de lado enquanto olha para a placa de frente;​
T6AhvmR.png
9. Desloque ligeiramente as placas desenhadas no item 8 e copie e cole para posicioná-las. Faça o chip do meio como loop (parte rosa). Consulte a figura para saber quantas placas devem ser colocadas e como posicioná-las;​
TCIypXc.png
10. Coloque as placas horizontais sobre as cercas de cima. Se você criar isso em unidades de 1 chip de 16 x 16, não precisará se preocupar em ficar fora de posição;​
rsfkDHu.png
11. Com as cercas de baixo adicionadas, a forma básica está completa;​
!VAMOS SUPRIR AS PEÇAS QUE FALTAM!
h1RxTi5.png

Com o chip atual, não podemos montar além disso.

JKjgss9.png
Vamos suprir as peças que faltam. Para montar uma cerca em uma forma livre, é necessário um chip que conecte os cantos. Então, organize os cantos como na figura e torne as partes que faltam mais fáceis de comunicar. Desenhe enquanto olha para que ele se torne uma forma que possa ser montada nessa condição.​

nsqFpKA.png

Ao suprir as peças feitas acima, ficará assim.​
!ADICIONE PEQUENOS OBJETOS!
OznzcZ2.png
Para pequenos objetos como placas, é mais fácil criar uma placa simples e colocar por cima ícones representando o seu conteúdo. Se você seguir as regras de RPG, a criação dos ícones deve ser fácil (por exemplo, uma espada representa uma loja de armas e uma garrafa de bebida representa um bar). É melhor representar as coisas de forma clara e direta, para criar chips de uso fácil. Além disso, ao ser usado no jogo, é desejável que o design permita que o usuário compreenda o conteúdo.​

3jGRO5h.png


Para os cartazes, desenhe primeiro a parte que deve ser a base, como a coluna. Dessa forma, mesmo se o design for diferente, você pode economizar tempo desenhando em cima da base. Desenhe a silhueta das tábuas na coluna e dê-lhe uma textura. Experimente várias combinações de cores para criar uma superfície irregular.

Vamos desenhar não apenas objetos em bases quadradas, mas também objetos circulares.
Quando há mudanças na forma dos objetos, a tela fica com uma impressão mais elaborada.
Seja um pilar ou uma parede, a base para desenhar objetos circulares não muda.
Aqui, vamos explicar como desenhar um poço.​

N4sPlAm.png
1. Desenhe duas elipses de cores diferentes. Para equilibrar a aparência, é melhor fazer as elipses com ângulos aproximados e alinhá-las com os ângulos de outros edifícios para que pareçam naturais;​
AjtWWVT.png
2. Combine as duas elipses que você desenhou anteriormente. Para economizar espaço, você pode usar apenas 2 frames verticais e horizontais para criar um poço e empilhar as elipses dentro dele;​
CBhyTyC.png
3. Quando você empilhar as elipses, poderá notar que há uma borda transparente entre elas. Preencha essa área com uma cor sólida para que não haja transparência;​
19v0Cd4.png
4. Desenhe uma elipse menor com o mesmo ângulo no topo. Certifique-se de que a largura do espaço cinza claro restante seja quase igual em toda sua volta;​
GEV74Kr.png
5. Desenhe linhas verticais para criar uma aparência curva ao espaçar as linhas cada vez mais próximas na borda externa;​
4CJx8YU.png
6. Copie a parte inferior da imagem e desenhe um esboço seguindo a curva inferior da elipse. Apague as linhas extras e deixe apenas a linha que você traçou;​
SgB53VH.png
7. Adicione a linha que você traçou no passo 6 à imagem com as linhas verticais. Alinhe a linha da frente primeiro e depois a linha interior. Use a linha invertida para a linha interior;​
TDr5zGi.png
8. Apague as linhas extras e mude a cor para cinza. O esboço está concluído;​
O8uKb0X.png
9. Repita o processo de desenho pulando uma linha entre cada camada;​
SY1DBtL.png
10. Desenhe a linha que você pulou anteriormente, alinhando-a com as linhas do esboço original, deixando apenas as linhas horizontais do esboço original;​
lfRd7d1.png
11. Apague o cinza do esboço original e preencha com a nova cor cinza que você desenhou no passo 10. Agora parece que você empilhou blocos;​
e99Phei.png
12. Copie a imagem do passo 11 e desenhe linhas radiantes a partir do centro. Desenhe a linha em direção à posição da linha vertical na lateral. Apague as linhas extras e coloque a nova imagem sobre a original. Desenhe a linha vertical interna cruzando a linha radiante;​
wfEh1Iy.png
13. Adicione sombras e destaques/brilhos para cada bloco individual. É importante prestar atenção à forma de cada bloco;​
vWsPOVz.png
14. Adicione textura a cada bloco como se você estivesse colocando cada um individualmente. O desenho está completo.​

VAMOS TENTAR DESENHAR DEGRAUS
Dentro dos elementos em loop, há algo que pode ser um pouco difícil de entender em termos de processo de criação. Os "degraus". Você quer criar algo em que a disposição dos chips nas direções esquerda, direita, cima e baixo se conecte de forma natural, desde pequenos degraus até grandes penhascos.

Ao criá-los para geração automática, eles acabam ficando quadrados e pouco naturais, então aqui vamos nos esforçar para criar formas mais realistas. Uma coisa a se observar é preparar dois tipos de penhascos: um em que o personagem possa subir e outro em que ele possa contornar por outro lado. Se o design for exatamente o mesmo, pode se tornar confuso quando implementado no jogo, então criar diferenças no design se torna a chave para os gráficos do jogo.

Para expressar os degraus, é importante ter em mente que os penhascos devem ser verticais em relação ao terreno. Cada forma individual das rochas deve ser considerada.

VAMOS TENTAR DESENHAR UM PENHASCO!
dN7ytQ2.png

Primeiro, criamos a base do penhasco da mesma maneira que desenhamos o solo em loop. A diferença é que devemos imaginar vários rochedos, como na figura da direita, se combinam. Vamos organizá-los e desenhar enquanto verificamos.​
FzBiPeB.png

Copiamos o campo e a base do penhasco e os colocamos como na figura à esquerda. Em seguida, esculpimos cuidadosamente a forma das rochas na parte superior e inferior do penhasco (figura central). Mudamos a parte azul claro para uma cor transparente, colocamos sobre o campo e mantemos juntos (figura da direita).​
oDnwcNf.png

Desenhamos a parte superior com a imagem de uma pedra cortada horizontalmente. Essa parte ficará virada para cima e será mais clara do que as outras partes do penhasco. Na parte inferior, redesenhamos as rochas maiores e cobrimos um pouco a grama, mudando ligeiramente a base e a imagem do penhasco central. Quando organizadas, as imagens parecerão naturais.​
m0LinuW.png

Em seguida, criamos os cantos. Colocamos os chips acabados na parte superior um ao lado do outro. Mas a imagem do canto ainda parece artificial e não natural.​
NFrHw61.png

Então, aqui está uma dica. Primeiro, decidimos o ângulo e a forma do canto do penhasco. Desenhamos um círculo e pegamos 1/4 dele, desenhando uma curva como esta.​
iaxmA98.png

Primeiro, colocamos três chips e reduzimos a tamanho de dois chips. Em seguida, reduzimos o lado esquerdo em um chip pela metade, aproximamos a largura do lado direito em 8 pixels e tornamos do tamanho de um chip. Quando aumentamos a redução dessa maneira à medida que nos aproximamos do canto, podemos dar a sensação de profundidade.​

sZ2LEBv.png
Primeiro, colocamos três chips e reduzimos a tamanho de dois chips. Em seguida, reduzimos o lado esquerdo em um chip pela metade, aproximamos a largura do lado direito em 8 pixels e tornamos do tamanho de um chip. Quando aumentamos a taxa de redução dessa maneira à medida que nos aproximamos do canto, podemos dar profundidade.​
1. Desenhe uma linha horizontal um pouco afastada como na figura;
2. Coloque o chip frontal ao lado e verifique se há algum deslocamento. O esboço do círculo inferior deve ficar acima do central, levantando tudo em 1 pixel. A linha vermelha à direita é a posição original;
3. Olhando para o círculo inferior, ele está novamente elevado em um pixel. Selecione a mesma posição que está elevada em um pixel com a seleção e levante em um pixel;
4. Repita isso para que a linha branca que você desenhou pela primeira vez seja semelhante à forma do círculo inferior;
5. Continue movendo;
6. Se você repetir o mesmo processo até o final, poderá criar um canto de penhasco com uma curva como esta;
7. Se você não tiver espaço suficiente no gramado, pode usar o deslocamento de pixel em vez de mover. Não há problema em combiná-lo novamente com o gramado mais tarde.​

dq9UZcH.png
Vamos dar atenção especial à parte superior do penhasco, que costuma ser bastante irregular e trabalhar cuidadosamente para nivelá-la. Faça o mesmo trabalho no lado direito, repintando-o um pouco mais escuro e então a face do penhasco estará completa. Você também pode iluminar o lado esquerdo, se desejar.

Se você quer reduzir o número de chips, exiba uma grade de 16x16 e ajuste a altura deslocando-a, tomando cuidado para não editar a linha central.​

clUxsb7.png
Para a versão com cobertura de grama, crie-a adicionando a grama ao penhasco já finalizado.

Com essa técnica de desenho, você pode facilmente desenhar não só penhascos, mas também torres circulares, por exemplo. No entanto, como os pixels podem ficar ásperos, a impressão geral pode parecer um pouco confusa, por isso é melhor limitar o uso a elementos naturais.​

VAMOS AUMENTAR OS PEQUENOS OBJETOS QUE PODEM SER USADOS EM PENHASCOS
Quando a forma do penhasco estiver concluída, adicione itens que melhore ele. Embora os penhascos sejam monótonos na cidade, quando combinadas em uma ampla área, tendem a criar imagens monótonas e entediantes devido à mesma disposição de chips. Portanto, se você adicionar alguns pequenos itens, haverá mudanças e se tornará mais natural.​

VAMOS TENTAR DESENHAR A ENTRADA DA CAVERNA
fWRSK5w.png
1. Copie o penhasco. Lembre-se de pensar em unidades de chips para que o personagem possa entrar na caverna;
2. Determine o tamanho do buraco e preencha com preto para obter uma forma natural;
3. Se deixado como o passo 2, parecerá estranho, pois não há profundidade e parece foi colado um papel. Adicione profundidade de forma que ele escureça à medida que vai para o fundo, misturando-se com o preto pintado. Além disso, como o chão não é plano, faça a disposição dos pixels com a sensação de saliências e irregularidades;
4. Depois de adicionar a imagem de profundidade, use anti-aliasing para ajustar. Se o fundo tiver grama, se você concentrar nas linhas verticais da grama, poderá criar a imagem de que há uma invasão da grama para dentro da caverna.​

VAMOS FAZER NASCER GRAMA
tYrmVW1.png
Quando você imagina que a grama cresce no penhasco, você se lembra de que a grama cresce nas lacunas entre as rochas. Ao desenhar conscientemente essa maneira natural de crescimento, ela se torna uma grama natural.

Independentemente da forma da grama e de como ela cresce, se você imaginar que ela cresce nas lacunas das rochas, será mais fácil de desenhar.

No entanto, se for uma planta rastejante, como trepadeira, não importa se não tiver folhas nas lacunas das rochas, mas a base deve estar entre as rochas ou no chão para parecer natural.​

VAMOS DESENHAR UM PENHASCO DESMORONADO
5uZ7Pkv.png

As mudanças na superfície também são importantes. Aqui, vamos desenhar um penhasco que desmoronou um pouco. Mesmo que ele tenha desmoronado muito ou pouco, a maneira geral de desenhar é a mesma, apenas a área de desenho é diferente.

Primeiro, forme as partes que desmoronaram com uma cor escura e em seguida, crie a forma geral da terra e dos detritos desmoronados com uma cor clara.

Diferente da entrada da caverna, se não houver um buraco continuando no fundo, você deve redesenhar o penhasco com uma cor mais escura para que as rochas no fundo dos detritos desmoronados sejam visíveis.

Os detritos desmoronados devem ter uma imagem esfarelada, então forme as bordas enquanto consciente do desmoronamento. Talvez jogar pequenos pixels de cor da terra também seja natural.

Com a constatação da parte que desmoronou, ajuste a forma de cada rocha com uma cor clara para completar. Se você imaginar desenhar cada rocha separadamente, será mais fácil de desenhar.​

6b8LWpV.png

Com a mesma ideia e técnica, também é possível desenhar pedras e buracos separadamente.

UM ITEM PEQUENO COM UTILIDADE GENÉRICA PARA QUALQUER LUGAR
Quero objetos que tenham uma sensação de vida, tanto dentro quanto fora de casa. Alguns exemplos incluem jarros, barris e caixas empilhadas, bem como outros acessórios e lenha empilhada. Como a maioria desses objetos pode ser desenhada seguindo os métodos apresentados na aula anterior, apresentarei exemplos de métodos simples que você pode usar e aplicar em sua própria criação.​

VAMOS DESENHAR UM JARRO
PobJQjs.png
Comece desenhando a boca do jarro. Depois de definir o tamanho da boca, será mais fácil imaginar o tamanho e a forma geral do jarro.

Desenhe metade da forma do jarro e se for simétrico, copie e inverta.

Adicione sombras grossas, mas não se esqueça de se concentrar na forma arredondada do jarro. Sombras são usadas para criar uma sensação tridimensional, portanto, certifique-se de que elas sejam aplicadas de forma a tornar o objeto tridimensional. É uma boa ideia verificar o desenho em várias escalas.

Quando o contorno e as sombras estiverem prontos, é hora de preencher o interior do jarro. Pinte as bordas com uma cor mais escura nas áreas sombreadas e uma cor mais clara nas áreas iluminadas.

Se você usar mais de uma cor nas sombras, o objeto parecerá mais profundo. Se alguma área estiver faltando sombra, use dithering. Para jarros brilhantes como os de ouro ou prata, lembre-se de não usar essa técnica.

Adicione os destaques/brilhos e as sombras mais escuras para finalizar. Esta parte parece mais tridimensional com maiores contrastes.

Mesmo que haja uma alça ou uma tampa, o método de desenho é basicamente o mesmo. O truque para desenhar em estilo pixel arte é começar com silhuetas e em seguida, detalhar os elementos menores.​

VAMOS DESENHAR UM BARRIL!
aE3J6xw.png
O método é semelhante ao de um jarro. A diferença é que a parte superior e a inferior do barril têm a mesma forma, então use uma elipse para criar a forma.

Use a elipse como guia para desenhar o barril, adicionando sombras e linhas verticais para as tábuas. Adicione o anel de ferro e continue adicionando textura. Já que a proporção do barril é um pouco estranha se for desenhado com apenas um pixel, pode ser melhor aumentar um pouco o tamanho. Se você desenhar em um tamanho maior, pode ser uma boa ideia desenhar o anel de ferro central com a ferramenta de elipse.​

VAMOS DESENHAR LENHA EMPILHADA
tMljt1B.png
Primeiramente, decida o tamanho de um único pedaço de lenha. Assim como com pequenos objetos, preste atenção aos detalhes da textura e desenhe-os.

Imagine a situação real em que a lenha está empilhada e copie e empilhe-a de acordo com a maneira como ela é empilhada. Repita a cópia e colagem até que a forma desejada seja alcançada.

Adicione as sombras entre as lenhas adjacentes e ajuste-as para completar.

Com objetos repetidos de forma semelhante, como este, é mais fácil criá-los copiando e empilhando com a forma original já concluída, mesmo em pixels. As folhas caídas também podem ser criadas da mesma forma.​

TENTE MONTAR UM MAPA NA PRÁTICA
Quando você tiver reunido um número razoável de recursos, importe-os para o RPG Maker e faça um teste real de montagem do mapa. Verifique cuidadosamente se não faltam recursos necessários, se não há desalinhamentos e se não faltam pequenos objetos importantes. Dependendo da forma de montar o mapa, pode ser necessário configurar as mesmas imagens de chip de maneiras diferentes, como ter pisos que podem ser caminhados e pisos que não podem. Nesses casos, é necessário ter duas cópias da mesma imagem, então verifique também esses detalhes.

A edição do conjunto de chips varia significativamente dependendo se você valoriza a facilidade de montagem ou a quantidade. Se você prioriza a facilidade de montagem, mesmo que tenha várias cópias do mesmo chip alinhadas, deve deixá-las como estão. Se você deseja compactar a quantidade, evite o máximo possível ter chips idênticos.

Se você planeja compartilhar os recursos criados (como distribuir o mapa para outra pessoa montá-lo ou compartilhar como recursos), acredito que seja melhor priorizar a facilidade de montagem.

QUANDO ESTIVER PRONTO...
Quando você puder montar o mapa planejado, o conjunto de chips estará completo. Você pode usá-lo em seu próprio jogo ou distribuí-lo como um recurso online.

Se você se preocupa com espaços vazios, pode adicionar objetos pequenos. Tente adicionar elementos que tornem a tela mais viva e que transmitam a sensação de um mundo em movimento.​
Download dos materiais finalizados neste curso: Preview Download(40KB)
3gzrxuG.png

*Pode ser usado com RPG Maker 2000. Os dados da porta serão apresentados na próxima aula de animação.

Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2002 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 06 - FUNDAMENTOS DE ANIMAÇÃO 2 ●
Conhecimento básico de animação
D6dUgOa.png

"Bem, agora que você se acostumou a desenhar mapas e tem um bom domínio da expressão de texturas, talvez esteja na hora de tentar coisas novas, como criar um jogo de luta, dar uma performance aos personagens de um RPG, entre outras coisas. Mesmo em trabalhos de pixel arte, criar imagens animadas é comum. No entanto, essa é uma das tarefas mais difíceis e é por isso que o pixel arte é considerado uma habilidade técnica."

DESENVOLVENDO O SENSO DE MOVIMENTO
Mesmo que seja difícil explicar isso em palavras ou imagens, vamos dar uma breve explicação sobre o "senso de movimento" aqui.

Agora, pegue o lápis que está em suas mãos e role-o. Observe cuidadosamente o movimento. Você notou algo? Sim, a velocidade do objeto não é constante. Você pode perceber que, embora o movimento comece rápido, a "força de movimento" é consumida pelo atrito com a mesa, a resistência do ar, a gravidade, entre outras coisas e a velocidade diminui gradualmente. Em vez de entender isso teoricamente, é importante sentir isso intuitivamente para criar animações.

Ao desenhar, não fazemos cálculos como "se o peso da substância for ● kg e a velocidade for △ km/s, a influência da gravidade será...". É importante ter uma ideia de "se a substância se mover a essa velocidade, a perda de velocidade será em torno disso".

Agora, pegue um lenço ou outro tecido e segure a borda, agitando-o de um lado para o outro. Você percebeu que a parte inferior está se movendo mais lentamente do que a parte que você está segurando? Isso ocorre devido à resistência do ar e à gravidade. Em vez de calcular o tempo de atraso, é importante ter uma ideia da percepção no geral.

Um objeto parado sempre tende a permanecer parado e um corpo em movimento tende a manter o movimento. Isso é chamado de "inércia" e você pode ter aprendido sobre isso em suas aulas de ciências. Esse tipo de expressão é frequentemente usado em animações no exterior. Alguns podem achar estranho que personagens de anime no exterior se movam de forma pegajosa e elástica, mas isso é uma técnica para enfatizar a inércia e criar movimentos suaves e naturais. Essa técnica de expressão é chamada de "follow-through" e é essencial para criar efeitos como o movimento do cabelo quando você se vira. Na verdade, a inércia do movimento varia significativamente dependendo do material e da velocidade do objeto em movimento. Isso faz com que o início do movimento seja arrastado pelo ponto de apoio em movimento, o que adiciona profundidade e expressividade ao movimento.

Como mencionado acima, ter uma "imagem (sensação)" do movimento é essencial para criar animações. Isso faz uma grande diferença no resultado final, especialmente para personagens em jogos de luta, onde é importante criar a sensação de peso. Portanto, é importante adquirir o hábito de "imaginar" o movimento.​

COMECE DOMINANDO MOVIMENTOS SIMPLES
Criar uma animação que se mova intensamente de repente é, sem dúvida, uma tarefa difícil. Comece praticando animações que parecem estar se movendo com um pequeno número de quadros, de 2 a 3 frames.​

ANIMAÇÃO DE PALETA
CoNTxBH.gif
Existe um método de animação em que a imagem em si não é editada, mas apenas a paleta (cores) é alternada. Em máquinas reais (como computadores ou Playstation), pode-se escrever um script ou programar a especificação da alternância, mas há casos em que a imagem é mantida com uma paleta de cores diferente. Neste caso, a criação é feita usando esta última opção [dados originais]¹. Mesmo apenas mudando as cores, torna-se uma bela animação quando exibida em sequência. Primeiro, vamos conhecê-lo como uma das técnicas.​
zdJiGcx.png

ANIMAÇÃO DE DESENHO INTERMEDIÁRIO
UHjSPAT.gif
Primeiro, prepare uma imagem e copie-a. Em seguida, desenhe uma linha no meio vertical e apague a linha original para criar duas imagens diferentes. Isso é feito para parecer que está girando, juntamente com os efeitos da animação de paleta mencionados anteriormente [dados originais]².​
Y1ZqVnH.gif

ANIMAÇÃO DE ABERTURA
Uma das coisas que geralmente se deseja animar com mapas de jogos são as portas. Se você deseja desenhar quatro padrões, a imagem original deve ser tanto a porta fechada quanto a porta aberta, com duas imagens intermediárias para a abertura (consulte "Fundamentos de Animação 1" do segundo ano para informações sobre imagens originais e animações). Da mesma forma, para o baú do tesouro, é necessário utilizar duas imagens intermediárias, uma para o estado fechado e outra para o estado aberto (ambos para a animação de quatro direções, como no RPG Maker).​

ABRINDO A PORTA
CoGkgZv.png

(Figura 1)​
Ao criar uma animação de abertura de porta, primeiro preste atenção ao tamanho da porta. Desenhe duas imagens básicas que servirão como base, com o tamanho suficiente para que o personagem caiba. Quando se trata de desenhar algo que se abre, como uma porta, será necessário preparar as imagens do estado fechado e aberto. Essas imagens serão os quadros-chave e estarão sempre visíveis para o usuário, por isso é recomendável colori-las com cuidado, assim como desenhar um chip de mapa.

Para a imagem da porta aberta, preste atenção ao sombreamento que enfatiza a profundidade. Neste caso, a imagem é criada escura porque o interior da sala é visível. Portanto, é recomendável colorir com cuidado e manter a cor próxima do preto.​

GcAspfA.png

(Figura 2)​
Depois de criar as duas imagens básicas, é necessário produzir mais duas imagens intermediárias (indicadas pelos retângulos vermelhos na figura). Remova a moldura da porta para deixar apenas a porta e prepare os dados. Também é possível preparar separadamente a parte das dobradiças que não se movem durante a animação.​

x6qP2Re.png
jicHWnV.png

(Figura 3)​
Se você começa com um ângulo complexo como "ligeiramente acima da frente", pessoas que não têm consciência da forma tridimensional podem ficar confusas. Portanto, primeiro pense no movimento da porta, olhando-a de cima. A linha vermelha é a porta e a amarela são as dobradiças. Esses dois padrões são a parte azul na figura 2.

A porta se move em um movimento circular centrado nas dobradiças amarelas, como na imagem à direita. A parte em turquesa é a linha de ação da porta (consulte o "Fundamentos da animação 1" para saber mais sobre a linha de ação).​

nTNbNlw.png

(Figura 4)​
Desenhe a parte verde claro ao longo dessa linha de ação para complementar as duas imagens básicas. Se fossem 3 padrões de animação, seria desenhado na posição intermediária entre as duas imagens básicas, mas desta vez são 4 padrões de animação, então será desenhado nas posições que dividem o ângulo em três partes iguais. Quando não é necessário diferenciar a velocidade do movimento, é possível desenhar numericamente dessa maneira.​

WFXBin9.gif

(Figura 5)​
Este é o movimento da porta visto de cima. Agora, com esta imagem em mente, vamos começar a produzir a porta real.​

lo7wigl.png

(Figura 6)​
Mesmo quando a porta está de frente, a maneira de pensar é a mesma. A partir das duas imagens básicas, imagine o movimento circular centrado nas dobradiças e derive a linha de ação. A linha azul à direita é a linha de ação para esta porta.​

w54Md9G.png

(Figura 7)​
Desenhe a posição intermediária para complementar, assim como na imagem vista de cima. A linha amarela é a linha principal e o vermelho escuro é a imagem básica.​

lxBHlO4.gif
1XQZgQM.png

(Figura 8)​
Este é o movimento da porta. Ao colorir, se você desenhar pegando a linha de ação de cada parte, poderá desenhar sem erros ou desalinhamentos. Se o lado da sala estiver escuro, escurecer a coloração do lado de trás ajudará a expressar bem a profundidade.

Depois de desenhar a própria porta, há partes que ficam invisíveis atrás da moldura ou da parede da casa, então, finalmente, empilhe as peças da moldura de cima para baixo e estará pronto. É recomendado sombrear a parede depois de empilhar as moldura, para que não dê trabalho.

As portas que se abrem para trás, em direção ao fundo, são relativamente simples, pois você pode desenhá-las sem se preocupar muito com a espessura da porta. Para as portas que são puxadas para a frente, você também precisa prestar atenção à espessura da porta, então é mais fácil desenhar portas que empurram no começo. Quando usado em um jogo, portas que são puxadas para a frente não são usadas com muita frequência, pois elas podem se sobrepor aos personagens.​

A linha de ação pode parecer complicada à primeira vista, mas na verdade é apenas desenhar uma linha que conecta os desenhos principais, então não é tão difícil. Como todas as coisas têm uma linha de ação, se você desenhar os desenhos principais corretamente, poderá fazer o movimento desejado.

Com a prática, você pode imaginar a linha de ação em sua mente e desenhá-la, então pode ser divertido experimentar mover coisas diferentes.

Para cada parte, é necessário pensar na linha de ação, então, no caso de movimentos complexos como os de um ser humano, surgirão linhas de ação separadas para a cabeça, braços e cintura. É melhor começar praticando coisas com poucas linhas de ação, como portas e baús de tesouro.​

SENSIBILIDADE AO MOVIMENTO
Na criação de animações, é exigida a capacidade de imaginar a sensibilidade de como expressá-las. Em animações de pixel arte, que não podem buscar o máximo de realismo como se fossem gravadas em vídeo (isso também vale para a animação na TV), é necessário valorizar os momentos marcantes. Geralmente, esses momentos são as partes de "parada" do movimento, que até agora correspondem às partes principais do desenho.

Ao criar animações longas, é necessário ter sensibilidade para decidir quais partes serão as "paradas", quais serão os movimentos e quantas imagens de transição serão necessárias. Animações que têm procedimentos e formas de desenho, como as portas mencionadas anteriormente, são geralmente aprendidas por muitas pessoas, mas a tarefa de imaginar movimentos complexos e na verdade desenhá-los é algo que nem todo mundo pode fazer.

Para aprimorar essa sensibilidade necessária, a melhor coisa a fazer é estar sempre ciente das coisas "em movimento", mas, no caso de movimentos de personagens, é recomendável tentar fazer as ações que você deseja que o personagem faça. Qualquer coisa em movimento requer força e desenhar a parte onde essa força é aplicada é a base do desenho de movimento. Ao realizar a ação real que você deseja que o personagem faça, você pode entender onde aplicar a força e qual posição corporal é necessária.​

PONTOS DO MOVIMENTO
q2Dfuqj.gif
A imagem acima mostra um salto, mas mesmo que a pose esteja correta, parece que a personagem está flutuando (sendo puxada para cima). Mesmo aumentando o número de padrões e tornando a parte do tempo de voo mais suave, nunca parecerá que ela esteja pulando por conta própria, porque não há nenhuma parte nos frames em que haja tensão (para gerar a força necessária).

No início do movimento, há sempre uma parte onde a força é aplicada e um momento em que a força é gerada. Se não desenhar esse momento, o propósito do salto não será atendido, assim como nessa imagem.​
7P0RgQ6.gif


JS4y8E4.png
A imagem acima apresenta a arte original com a figura em posição normal, curvada (agachada) e em salto. Você sente como se estivesse saltando com sua própria força?
(Para saltos pequenos como este, dobrar levemente os joelhos é suficiente para parecer natural, mas aqui estamos dobrando-os mais para facilitar a compreensão)

Em qualquer movimento, sempre há uma parte onde a força é aplicada quando o movimento muda. É como se exigisse habilidade encontrar essa parte em particular. Como exercício, pode ser bom estar consciente disso no dia a dia, como fica a parte do corpo em que se acumula a força para lançar uma bola, por exemplo. Para isso, é útil imitar esse movimento por conta própria.​
bxFExfj.gif

CQBAhIl.png
Usaremos a arte original que destaca os aspectos-chave do movimento de ficar em pé, curvar-se, pular e aterrissar e adicionaremos frames complementares.​
nqzmjMu.gif
Vamos incorporar o conceito de follow-through. Cabelos são adequadas para expressar inércia.​
dnaX1BW.png
Esta é a condição normal. Os cabelos fluem para baixo, retos devido à influência da gravidade. Essa condição continua enquanto não há movimento.​
iHFox4h.png
O corpo se curva para a frente e a posição da cabeça se move, mas as pontas dos cabelos ainda tentam permanecer em sua posição original, sem serem muito afetadas pelo movimento. No entanto, as partes amarradas são puxadas para a cabeça, deixando apenas os fios para trás.​
AIF8Dwz.png
Quando o corpo se curva completamente para a frente, os cabelos caem para baixo devido à gravidade. Como está inclinado para frente, o cabelo cobre as costas.​
oTLKTUp.png
Início do salto. Movendo-se rapidamente para cima. Como a distância percorrida é longa, os cabelos já estão sendo arrastados.​
moR4afU.png
Equilíbrio entre a força para cima e a gravidade. Inercialmente, o corpo está completamente parado, mas na verdade, os cabelos ainda têm alguma força para cima retardando nessa fase.​
BR32AKe.png
Os cabelos mantêm a força para cima, então esta fase se torna um estado de parada. Mas como o corpo começa a cair, eles se tornam soltos por causa do ar.​
qWjDJ6T.png
Os cabelos começam a cair da parte amarrada, arrastados pelo corpo que está caindo. No entanto, como as pontas ainda não têm a velocidade de queda e estão levemente espalhadas para o lado, a resistência do ar aumenta, fazendo com que fiquem para trás.​
Jci4bco.png
Os cabelos caíram antes de estarem completamente sob a influência da gravidade, pois o corpo tocou o chão. Portanto, os cabelos nunca voltarão ao estado normal e reto, que é afetado pela gravidade, antes do corpo.​
67CcpxK.png
Mesmo depois que o corpo toca o chão, as pontas têm a força para baixo sendo puxadas pelo corpo, então elas rapidamente voltam à posição original.​
Na imagem acima, apenas a técnica de follow-through é aplicada aos cabelos amarrados, mas se você quiser mais detalhado, pode aplicá-la também às franjas, peito e roupas.

Se você aplicar follow-through excessivamente desde o início, pode ser difícil corrigir se cometer um erro na animação. Além disso, pode ocorrer o "deslocamento do personagem" (quando o personagem parece diferente dependendo do quadro ou direção). É melhor adicionar um pouco de follow-through de cada vez.​

wor5qE3.gif

IT72PYd.png
Quanto mais longo o tempo de suspensão no ar, mais padrões podem ser completados, mas no caso do salto, não é uma questão de pegar distâncias iguais no ar. Acho que aprendemos isso na ciência, mas quando jogamos uma bola para cima, a força na direção para cima é forte no começo e se move rapidamente. Ou seja, a distância percorrida é maior no mesmo intervalo de 0,1 segundo. No entanto, esse ímpeto é gradualmente enfraquecido pela gravidade. Quando a força para cima e a gravidade se tornam iguais, a bola para no ar. Depois disso, a força para cima perde para a gravidade e a bola cai na direção oposta. A força na direção para cima é completamente consumida e o movimento é acelerado puxado apenas pela gravidade. Ao mover na direção para cima, como no salto, é necessário prestar atenção especial a esse movimento. Vamos tentar entender isso com o nosso senso comum.​
mxI9fo1.gif

Concluído

VAMOS APRENDER A IMAGINAR O MOVIMENTO
Ao desenhar na prática, não é necessário pensar em coisas complicadas. O foco é desenhar de forma que pareça estar em movimento, por meio de testes de animação. No entanto, é essencial imaginar o movimento, o que é mais importante do que a técnica de pixel arte.

Comece imaginando movimentos simples que possa experimentar por si mesmo, como andar, correr, sentar e voar. Somente depois de dominar esses movimentos é que você pode imaginar movimentos imaginários que não pode fazer por si só.

Lembre-se de que personagens em forma humana, em especial, são difíceis no início, portanto, comece com formas mais simples, como bolas e vá evoluindo passo a passo.​


Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2002 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 07 - ANIMAÇÃO DE EFEITOS ●
Efeitos como explosões que parecem ser impossíveis de desenhar, mas não são
D6dUgOa.png

"Ao criar jogos, além do personagem e do mapa, pode ser necessário criar 'efeitos especiais', como lasers e explosões em jogos de tiro, fumaça e raios em jogos de RPG, efeitos para expressar emoções, entre outros.

Esses são chamados de "efeitos". Geralmente, efeito se refere a alguma forma de processamento dos dados originais (como mosaico ou mudança de cor), mas em jogos, é comum se referir a todos os "efeitos especiais" como efeitos em geral. Nesta ocasião, gostaria de apresentar alguns métodos de desenho de efeitos comumente usados.
"

VÁRIOS TIPOS DE EFEITOS
Efeito é algo que "dá um efeito". Em outras palavras, é algo especial que não existe normalmente. É usado para criar uma atmosfera suspeita na tela ou como uma expressão quando algo desaparece. Visualmente, é feito de forma vistosa e chamativa.

A razão pela qual é feito de forma chamativa é porque, se o que foi criado não tiver nenhum efeito na tela, não fará sentido como efeito. Portanto, é feito de forma chamativa, mas com uma gama de usos, dependendo do que se quer criar, a maneira de desenhar e a parte "essencial" que se deve expressar também serão diferentes. Gostaria de continuar a aula apresentando o que criar como efeito e como expressá-lo.​

EXPRESSÃO DE VELOCIDADE - EFEITO DE "OBAKE"
Como uma expressão de movimento utilizada também em animes de televisão, há algo chamado "Obake". Geralmente, ao ouvir a palavra "Obake", pode-se imaginar algo como um fantasma, mas neste caso, refere-se à chamada "imagem fantasma".

A imagem fantasma é algo que parece permanecer por um instante mesmo que não esteja realmente lá e a sensação de que o fundo está sendo transmitido pode parecer como um fantasma. Acredito que o nome tenha vindo desses elementos. Quando algo em movimento é filmado com uma câmera, pode-se obter uma sensação de movimento tremido e dinamismo. Isso é utilizado como uma técnica para expressar isso. Especialmente para expressar algo com velocidade, é uma técnica frequentemente utilizada. Ao dar uma sensação de velocidade, é possível omitir movimentos complexos que precisam ser desenhados, matando dois coelhos com uma cajadada. Por isso, gostaria que vocês dominassem essa técnica.​

BALANÇANDO UMA ESPADA
QVDWr72.gif
Pode-se preparar uma infinidade de imagens se você quiser desenhar cuidadosamente o movimento de balançar uma espada. No entanto, para ser honesto, o período de produção e a capacidade máxima de sprites que podem ser armazenados na memória (Nota 1) são determinados. Portanto, é necessário desenhar apenas cerca de 2 a 4 frames. Como uma quantidade de trabalho para a produção real, em jogos como RPGs e jogos de estratégia em que há muitos personagens, é necessário manter o trabalho nesse nível para poder concluir o desenvolvimento dentro do prazo. Mesmo que você desenhe 100 frames suaves e excelentes, é impossível passar vários meses apenas para esse movimento. Mantenha isso em mente. No caso de consoles de jogos domésticos, como o PlayStation, há momentos em que não se pode caber tudo na capacidade de sprites. Será mais prático estudar desenhando com menos frames, mas com movimentos mais dinâmicos.

"Obake" é um bom efeito para reduzir esse tipo de padrão. Mesmo que haja poucos padrões, é possível dar uma sensação de movimento e até mesmo uma sensação de velocidade, então é bom estar familiarizado com isso.

Nota 1: Armazenar na memória... mesmo em softwares como "Tsukuru", em que os gráficos exibidos durante o jogo são temporariamente armazenados na memória do sistema e lidos conforme necessário (embora haja casos em que isso não ocorre). Isso é chamado de armazenamento na memória. Como há um limite para o que pode ser armazenado na memória, é necessário consolidar os gráficos de maneira eficiente.

txszIF9.png

Vamos repetir o padrão de movimentos consecutivamente
Desenhe a linha de ação da ponta da espada e corte de acordo com a posição de cada ponta da espada
Ao fazer isso, a parte básica será facilmente concluída
Pode não ser imediatamente claro onde colocar o efeito "Obake" no movimento de balançar a espada. Para usar o "Obake" de forma mais eficaz, em vez de desenhar o rastro completo do movimento, a dica é colocá-lo na parte mais brilhante e com o alcance de movimento mais longo.

No caso da espada, a ponta da espada se move mais do que a parte do braço que é o centro do arco. Em outras palavras, o local para colocar o efeito "Obake" no movimento de balançar a espada é a ponta da espada.

Colocar o "Obake" na parte mais brilhante é eficaz porque mesmo no mundo real, a imagem persiste na mente de quem observa quando há uma imagem residual brilhante. Imagine balançar uma lanterna em uma sala escura. Embora a imagem residual da mão segurando a lanterna não seja visível, a imagem residual da luz permanecerá em sua mente. É útil incorporar esse efeito tanto quanto possível.

Basicamente, se desenhar a linha como se fosse tirar uma linha de ação, a posição pode ser facilmente identificada.​

W4nh6XQ.gif

"Obake" colocados na ponta da espada devem estar próximos da a lâmina.
Altere a cor da espada e coloque "Obake" na parte mais distante da lâmina.
Escureça (ou torne transparente) para criar um efeito de rastro.
g9QipUy.png

7MggJt5.gif

Embora seja uma questão de preferência, reduzir o número de frames e adicionar um efeito de meia-lua é suficiente.
Nesse caso, a velocidade e a nitidez da espada são enfatizadas.
Para jogos de luta ou ação, esse tipo de técnica é recomendado, pois torna mais fácil detectar o ponto de impacto.

wDlDvHk.png

Para jogos de luta ou ação, é recomendado este tipo de colisão.
Isso ocorre porque a detecção de colisão é mais fácil de ser realizada.
Para os "Obake" em geral, é comum pintá-los com a cor original ou simplesmente em branco. Como exceção, quando é necessário mostrar, por exemplo, a ação de balançar uma "espada de fogo", é possível mudar a cor do "Obake" para uma que lembre o fogo, assim pode-se transmitir a imagem da espada de fogo apenas com a mudança de cor. Esta é uma técnica importante para representar características especiais, então pense em onde e como utilizá-la.​


Provavelmente você já viu em mangás e animes cenas em que os personagens correm com "muitos pés redondos". Isso também é um efeito de "Obake". Na realidade, não há realmente muitos pés, mas é uma representação do estado em que os pés são vistos como rastros.

A desvantagem do processamento de "Obake" é que, ao ser simplificado, acaba por ter uma imagem cômica. Como resultado, é frequentemente inadequado para expressões sérias, já que acaba se tornando algo cômico.

No entanto, no caso da "Obake" em áreas claras, ela não prejudica a imagem séria, por isso acredito que adicionar isso como uma parte da expressão da luz é bastante eficaz.​

EFEITO DE MANGÁ
"Manpu" é o termo usado para os efeitos usados para expressar a emoção dos personagens em mangás, muitas vezes representados por símbolos. Os símbolos são sinais que todos podem reconhecer simplesmente olhando para a forma, como "Ah, isso deve ser suor", especialmente em mangás, é chamado de "manpu".

Uma expressão comum é quando alguém tem uma ideia repentina e uma lâmpada acima de sua cabeça acende. Na verdade, não há realmente uma lâmpada acesa sobre a cabeça, mas as pessoas conseguem sentir "Ei, tive uma ideia!" só de olhar para isso. Isso pode ser considerado um efeito usado no Japão, onde a cultura do mangá está difundida.

Isso também representa um estado diferente do normal, então acredito que possa ser reconhecido como um efeito em termos de classificação.
bXHuJet.png
É difícil explicar em palavras qual é a situação, mas esta é a cena em que "a Heroína-chan está entregando uma marmita caseira, com onigiri queimado, para o Herói-kun que ela ama muito". O ato de ficar corado em si também é um tipo de expressão em mangás. Isso dá aos leitores a impressão de que a pessoa está envergonhada, já que "ficar corado = estar envergonhado".

Além disso, o coração diretamente desenhado é um sinal de simpatia e o grande suor expressa confusão. As linhas pretas enrugadas são uma representação de carvão queimado.

Em vez de adicionar ações aos personagens, é uma técnica de produção essencial para permitir um "desempenho" mais simples e direto. Gostaria de explicar em detalhes sobre os vários manpu no capítulo posterior "Animação de atuação para personagens pequenos".​

Penso que é aceitável tratar as expressões do mangá e as ações simbolizadas como manpu em geral. No entanto, como manpu são expressões deformadas simplificadas, elas dão uma impressão cômica. É melhor não usá-las com frequência em locais muito sérios. Se escolher o lugar certo para usá-las, a técnica de produção pode ser efetiva.​

EFEITO DE TELA
Embora seja raro reproduzi-los em pixel arte, os efeitos de tela alteram os pixels, então explicarei brevemente. Para quem tem experiência em usar o RPG Maker, eles são bem familiares, pois incluem efeitos como alterar a tonalidade da tela, escurecer ou clarear, ampliar ou reduzir, efeitos de flash ou tremer a tela durante o jogo.

Esses efeitos que afetam toda a tela são geralmente programados e não feitos com imagens. Efeitos de chuva ou neve que afetam toda a tela também são considerados efeitos de tela. O movimento é controlado pelo programa, mas é comum desenhar gotas de chuva ou flocos de neve em pixel arte.​

KLkimMm.png
lEJiTcM.png
GQpF6Kw.png


EFEITO DE EXPLOSÃO
Ver uma cena real de explosão é algo que não é possível a menos que ocorra uma situação extrema, mas é um efeito que estamos acostumados a ver em filmes e na televisão. Como é frequentemente utilizado, é importante aprender a aplicá-lo de forma eficaz e ser capaz de desenhá-lo de diversas maneiras.​

PADRÃO COMUM DE EXPLOSÃO
NDabm06.gif
A base da explosão está em representar o estado de dispersão do centro para fora. Além disso, se for possível representar a diferença de temperatura entre o centro e os limites da explosão, é possível criar um padrão de explosão mais realista e preciso.

Em explosões no ar, é importante ter consciência da expansão circular. Há uma relação estreita entre a expansão para fora da explosão e a diferença de temperatura e a parte central comprimida emite um brilho branco próximo do branco e à medida que se move para fora, a temperatura diminui e muda para amarelo, laranja, vermelho, marrom e preto. O mesmo fenômeno ocorre na representação da chama normal, portanto, é bom lembrar.

À medida que a explosão avança, a chama se divide e se espalha. Algo que acompanha um "brilho" como a chama é fácil de desenhar com um fundo próximo ao preto, mas quando exibido na tela, se o fundo for claro, é melhor desenhar com base no brilho desse fundo para que se adapte bem quando usado.​

NC7LsPH.png

Quando prepara uma paleta de cores de acordo com o número de frames.

Rdo7gF8.gif

Quando muda para a cor monocromática.
A dica é desenhar primeiro em uma cor sólida (como branco) e desenhar a dispersão real da chama. Nesta etapa, é importante desenhar até que pareça que a animação está explodindo e fazer um teste de animação.

É fácil definir quais cores preparar para a paleta de acordo com o número de frames. Somente pode ser correspondido quando a paleta pode ser usada livremente, mas quando houver seis frames, pense em usar seis cores... como uma opção inicial. Assim como em outras animações, é melhor evitar usar muitas cores para reduzir a carga de trabalho.

À medida que a explosão avança no final do frame, ela se torna mais fria, portanto, é considerada uma graduação que se torna aos poucos mais escura. Ao usar a paleta diretamente no padrão como a cor básica, como na figura acima e aplicar anti-aliasing às partes brilhantes no restante, é possível agrupá-las de maneira segura.

Se mudar para monocromático, pode ser usado como uma representação de fumaça. Na realidade, o movimento da fumaça e o da chama são diferentes, mas há casos em que pode ser reutilizado dessa maneira. Quando é necessário um "inchaço das bordas para o centro", independentemente do número de pixels, a maneira de desenhar e pensar é basicamente a mesma.​

UM PADRÃO SIMPLES DE EXPLOSÃO
VeB5eIU.gif

VyB1jD7.png

A imagem acima é a combinação desses três frames.
O método mencionado anteriormente pode ser difícil de dominar e geralmente exige muitos frames. Nos jogos, muitas vezes são desenhados vários círculos de explosões grandes, médios e pequenos, combinados para representar uma explosão.

Em jogos de tiro, quando as máquinas explodem, esse método pode criar uma imagem de explosão em cadeia e melhorar a expressão. É importante ser capaz de expressar isso também. Este método pode ser usado para preparar uma versão final sobreposta de imagens e para exibi-las em sobreposição no programa.​

As cores usadas na explosão são basicamente as mesmas do fogo. Você pode reutilizar a paleta de fogo para criar a explosão. Dependendo do número de frames e da paleta, você deve ser flexível e se adaptar, mas se você entender os dois métodos acima, não deve enfrentar muitos problemas.​

BRILHO E CINTILAÇÃO
Como efeitos frequentemente usados, podemos citar o "brilho" ou a sensação de "cintilação". O "brilho" transmite uma sensação rápida e intensa de faíscas, enquanto a "cintilação" dá a impressão de estar constantemente brilhando. Ambos podem ser desenhados da mesma forma, com a diferença de que um é cíclico e o outro não.

Para criar esses efeitos de luz de "brilho", é importante ter cuidado em dar nitidez (afiar) aos desenhos, assim você pode terminar sem erros. Se ficar com uma sensação turva, o brilho também ficará opaco. Preste atenção nisso.​

BRILHO
HcSgbzU.gif

Estrela brilhando no céu noturno 1.

UvvlplR.gif

Estrela brilhando no céu noturno 2.

z1QedEj.gif

Estrela brilhando no céu noturno 3.
Como expressão de brilho e luz, é mais fácil de entender quando desenhado em um fundo escuro. No entanto, isso não significa que deva ser composto apenas por cores claras, já que isso pode dificultar a sobreposição em cima de tesouros de ouro e prata, por exemplo. No entanto, se as estrelas estão brilhando no céu noturno, é necessário ajustá-las para que se encaixem bem em um fundo preto.

O fluxo do desenho é semelhante ao de uma explosão, desenhando até que brilhe em uma cor única e em seguida, finalizando. A base para desenhar o brilho, como no exemplo "1", é girando como se estivesse desaparecendo, criando uma representação desse tipo. Com o tipo "2", também é possível representar o brilho através de zoom in e out. Como no exemplo "3", girando uma forma um pouco maior ou menor também pode criar diferentes formas de brilho. Essencialmente, é possível criar representações usando esses três métodos.

Ao incorporar várias imagens como esta e terminar em um loop, ela parecerá cintilante.
WZBithp.png

As cores podem ser escolhidas de acordo com a preferência pessoal.​

A base é a radiação de raios de luz a partir do centro, com os raios de luz tornando-se mais finos em direção às bordas. Para torná-los mais finos, consulte a seção anti-aliasing do curso para iniciantes do primeiro ano.​

COMBINANDO EFEITOS
Quando se usa efeitos, nem sempre é apenas um. Dependendo da situação, pode ser necessário combinar vários efeitos. Isso é comumente usado em jogos de luta. Se houver muitos efeitos sobrepostos, o impacto do efeito desejado pode ficar diluído, então é recomendável limitar o número de efeitos aplicados simultaneamente a cerca de três tipos.​


Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2002 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 08 - CRIANDO PERSONAGENS EM MINIATURA CONFORME DESIGN●
Você consegue desenhar o que é solicitado?
D6dUgOa.png

"Mesmo com desenhos em pixel arte, enquanto estiver fazendo individualmente, você pode criar personagens livremente de acordo com a sua sensibilidade. Não precisa desenhar o que não quer e se não conseguir desenhar algo, não precisa se preocupar... Mas se ficar fazendo apenas essa produção independente por muito tempo, eventualmente perceberá que não está desenvolvendo uma habilidade importante, que é desenhar a partir do design de outras pessoas. Quando se trata de trabalhar ou criar jogos em equipe, mesmo que tenha elementos que não gosta, precisa desenhá-los e respeitar o design original. Então, nesta ocasião, falaremos sobre a produção com base em um design existente."

VAMOS DAR UMA OLHADA NO DESIGN PREPARADO
Normalmente, em jogos com um design bem definido, há desenhos de personagens e outros designs, como cenários. O desenho do personagem descreve as roupas, cores, personalidade e tamanho corporal e em alguns casos, são fornecidos desenhos em três dimensões (frente, trás e lado). Quanto mais detalhado for o desenho, mais habilidade será necessária para reproduzi-lo em pixel arte.

No entanto, o design é desenhado em um grande papel A4 ou B4. Enquanto o desenho do personagem em pixel arte deve ser desenhado em uma área de 32x32 pixels ou 16x16 pixels. Por isso, é necessário primeiro encontrar os elementos principais e inesquecíveis do personagem que impressionam no desenho, que pode variar de acordo com o tamanho do personagem. É recomendável começar com uma compreensão geral desses elementos principais e em seguida, adicionando os elementos secundários.​

IDENTIFICANDO AS PARTES IMPORTANTES DO DESENHO
Como mencionado anteriormente, em pixel arte é difícil incluir todos os elementos, portanto, para reproduzir fielmente o design, é necessário encontrar as partes importantes que devem ser desenhadas primeiro.

Por exemplo, é fácil entender a importância das cores. As cores do cabelo e das roupas são essenciais para destacar a personalidade do personagem, portanto, é necessário seguir essas cores.

Em seguida, estão os acessórios e características físicas. Se um "ornamento de cabelo dourado" for importante na história, é necessário que esteja visível. Grandes características físicas, como uma cicatriz no rosto, também podem ser pontos importantes.

Finalmente, a roupa é importante. Reúna as informações sobre o tipo de saia, calça, sapato, penteado e acessórios que podem ser reproduzidos. Se possível, copie o design original e faça anotações dos elementos importantes, para que possa ser consultado facilmente.​
*DESIGN ORIGINAL BÁSICO*
CyuGgGg.png
Neste desenho, a frente e o verso estão representados. Se não houver outras informações disponíveis, todas as decisões devem ser tomadas com base neste desenho. Às vezes, o ilustrador adiciona explicações adicionais, portanto, essas informações também devem ser levadas em consideração.

Geralmente, as partes que não possuem explicação detalhada contêm as mesmas informações (design) tanto para o lado visível quanto para o lado invisível. Somente faça perguntas ao designer quando tiver dúvidas. É importante entender as características, como a distribuição das cores, o padrão da roupa e o penteado.​
*IDENTIFICAÇÃO DE PARTES SIMÉTRICAS À ESQUERDA E DIREITA*
Wo6OejV.png
O primeiro passo é procurar partes simétricas à esquerda e direita. As partes simétricas à esquerda e direita não mudam quando são invertidas, ou seja, se você criar uma animação caminhando com a perna direita para a frente e a perna esquerda para trás, poderá criar outra animação invertendo a esquerda e a direita.

Encontrar partes simétricas à esquerda e direita é importante para simplificar o trabalho. Você também pode procurar primeiro as partes não simétricas.​
*IDENTIFICAÇÃO DE OUTRAS PARTES DA ANIMAÇÃO*
JPpnivl.png
Outro ponto importante são as "outras partes da animação". Ao criar a ação de "andar", há o "personagem principal que executa a ação de andar", mas pode ter outras partes que precisam ser animadas separadamente. Por exemplo, uma capa ou cabelos longos. Como os movimentos dos braços e das pernas são diferentes, eles precisam ser desenhados separadamente. Isso tornará o trabalho posterior mais fácil de ajustar.

Um exemplo um pouco incomum é a animação lateral, onde o braço fica sobre o corpo. Nesse caso, o braço também se torna uma parte da animação separada.​



*Ao criar uma imagem em pixel arte para um personagem específico, é necessário decidir até onde expressar com clareza, com base no tamanho especificado do personagem. No caso deste exemplo, os recursos inalienáveis do personagem são cabelos compridos, uma espada e roupas, em ordem de prioridade. O padrão da roupa provavelmente será considerado na redução. A quantidade da redução dependerá do tamanho do personagem, portanto, tome cuidado.​

VAMOS CRIAR UM PERSONAGEM EM PIXEL ARTE

*FLUXO BÁSICO DE CRIAÇÃO DE PIXEL ARTE*

qKfzPsx.png

Desenhe personagens pequenos como os objetos seguindo procedimentos semelhantes.​
1. Trace o contorno e determine o tamanho geral;
2. Divida as partes do corpo em cores correspondentes;
3. Ajuste o contorno de cada parte e adicione sombras.​
bUwbSUd.png

Tamanho: 48 × 64 pixels.
As tiras do decote estão completamente omitidas.
Destaque a parte da braçadeira.
(Para que não fique igual ao padrão da roupa).​
aWc5T0f.png

Tamanho: 24x32 pixels.
Sem laços no decote.
Sem fenda na cintura.
Sem ênfase nas faixas dos braços.​
Primeiro, crie a vista frontal com base na ilustração. Nesta etapa, verifique as proporções, o design e você pode desenhar partes assimétricas ou de outras animações juntamente com a vista frontal. No entanto, essas partes terão que ser apagadas mais tarde, então comece desenhando apenas as partes simétricas da esquerda e direita, salve a imagem com um nome diferente para mantê-la. Preste atenção também na simetria do franja.​
Tamanho: 48x64 pixels
X6FLurh.png


Tamanho: 24x32 pixels
j1QpE1l.png

*Como procedimento básico de desenho, o tamanho não importa.

Bmt7tjs.png
Rg9JWvf.png
Em seguida, crie a parte de trás. Faça isso da mesma forma que a parte da frente. Este personagem de exemplo tem outra parte de animação na parte de trás, então tenha cuidado.​

K9UUFSH.png

3A2PMIL.png
7xoerZM.png
Prepare os gráficos por parte, como mostrado aqui.

Para desenhos na horizontal, considere os braços como partes separadas. Primeiro, desenhe a versão sem braços e salve os dados separadamente antes de adicionar os braços. Certifique-se de desenhar o cabelo e a espada também como partes separadas e em seguida, combine tudo no final.​

zhd5srO.png
Para criar uma imagem na horizontal, será menos propenso a erros se você usar os dados da parte frontal como base. Também é uma boa ideia verificar a posição desenhando linhas. É conveniente salvar os dados do processo durante a criação da parte frontal para fazer esse tipo de trabalho.​
gu0yYWW.png
Mxxo6zq.png
Inverta os dados acima para criar a direção oposta. Se você tiver salvo previamente os dados sem as partes assimétricas esquerda e direita, desenhar o lado oposto também será fácil.​


Esses procedimentos são eficazes também para a confirmação do design. Portanto, embora os pontos omitidos variam dependendo do tamanho do personagem em pixel arte, a maneira geral de desenhar é a mesma, então você pode aplicar isso em um tamanho maior ou menor. Não há diferença na técnica de desenho devido ao tamanho a partir deste ponto, portanto, explicaremos apenas com imagens maiores abaixo.

DICAS RÁPIDAS
Para facilitar a alteração de cores após a conclusão da pixel arte, é importante criar paletas independentes para cada parte, como cabelos e pele e estar consciente disso. Isso torna a alteração de cores mais fácil. Se você não tem espaço na paleta, pode ser impossível fazer isso, mas tente se desafiar depois de se acostumar.

[Imagem de referência]
ime8g0j.png
SqHJW3M.png

Primeiro, copie e coloque a frente normalmente.​
Primeiro, conclua a frente. Faça a imagem com uma composição apenas das partes simétricas à esquerda e à direita.​

c3WxY5x.png

Configure as mãos e os pés desenhados com cores escuras para que pareçam estar mais atrás.​
Imagine o movimento do corpo ao andar. Como os braços se movem? Como as pernas se movem? Se você conseguir imaginar, desenhá-los será fácil.

Uma coisa a se notar aqui é que quando você está em pé com as pernas juntas, sua altura é um pouco mais alta do que quando está com as pernas abertas. Se você medir a altura com um compasso fechado e uma régua e depois medir com o compasso aberto em um grau maior, a altura será mais baixa. Isso também se aplica ao movimento humano ao caminhar, então não se esqueça de adicionar "movimento para cima e para baixo" ao seu desenho. Caso contrário, o personagem será apenas um personagem com mãos e pés batendo, sem sensação de peso.

No entanto, se a imagem for vista de um ângulo inclinado de cima para baixo ou de um ângulo apertado, o movimento para cima e para baixo pode não ser necessário. No entanto, mesmo nesse caso, é necessário expressar a mudança de peso do corpo, como o movimento para a frente e para trás.​

Termine com verificação de animação várias vezes. Veja a explicação detalhada abaixo ▼¹
sLZRtWt.gif

Adicione um padrão em que a parte esquerda e direita do personagem, exceto a cabeça, seja invertida e isso deve estar completo por enquanto.
UM MÉTODO SIMPLES PARA TRANSFORMAR UM FRAME FRONTAL NORMAL EM UM FRAME DE CAMINHADA
Nem tudo se aplica, mas você pode criar uma animação de caminhada seguindo os seguintes métodos. No entanto, o ajuste é necessário, então experimente métodos simples enquanto pesquisa individualmente.​
■PRIMEIRO, PREPARE O PADRÃO FRONTAL■
D5FdQeE.gif
Por enquanto, copie a imagem frontal. Coloque ao lado para facilitar a verificação da animação e tornar o trabalho mais fácil. Modifique apenas um deles.​

■REDUZA A ALTURA■
VVvFvSZ.gif
A razão também está escrita na aula principal, mas ao abrir as pernas, a altura diminui, então comece abaixando-a. A quantidade a ser reduzida depende do tamanho do personagem, mas acho que um personagem pequeno precisa de cerca de 1 pixel e um personagem grande precisa de cerca de 2 pixels. Reduzir significa remover um pixel na linha, mas para evitar falhas, é melhor remover a parte inferior do corpo, em vez da parte superior. Para personagens maiores, pode ser bom equilibrar um pixel na parte superior e um ponto na parte inferior. A linha laranja é a altura e a linha roxa é a parte removida.​
■MOVA A PERNA DIREITA PARA FRENTE■
xcflNMj.gif
Selecione a área em torno da linha roxa e mova 2 pixels para a direita (1 pixel para personagens pequenos). No entanto, se você apenas mover a perna, não parecerá que ela está estendida para frente, portanto, ajuste conscientemente a linha do meia e a linha do sapato que ficarão curvas para cima devido ao efeito da espessura da perna.​
■MOVA A PERNA ESQUERDA PARA TRÁS■
GqPmxC8.gif
Selecione aproximadamente a área roxa e mova-a 2 pixels para a esquerda. Certifique-se de que a perna direita que você acabou de desenhar não esteja escondida. Depois de mover, levante-o cerca de 2 pixels e veja como fica.​

■SOMBREAR COM ATENÇÃO PARA A TORÇÃO DA CINTURA■
556UKiq.gif
Faça ajustes detalhados aqui. Teste a animação e preste atenção ao movimento das pernas.​

■ADICIONE A TORÇÃO DO TRONCO■
ZBLOklX.gif
No caso de personagens femininos, pode não ser desenhado para restringir o movimento, mas o tronco é torcido de acordo com o movimento do braço. Quando o braço direito é puxado para trás e o braço esquerdo é estendido para a frente, o corpo gira ligeiramente na direção do braço direito. Deslize a parte cercada pela linha roxa na direção do braço direito. Haverá uma lacuna transparente, mas deixe-a assim, porque o braço esquerdo se sobrepõe mais tarde.

■OBSERVAÇÃO■
Por que reduzir o movimento dos personagens femininos? Isso ocorre porque os homens caminham com os ombros e portanto, têm uma grande torção no torso, enquanto as mulheres caminham mais com os quadris e na verdade, têm menos movimento no torso. Como essa quantidade de movimento é menor do que 1 pixel no computador, eles evitam adicionar a torção no torso. Especialmente com pixel arte, é difícil mostrar a diferença de gênero apenas com o tamanho, então eles reduzem o movimento para mostrar a diferença. É um pequeno detalhe, mas importante para lembrar.

■MOVENDO O BRAÇO DIREITO PARA TRÁS■
mlTtCxF.gif
Apague o braço direito e faça um rascunho da posição quando o braço estiver puxado para trás. Verifique a animação e se estiver correta, desenhe novamente com cuidado.​

■MOVENDO O BRAÇO ESQUERDO PARA FRENTE■
KRimTQo.gif
Da mesma forma, apague o braço esquerdo e desenhe a nova posição. Limpe e finalize. Ajuste a posição do cinto enquanto verifica a animação algumas vezes.​
yweF0G8.gif

QvBvmLQ.png
Quando a parte simétrica esquerda e direita estiver concluída, preencha a parte assimétrica a seguir. Para o "movimento da espada" deste exemplo, desenhe-o separadamente e sobreponha-o na imagem concluída. Para o "cabelo", desenhe diretamente na imagem enquanto verifica a animação. Se você fizer o movimento simétrico esquerda e direita, pode parecer um personagem com movimentos repetitivos, então tente fazer um movimento um pouco diferente.


sWeQtaX.gif
Faça também a criação na direção oposta seguindo os mesmos passos. Se você se concentrar em tornar os pés do personagem que está andando um pouco visíveis, haverá uma diferença em relação à vista frontal.


Comece pela direção mais fácil de desenhar, seja esquerda ou direita. Comece desenhando sem os braços. Um ponto a ser observado ao desenhar de lado é que quando uma pessoa caminha, ela move seu centro de gravidade para frente. Portanto, ao desenhar, tente conscientemente criar uma sensação de ter caído um pouco para frente para poder expressar melhor a sensação de peso e movimento. Não se esqueça também do movimento vertical.​
g80JWpg.png

Preste atenção também na torção do corpo.​
Em seguida, adicione outras partes da animação, como os braços. Nesta fase, faça uma cópia da imagem e crie uma versão invertida. Comece adicionando as partes assimétricas do lado esquerdo e direito desta direção.​
ntTTvTo.png

Faça checagens frequentes na animação. Neste estágio, faça uma cópia para a direção oposta.
UsvsHhV.gif
Como o cabelo, a espada e o corpo se sobrepõem de forma complexa, pense no movimento por partes. Em alguns casos, pode ser bom fazer várias cópias e combiná-las parte por parte.​



BKYgaql.gif
Adicione as partes assimétricas do lado esquerdo e direito nesta direção na imagem que foi copiada e invertida anteriormente.

Verifique a animação várias vezes para garantir que não haja pixels estranhos. Não se esqueça do último check básico para ver se as mãos e os pés não estão saindo juntos.​
DADOS FINAIS
fc2FxGX.png

A disposição dos frames devem ser ajustadas para cada tipo de ferramenta.
Se for necessário colocar uma espada ou escudo na mão do personagem, é mais fácil tratá-los como partes de animação separadas e adicioná-los no final. Dependendo dos itens que o protagonista possua, pode ser bom usar esse método de separar as partes independentes para criar gráficos de jogos com roupas diferentes para cada item.

■EXCEÇÃO QUE NÃO PODE SER ESPELHADA■
Tecnicamente, inverter esquerda e direita é fácil, mas o único problema é que a direção da luz precisa ser enfatizada com precisão. Especialmente quando se enfatiza sombras por fontes de luz que estão inclinadas para a esquerda ou para a direita, inverter a esquerda e a direita fará com que a posição das sombras seja invertida e a animação ficará feia.

Para reduzir o trabalho ao inverter a esquerda e a direita, é importante evitar enfatizar a luz da esquerda e da direita (concentre-se apenas na luz de cima). No entanto, se for realmente necessário enfatizar as sombras da esquerda e da direita devido à integração com o mapa, é melhor criar todas as imagens para cada padrão de animação e em seguida, adicionar as sombras no final, mudando o processo.

Existem outras exceções, então é necessário pesquisar constantemente como lidar com elas de maneira flexível e eficiente.​

SE VOCÊ NÃO CONSEGUE SIMPLIFICAR DE NENHUM JEITO EM SUA MENTE
Se você não consegue simplificar e identificar os pontos de destaque ao ver o design apenas, eu recomendo que você tente desenhar o personagem em um pedaço pequeno de papel que você tenha convertido em SD. Quando você converte para SD (de preferência com a mesma proporção que você planeja desenhar), partes que não ficariam claras se tornam aparentes e isso é exatamente o que não pode ser reproduzido em um pixel arte.

Além disso, desenhar uma ilustração deformada pode ser útil para entender a estrutura da roupa se ela for muito complicada e você não souber que tipo de estrutura ela tem.​

DESIGN POR SI MESMO
Na verdade, é raro ter desenhos de design para todos os personagens como material de padrão adequado. Geralmente, apenas os personagens principais têm desenhos de design adequados e é muito mais comum que outros personagens, como os habitantes da cidade, não tenham desenhos de design. Em alguns casos, mesmo o protagonista é apenas um esboço.

Nesses casos, o próprio artista de pixel pode ter de desenhar os design. Como é difícil corrigir depois de se tornar um pixel arte, geralmente você desenha em papel e consulta o diretor (a pessoa que dirige a criação do jogo) para obter aprovação.​

APARÊNCIA DOS PERSONAGENS E SEUS PENTEADOS
Se não há desenhos de design originais, isso não significa que você pode fazer o que quiser. Você precisa incorporar pelo menos o mínimo de ambiente para o jogo. Por exemplo, se a cidade do deserto tiver como base o Egito, a roupa das pessoas na cidade também deve ter como base as roupas egípcias para que se encaixem. Para um mundo de fantasia com um tema japonês, você se inspira nos personagens principais e busca um estilo semelhante.

Mesmo que você se sinta como um designer de personagens e pode desenhar o que quiser, você não deve executar essa vontade. Você não pode tornar os personagens coadjuvantes mais chamativos do que os personagens principais. Quando o artista desenha os designs, geralmente escolhe um design simples e comum, por isso tome cuidado.

Às vezes, você precisa aumentar o número de personagens com ajustes e edições, então a simplicidade é mais fácil em termos de trabalho.​

CONSIDERE MUDAR AS CORES E AUMENTAR OS ELEMENTOS
Se todos os habitantes da cidade usarem a mesma roupa e tiverem o mesmo rosto, o mundo do jogo parecerá superficial. Por isso, é necessário criar um esquema de cores que permita a mudança de cores individualmente, para que mesmo os personagens com o mesmo design possam parecer diferentes.

É importante ter uma paleta que permita a mudança de cores com facilidade ao desenhar os sprites a partir do design.​

DESENHE O PIXEL ARTE DE ACORDO COM O PADRÃO ORIGINAL
Quando se trabalha na criação de jogos como profissão, é raro que o seu próprio estilo de desenho se torne o padrão. O designer-chefe geralmente desenha um modelo que se adapta à imagem do jogo e em seguida, a equipe produz imagens semelhantes. Além disso, mesmo que o seu estilo seja sério, se estiver trabalhando em um jogo cômico, terá que se adaptar a um estilo mais engraçado. Os jogos são geralmente criados em equipe e é raro que uma pessoa consiga lidar com todos os gráficos sozinha (embora, por motivos orçamentários, haja casos em que alguém tenha que fazer tudo sozinho...).

Em outras palavras, a habilidade de "adaptar-se ao estilo de outra pessoa" é um elemento essencial ao desenhar pixel arte. Mesmo se você praticou desenhar pixel arte usando seus jogos favoritos como referência, tente praticar desenhando em estilos que você não gosta tanto. Isso, eventualmente, levará a uma melhoria em suas habilidades.​

ANÁLISE AS CARACTERÍSTICAS DA IMAGEM ORIGINAL
Alguns aspectos claros das características de uma imagem incluem a imagem geral de ser séria ou engraçada, proporções, linhas de contorno e esquema de cores. Adaptando-se a essas características, é possível obter uma semelhança próxima ao original. Neste caso, as dicas são baseadas nos personagens RTP do RPG Maker 2000.​

■EXTRAINDO AS CARACTERÍSTICAS DESTE PIXEL ARTE■
JznSgQt.png

RTP Herói 1
(RPG Maker 2000)​
  • Linhas de contorno nítidas em toda a imagem;
  • Os contornos não são uniformemente coloridos, mas usam cores mais escuras correspondentes à cor da área;
  • Quase duas cabeças de altura;
  • Esquemas de cores vivas;
  • Ênfase em patterns em vez das sombras;
  • Ênfase em anti-aliasing em vez das sombras;
  • Olhos localizados logo abaixo da linha central da cabeça;
  • As partes que serão animadas (movimentos como franja);
  • A sombra branca é da tonalidade azul (azul-pálido).
Ao usar a mesma paleta, é possível criar imagens semelhantes a este estilo ao compreender as características acima.​
TiQVBQf.png

Crie um modelo sem cabelo e sem roupa com base na imagem original como referência.
É mais fácil criar o modelo eliminando partes da imagem original.

lqtj8A5.png

Adicione cores separadas para cada parte ao modelo criado.

rDYGZyU.png

Desenhe as linhas de contorno, uma característica marcante.
Varie as linhas de contorno de acordo com a cor de cada parte.

QkeiyOb.png

Dê mais importância ao anti-aliasing e aos patterns em vez das sombras na etapa de coloração.

MODIFICAR E AUMENTAR QUANTIDADE
Para iniciantes que acham difícil desenhar uma imagem do zero e fazê-la parecer similar, é possível recomendar a modificação da imagem original e criar variações. Iniciantes em pixel arte podem aumentar gradualmente os pixels para modificação.​

TENTE MUDAR AS CORES
hkxUMg9.png
Tente mudar as cores que estão sendo usadas. Como o método de mudar as cores pode variar dependendo da ferramenta gráfica usada, consulte o manual do software que você possui. Você também pode pintar uma cor de cada vez.​

TENTE COMBINAR AS IMAGENS
DXUs5JR.png
Modifique uma imagem da bruxa com a parte do rosto transparente e uma imagem da cabeça da rainha. Dependendo da imagem, sobreponha a imagem que você deseja e ajuste os detalhes, como as sombras do chapéu, para concluir a imagem.​

MODIFIQUE AINDA MAIS A IMAGEM
96FPPth.png
Deixe apenas a cabeça da princesa, separe o manto do monge em um chapéu e um vestido, alongue o comprimento da saia do vestido do monge, adicione patterns e modifique as mangas. Por fim, combine tudo e ajuste a imagem.​

TENTE MODIFICAR MAIS E MAIS
D74sSJ3.png
Remova o chapéu da bruxa, mude a cor do cabelo, combine a imagem do soldado com a cor vermelha, mude o cabelo em tranças e encurte o comprimento da roupa.​

Ao aumentar gradualmente os detalhes da modificação, é possível criar imagens mais originais. É melhor desenhar tudo sozinho, mas se você fizer isso passo a passo, aumentando gradualmente o que pode ser feito, acho que será uma boa ideia. Antes de modificar, tenha uma visão clara do tipo de personagem que deseja criar e pense em como combiná-los para reproduzir a imagem desejada. Tenha cuidado, pois simplesmente trocar as cabeças ou modificar as roupas não será suficiente para ganhar experiência.

Ao modificar as cores ou fazer arranjos para o seu próprio trabalho, pesquise as permissões de uso da imagem original. Se a imagem original não puder ser modificada, não será possível fazer alterações usando este método. Além disso, tenha cuidado, pois não é permitido modificar o "RPG Maker 2000 RTP" para qualquer outra finalidade que não seja para uso com a série de ferramentas RPG Maker após o registro do usuário.​


Fim da Aula

Volte ao Índice ● Próxima Aula ▼
Ano: 2002 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 09 - ANIMAÇÃO DE ATUAÇÃO PARA PERSONAGENS EM MINIATURA ●
Vamos adicionar gestos fofos aos personagens em miniatura
D6dUgOa.png

"Qual é a razão pela qual os gráficos de pixel arte ainda são amplamente utilizados hoje em dia? Embora haja considerações técnicas, como economia de espaço e processamento de programas, ainda é provável que seja devido ao apelo que o próprio pixel arte tem.

Embora as cenas visuais em 3D que correm pela tela sejam impressionantes, é divertido assistir pequenos personagens agindo. Dependendo da direção da cena, pode elevar a história mais do que a parte visual e seria divertido se o usuário pudesse controlar a ação.

Desta vez, gostaria de dar uma aula sobre a criação de animações que não sejam apenas sobre o "movimento de caminhar" com personagens pequenos. Elementos aprendidos anteriormente, como a linha de ação, serão necessários aqui. Será bom revisar antes.
"

O CHARME DE PEQUENOS GESTOS
A maioria das pessoas que gostam de pixel arte provavelmente são atraídas pelos pequenos movimentos dos personagens. A atmosfera única que apenas o pixel arte pode oferecer é essencial na produção de jogos. Pessoas que conhecem esse apelo provavelmente também desejam tentar criar diferentes tipos de movimentos. No entanto, primeiro devemos aprender movimentos simples e gradualmente adicionar movimentos mais difíceis.

Aqui, também é importante ter uma "imagem de movimento". O que acontece com o ombro e o braço quando a mão é levantada? Pensar sobre essas coisas será a chave para melhorar. Como foi discutido no curso anterior, separar partes diferentes do corpo em animações separadas, em vez de desenhá-las todas juntas, é a maneira mais fácil de chegar ao resultado final.​

EXPERIMENTE UM MOVIMENTO SIMPLES
Se você é capaz de criar animações de caminhada, isso será muito fácil de fazer, mas para revisar, vamos tentar criar uma animação simples aqui. O processo de desenho e o método de criação são semelhantes aos usados na animação de caminhar. Considere cada parte do corpo como uma parte separada.​

LEVANTAR A MÃO
Mesmo levantando a mão, existem várias maneiras de fazê-lo. Na linha de ação, pense bem sobre a rota que a mão seguirá e processe-a. Se você estiver criando três frames, o segundo quadro será o meio-corte.​
dgbr3Yn.gif
Feito apenas recriando o braço direito do personagem. Mas ao mover apenas o braço, parece um robô. Não é possível transmitir com emoção que ele está levantando a mão.​
zOaOhJe.gif
Adicionei uma torção no corpo no terceiro frame. Quanto maior a diferença de movimento em relação ao primeiro frame, maior será a impressão de movimento. Além disso, ser mais ativo permite expressar emoções vivas.​

Quando um ser humano levanta o braço direito o máximo possível, automaticamente o ombro esquerdo tende a descer um pouco. Ao adicionar esse movimento de torção, é possível expressar o movimento de levantar a mão de forma mais realista.
No entanto, em cenas como "sendo controlado por alguém" na história, até mesmo um movimento sem entonação como o do primeiro frame pode ser interessante.

*Ao mover as mãos, experimente conscientemente sentir em seu próprio corpo quais partes do corpo estão conectadas e se movendo em conjunto. Faça isso olhando no espelho várias vezes e tentando imaginar e desenhar mentalmente os movimentos. Com a prática, você será capaz de desenhar até mesmo movimentos que você não consegue fazer fisicamente, como uma cambalhota, apenas imaginando-os.

BATER PALMAS
Na história, há muitas cenas em que o personagem aplaude. Aplaudir é colocar as mãos juntas no centro, então é uma boa ideia aplaudir sozinho para verificar a altura das mãos.​
Ym0CJxk.gif
Embora seja uma maneira comum de aplaudir, juntando as mãos como se estivesse segurando pratos, pode parecer estranho dependendo da situação. Este movimento é adequado para quando uma criança chama um cachorro ou algo assim.​
38RhRCR.gif
Aplauso com uma combinação um pouco diagonal. É masculino, então é estranho como uma ação para meninas, mas para um grande grupo de pessoas, incluir essa arranjo pode trazer variação.​
3h2aIDz.gif
Como os movimentos como aplaudir são pequenos, pode ser melhor exagerar um pouco para que se destaque mais. Se você quer um movimento menor, a dica é reduzir o número de frames.​

TOCANDO INSTRUMENTOS (TAMBOR)
Como exemplo de movimento corporal, deixe o personagem tocar um instrumento. Independentemente do instrumento que você escolher, comece criando o personagem sem segurar nada e em seguida, adicione o instrumento enquanto desenha para fazê-lo parecer melhor.​
aGaVztK.gif
Além de apenas bater alternadamente, se você criar também a parte de "pausa", será possível bater conforme a música.

TOCANDO INSTRUMENTOS (FLAUTA)
Como a flauta vertical é usada nas aulas de música, é fácil sentir a sensação do instrumento. Além disso, é necessário apenas mover principalmente os dedos, então não é tão difícil desenhá-lo. Mas e quanto à flauta transversal? Eu acho que se você não tem experiência com instrumentos como a flauta, não entenderá a postura correta do instrumento. Nesse caso, é melhor assistir a transmissões de orquestras executando o instrumento para ter uma boa imagem dos movimentos antes de começar a desenhar.​
AAa5iXu.gif
Basicamente, a flauta só precisa mover os dedos. Como o movimento é pequeno, é necessário adicionar movimento, como seguir o ritmo com os pés. Além disso, é importante ter uma postura adequada, não ficar parado, mas equilibrar o peso em uma perna para criar movimento.​

BRANDIR UMA ESPADA
A animação de ataque com espadas, como brandir uma espada, é essencial em jogos de ação e batalhas em side-scrolling. Se você experimentar o movimento real de brandir uma espada, será mais fácil imaginar a animação de qualquer ângulo. Quando se trata de brandir uma espada, a imagem se tornará maior, dependendo do tamanho do movimento da espada. Portanto, é necessário ter cuidado. Se a imagem tiver um tamanho fixo, como no RPG Maker, será necessário desenhar o personagem um pouco menor antes de adicionar a animação.​
IxgKbj3.gif
Em três frames, se o segundo padrão for a posição frontal do corpo, desenhe quando a espada é erguida (primeiro frame) e quando é abaixada (terceiro frame). Isso tornará mais fácil desenhar a torção do corpo.

Mesmo de lado ou de costas, é bom estar ciente da torção ao desenhar. Se imaginar um pouco inclinado para a frente e ajustar a posição da cabeça, a animação ficará ainda mais fluida.​

MOVIMENTOS COTIDIANOS
Não temos só movimentos especiais, mas também os movimentos que fazemos no nosso dia a dia são importantes para criar uma atmosfera realista nos jogos.

A sequência de movimentos ao cozinhar, lavar e secar roupa, cultivar um jardim, cortar madeira, limpar... esses movimentos podem criar uma sensação de vida no jogo. Além disso, essas ações cotidianas são excelentes materiais de treinamento, pois podem ser confirmadas pela própria experiência de movimento e observação do movimento humano.​

EXPRESSÕES DE EMOÇÕES: ALEGRIA, RAIVA, TRISTEZA E FELICIDADE
Em relação aos "balões" de fala, já foram explicados em aula anterior, portanto, aqui, gostaria de explicar como fazer um personagem pequeno expressar emoções básicas, como alegria, raiva, tristeza e felicidade.

No entanto, ao se movimentar, a personalidade do personagem sempre se torna evidente, então é importante entender bem a personalidade do personagem e permitir que isso influencie a atuação. Não leve as expressões de alegria, raiva, tristeza e felicidade de forma literal. Para personagens enérgicos, você pode imaginar expressões como "muito feliz", "muito zangado", "chorando muito" e "normal", enquanto para personagens mais quietos, pode imaginar expressões como "sorrindo", "franzindo a testa", "lágrimas nos olhos" e "tímido", por exemplo.

Em pixel arte muito pequena, que não permite a expressão facial, é melhor exagerar um pouco para que os resultados sejam melhores. Aqui, usaremos personagens um pouco maiores, com 32x48 pixels, para explicar. Use apenas um frame e tente expressar as emoções de forma clara.​

EXPRESSÕES EM SÍMBOLOS DE ANIME/MANGÁ
0ZMpXmQ.png

É adequado para personagens que não mostram muitas expressões faciais
Além disso, esse método é melhor para personagens de tamanho pequeno


VÁRIOS SÍMBOLOS DE ANIME/MANGÁ
ToZCk6T.png
Símbolos de anime/manga são fáceis de usar e quanto mais você os usa, melhor sua habilidade de atuação se torna.

É melhor adicionar expressões faciais em vez de usar apenas símbolos de anime/manga como meros sinais. Além disso, animar os próprios símbolos também pode tornar a atuação mais atraente.​
i1TTk5V.gif
Quando se trata do movimento dos símbolos de anime/mangá, a melhor coisa é usar a imaginação, mas também pode ser útil estudar anime de TV e outros materiais para referência.

*A maior desvantagem dos símbolos de anime/mangá é que eles não permitem que a personalidade única de cada personagem seja expressada.

NOTA SOBRE CARACTERES CÔMICOS
A forma de usar os caracteres cômicos é geralmente empurrar cada cor de imagem para a frente, como no exemplo acima. No entanto, em jogos, na maioria das vezes não é determinado que cor será usada nos chips do mapa de fundo.

Os caracteres cômicos desenhados com linhas brancas não se destacam se o fundo for branco como a neve e não podem ser vistos se as linhas forem pretas em um chão escuro. Esteja consciente de diferenças nas linhas principais, dependendo se o fundo for claro ou escuro. Em alguns casos, pode ser necessário preparar dois tipos de caracteres (para fundos escuros e claros). Além disso, há também um método de representação em balões (como nas histórias em quadrinhos), que não são afetados pelo fundo.​

PERSONAGEM ENERGÉTICO
IbbFGwe.png

É bom mudar a expressão facial o máximo possível
A direção do corpo também é um elemento importante
Os movimentos para fora são mais masculinos


DESVANTAGENS AO ADICIONAR GRANDES MOVIMENTOS
A maior desvantagem ao criar animações de pixel arte é que, quanto maior o movimento dado ao personagem, mais frames de animação são necessários para acompanhar a amplitude do movimento. Tenha em mente os problemas de tempo, esforço e tamanho de arquivo ao decidir o tamanho do movimento. Em termos de aparência, isso cria uma ótima impressão.​

PERSONAGEM CALMO
vICE3MX.png

Expressado por pequenos gestos e mudanças de expressão
Movimentos para dentro tornam-se mais femininos


COMBINAR
gbeK56Q.png

Combinando grandes movimentos, pequenos movimentos e caracteres cômicos.
Dependendo do tamanho do personagem, há limitações, mas se possível, é desejável dar movimentos adequados ao personagem. Como o personagem é um ator, ele não pode se mover bem sem a orientação de atuação do desenhista. Antes de desenhar, pratique imaginar claramente como você orientaria a atuação, exagerando em algumas partes e segurando outras.
Para desenhar todas essas ações com imaginação, é necessário desenhar livremente cada parte do corpo em várias direções. Em particular, a cabeça é difícil de desenhar em várias direções devido a influências como o cabelo, mas o "movimento da cabeça" é uma parte natural do movimento humano. Tente desenhar em todas as direções conscientemente.

Como prática, domine a movimentação da cabeça do personagem em 8 direções, incluindo diagonalmente, não apenas nas quatro direções (frente, direita, esquerda, trás) e movimentos como olhar para cima e para baixo em apenas quatro dessas direções. Ao desenhar penteados que são influenciados pela gravidade, é necessário prestar atenção à direção da cabeça. No começo, desenhe personagens carecas ou com cabelos curtos e pratique gradualmente.

Uma das técnicas é ter a consciência de que a cabeça é uma "bola redonda" ao desenhar. Compre uma bola de borracha lisa (ou qualquer objeto esférico inútil que você tenha) desenhe os olhos, nariz, boca, orelhas e a linha do cabelo nela e use-a como um modelo. Se você tiver bonecas ou figuras à mão, também pode usá-las como modelos.
CRIANDO ANIMAÇÕES DE BATALHA
Como exemplos de situações que exigem animação de personagens, temos a tela de batalha lateral. Embora o tamanho do personagem não seja tão grande quanto nos jogos de luta, os movimentos são variados, mesmo nos menores personagens. Aqui, explicaremos cada movimento necessário individualmente. Definimos um padrão de 48x48 e uma composição de três frames para cada tipo de movimento.​

COMO DESENHAR UM CORPO EM DIAGONAL
É possível que você esteja acostumado a desenhar uma visão frontal, traseira ou lateral do personagem para frames de caminhada, mas se achar difícil desenhar um personagem na diagonal. Aqui, explicaremos brevemente como desenhar um corpo na diagonal. Mesmo em jogos com vistas em 8 direções ou em perspectiva isométrica, você precisará desenhar personagens na diagonal.

Observe que, como é difícil desenhar em diagonais com poucos pixels, geralmente se usa o personagem virado para o lado para animações de batalha quando não há pixels suficientes (em alguns casos, pode-se usar a frente do corpo e a lateral da cabeça).

■1■
Primeiro, prepare as imagens frontal e lateral (consulte a figura abaixo). Pode parecer desnecessário se você estiver desenhando apenas na diagonal, mas, enquanto ainda não estiver familiarizado com o design, crie ambas para fins de verificação.

■2■
Coloque as imagens frontal e lateral como mostrado na figura abaixo e desenhe uma linha guia. É útil fazer a linha guia com duas linhas diagonais de 2 pixels cada, que também são fáceis de corrigir.​
J4holsB.png
■3■​
Com base na linha guia, complete o personagem na diagonal. Preste atenção à posição dos olhos, pescoço, cintura e pés.

P7an9C4.gif
■4■
Verifique se o personagem na diagonal foi criado corretamente por meio da verificação de animação. Se parecer que está se movendo bem, está concluído.

FtgbJLy.gif
■5■
Guarde isso como um modelo. Mesmo se você desenhar um personagem com cuidado, verifique se não há distorções ao verificar a animação. Especialmente, preste atenção aos penteados.

☆O PROCESSO DE ACABAMENTO A PARTIR DO MODELO É O MESMO DE SEMPRE☆
TibiMpL.png

Divida as cores levemente, como se estivesse desenhando o contorno.
Desenhe as linhas do contorno e as sombras.
Adicione anti-aliasing.

TENTE DESENHAR UM ESTADO DE ESPERA
O estado de espera é quando o personagem não está fazendo nenhum movimento. Pode ser três frames iguais sem nenhum movimento, ou como em um jogo de luta, pode haver algum movimento, como movimentos para cima e para baixo. Além disso, você pode desenhar a roupa e o cabelo balançando. Na verdade, é melhor manter a postura para estar em combate, dobrando os joelhos e abaixando a cintura. Com essa postura, é mais fácil conectar-se a outros movimentos com um número reduzido de frames.​

MODIFIQUE A POSTURA VERTICAL PARA A POSTURA DE ESPERA
sQtPpbb.png
Dobre os joelhos, abra as pernas e abaixe a posição da cintura. As mãos são posicionadas como se estivessem segurando armas.​

EM ESPERA
Tkfqj7d.gif
Movimentos de cima para baixo como se estivesse batendo o ritmo com os joelhos. Como há apenas três frames, os movimentos devem ser pequenos.​
ImzlVU3.gif
rZC0xNq.gif
PUmCif0.gif
*Se possível, é conveniente desenhar para que possa se adaptar a várias armas. No entanto, como a maneira de segurar armas geralmente é diferente, nesses casos, é possível desenhar as mãos na imagem da arma e não no corpo principal.

COMO MUDAR A POSE
rLr6wAg.png
Vou explicar como mudar a pose, alterando a postura normal. Qualquer pose complexa pode ser desenhada seguindo esta sequência:

1. Preparar a postura na direção adequada para a pose desejada;
2. Apague a parte do corpo que você deseja mudar a pose. Neste caso, apague o braço;
3. Desenhe a pose que deseja com uma única cor em uma cor chamativa;
4. Adicione a saia à parte visível que surgiu quando o braço foi apagado;
5. Pinte a parte com a pose selecionada com a cor desejada;
6. Termine adicionando as linhas de contorno, sombra e anti-aliasing.​

MOVIMENTO DE ATAQUE
Para realizar um ataque, são necessários dois tipos: um com as mãos nuas e outro com armas. Mesmo usando as mãos nuas, não se limita a socos, chutes ou outros movimentos que demonstrem as características do personagem. Em jogos, quando há mudança de armas, a animação de combate também muda. Para esses casos, é melhor manter as imagens das armas em arquivos separados.

Idealmente, os movimentos do personagem devem ser compatíveis com qualquer tipo de arma. No entanto, se houver regras como o protagonista só poder usar espadas, é possível focar nos movimentos para espadas. Mas é necessário ter cuidado para não se concentrar tanto em tornar os movimentos compatíveis com tudo que a animação fique muito rígida, pois os movimentos do personagem mudam de acordo com o que ele estiver segurando.​

ATAQUE COM AS MÃOS NUAS
GRTpRe0.gif


ATAQUE COM ARMAS
FTrSPxx.gif

*As imagens das armas devem ser preparadas separadamente

MODIFICANDO SUTILMENTE OS MOVIMENTOS
gL9KbRt.png
Quando você desejar movimentos levemente para cima ou para baixo, desenhar a pose de forma diferente pode ser demorado e trabalhoso. Para pequenos movimentos, é melhor alterar a imagem original.

1. Prepare uma imagem semelhante à pose desejada;
2. Primeiro, estique o personagem. Selecione a área abaixo dos pés e do calcanhar e mova-os um pixel para cima;
3. Concentre-se em ajustar a forma do sapato, para que pareça que o calcanhar está levantado. O ponto chave é pensar como a forma do sapato muda quando o calcanhar se levanta;
4. Ajuste a imagem com cuidado, verificando se não há tremulação ou movimento artificial;
5. Depois de terminar os movimentos dos pés, passe para os braços. Selecione a área do braço e mova-a para a posição desejada;
6. Quando você move o braço, um buraco transparente aparece. Preencha-o com a cor necessária;
7. Ajuste o movimento dos braços, prestando atenção à posição do ombro e do cotovelo;
8. Quando os braços e as pernas se movem corretamente, as partes artificiais começam a aparecer. Ajuste o cabelo e a saia de acordo com o movimento dos braços e das pernas.
wLx0zZQ.gif
*Para pequenos movimentos como este, desenhar um pixel de cada vez é mais rápido. Movimente cada ponto em um pixel de cada vez. Nesse caso, é preciso encontrar por conta própria onde e como colocar cada cor em cada pixel de maneira prática.

MANEIRA SÚTIL DE MUDAR A DIREÇÃO DO ROSTO
9ztSrNU.png
Se você quiser que o personagem olhe um pouco para trás ou abaixe a cabeça, é mais rápido corrigir um pixel de cada vez.​
1. Prepare a imagem original;
2. Cerque as partes do rosto e abaixe-as na medida em que desejar que a cabeça se incline para baixo;
3. Quando se olha para baixo, as partes do lado de trás da cabeça, como o cabelo amarrado atrás das orelhas, sobem na direção oposta;
4. Enquanto apaga as linhas transparentes, faça correções na forma que ficou amassada, mantendo a imagem de estar olhando para baixo;
5. Enquanto verifica a animação, desenhe a franja que cai ligeiramente para baixo ao olhar para baixo e corrija a parte superior da cabeça que está parecendo artificial;
gHnaHEX.gif
*No caso de animes, é necessário desenhar de forma que pareça que o personagem está fazendo a ação desejada enquanto verifica a animação​

v0vMT6o.gif
VxaDxMF.gif

Produção / Conclusão
*Basicamente, repita esse processo para se aproximar da ação desejada. Continue trabalhando enquanto verifica a animação.​

USANDO MAGIA OU ITENS
A animação ao usar magia ou itens pode ser considerada um tipo de padrão de ataque. Isso é necessário como um movimento especial. Não importa como o movimento mude dependendo do tipo de magia ou item, é recomendado desenhar usando um padrão comum, considerando a quantidade de trabalho envolvida.​

USANDO MAGIA
T7mItFO.gif
6bJxBtA.gif
Dependendo das especificações do programa necessário, pode ser que o padrão seja exibido em loop enquanto a magia está sendo usada. É seguro criar um padrão que possa ser repetido várias vezes.

A parte do efeito da magia (como efeitos visuais) deve ser preparada como uma imagem separada e no final, sobreposta. Isso será útil se você quiser alterar o efeito para cada magia. Se o efeito que será sobreposto já estiver decidido, você pode desenhar o efeito de luz da matriz mágica no personagem como mostrado no exemplo acima (preste atenção na área do quadril).​

USAR ITEM
FBzFviE.gif
Ao contrário de magias, os itens geralmente são usados e acabam, então é melhor desenhar apenas o estado em que estão sendo usados para evitar confusão.​

DEFESA, MORTE E DANO
Defesa é uma ação de proteção. Quando você se protege, geralmente faz movimentos para proteger o rosto e a cabeça. Em jogos, o estado de morte muitas vezes significa apenas desmaio, então é uma boa ideia fazer com que o personagem não se mova e solte símbolos como "piyopiyo". Para desenhar dano, pense em como a pessoa seria jogada ou batida.​

DEFESA
F8LobjP.gif
Quando especificado defesa, muitas vezes é necessário apenas uma imagem de espera. A animação é necessária apenas para o movimento quando se está sendo atacado na posição de defesa. Preste atenção em dar a sensação de que o personagem está se protegendo.​

DANO E MORTE (DESMAIO)
uBTLFpy.gif
7OcpP9z.gif
No dano, desenhe o personagem com uma expressão de dor e uma imagem ligeiramente arremessada. Por exemplo, se a cabeça for atingida, a cabeça será jogada para trás e se o abdômen for atingido, a impressão será de queda para frente.

Na representação do estado de desmaio, uma pose corporal que difere muito do estado normal torna mais fácil para o usuário (jogador) julgar o estado do jogo, então geralmente é comum colocar o personagem caído. Como é um movimento relacionado ao dano, se houver danos no abdômen, é melhor colocar o personagem de bruços e se houver danos na cabeça, é melhor colocá-lo de costas para obter uma boa conexão.​

ESTADO ANORMAL
É o estado de chamado status anormal. Existem muitas variações, como envenenamento, confusão, paralisia, petrificação, mas também há um método rápido de representá-las apenas com caracteres de mangá.​

ESTADO ENVENENADO
JxJZkpG.gif
Se a face ficar pálida e a respiração for forçada pelos ombros, dará a impressão de dor. Mesmo se a energia for esgotada e estiver prestes a desmaiar, essa expressão será eficaz.​

CONFUSÃO
gtqNmM8.gif
Balançar os pés como um bêbado pode parecer confuso.​

CONGELADO
lxgDvtN.png

v4mkOGl.png
1. Prepare uma imagem original
2. Mude a cor para uma tonalidade congelada (azul) para obter a aparência de gelo. Se mudar para cinza, parecerá petrificado;
3. Desenhe o gelo. Crie um pouco maior para acomodar qualquer pose ou tamanho de personagem;
4. Sobreponha à imagem preparada em 2;
5. Preencha as lacunas da cor transparente.​

VITÓRIA
Ação realizada quando se vence uma batalha. Se você interpretar um "Yatta!" ("consegui!"), saberá qual movimento se encaixa. Geralmente pode ser expressado com um gesto de força.​
VITÓRIA
M5IATIM.gif

Quando a pose muda, a postura também muda, portanto, é necessário estar consciente da posição do centro de gravidade. No caso de personagens pequenos com baixa estatura, como Chibi, não é tão perceptível, portanto, basta prestar atenção em "desenhar de forma natural" para desenhar corretamente o centro de gravidade. No entanto, em jogos de luta, as imagens grandes com maior proporção precisam ser desenhadas com cuidado para que a postura e o peso sejam percebidos durante o movimento. A próxima lição abordará o centro de gravidade.

Todos os elementos aprendidos até agora se conectarão com a animação de um personagem maior na próxima e última lição. Se você puder mover livremente o personagem Chibi, poderá mover facilmente um personagem maior. Como já deve ter dominado a técnica de Pixel Arte neste curso, agora é hora de treinar a imaginação de movimento e conectar com a próxima lição.​

Fim do Curso

Volte ao Índice
Ano: 2002 / Site: Digital Famitsu Homepage (http://www.enterbrain.co.jp/digifami/index.html)
Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito pela pseudo autora: Akida Komachi (あきだ こまち)
Publicado por:
Qdl6BNY.png
 
Última edição:
● AULA 10 - ANIMAÇÃO DE PERSONAGENS GRANDES ●
O maior desafio a ser enfrentado
D6dUgOa.png

12/03/2023
CURSO DE ARTE EM PIXEL => ●ANIMAÇÃO DE PERSONAGENS GRANDES●
Gt2ib2a.png


Tradução:
MACK / 宮内真琴 (Makoto Miyauchi) comentou:
Obrigado pelo seu e-mail.

Conforme apontado por você, fui eu quem criou as imagens e escreveu o curso. Agradeço por ter dedicado seu tempo para entrar em contato comigo.

Em relação ao curso, ele deveria ter sido serializado até o final, mas parece que o cache não está mais disponível. A empresa e o departamento responsáveis pela serialização já não existem e era proibido retirar os dados criados para o trabalho, então, infelizmente, não tenho os dados comigo.

Peço desculpas por essa resposta decepcionante.

Agradeço por amar e apreciar a arte em Pixel!

de MACK (Makoto Miyauchi)

Infelizmente, na mensagem acima recebida depois de enviar um e-mail para o MACK, os responsáveis pela organização da página Digifami Web ou site Digital Famitsu HomePage, com foco no RPG Maker não adicionaram o link da 10ª aula. Olhando no log de atualizações/noticias da página publicando a postagem da Aula 09 no dia 3 de setembro de 2002, passou alguns anos (até 2009) que a página de logs ainda era atualizada sem ter alguma citação da continuação do Curso de Arte em Pixel, ela foi repostada anos depois na página tkool.jp (2008) ficando disponível até 2013, porém sem conter a 10ª aula mesmo sendo citada na 9ª aula, dando a entender que ela foi perdida como o próprio criador citou acima.

Caso por milagre venha a existir, eu edito esta mensagem com a 10ª aula.
 
Última edição:
Voltar
Topo Inferior