Curso de Arte em Pixel (2º Ano) - Enterbrain Co. Ltda

[Victor Sena]

Curso de Arte em Pixel
(2º ANO)

Postagens relacionadas

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

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.

[box2 class=cat_bar title=SALA DE AULA DO 2º ANO]Ele tem conhecimento, mas ainda é um iniciante. Ele está na sala de aula do segundo ano.[/box2]

● AULA 01 - Dominando cores: O segredo da paleta
● AULA 02 - Técnica básica: Organização de pixels
● AULA 03 - Direção da luz e efeito de luz
● AULA 04 - Dar realismo aos objetos: Expressão de textura
● AULA 05 - Fundamentos de Animação 1

Download（223KB）

       
       

Nishiki Sasamura（ささむら　にしき）	Professor do 2º Ano
Um bom rapaz com queixo rachado, amado pelo apelido de "Nikki". Ele tem uma personalidade enérgica, mas em sala de aula é delicado e cuidadoso. Ele faz testes práticos frequentes, mas sempre mostra como fazer corretamente.

●DOMINANDO CORES: O SEGREDO DA PALETA●
Você não consegue usar a cor que queria?

"Ao começar a fazer pixel art, você está pensando em quais cores são necessárias para desenhar essa imagem e se divertindo enquanto começa? No entanto, se você está tentando criar pixel art para jogos, espere um momento! Não é tão simples usar quantas cores quiser."

▲ Voltar

[box2 class=cat_bar]NÚMERO DE CORES UTILIZÁVEIS E ARQUIVOS[/box2]

Embora muitas pessoas possam não entender o que se entende por "cores utilizáveis" ou "cores não utilizáveis", não é tão difícil entender se você entender as características dos arquivos. É importante ter uma compreensão básica de algo chamado "paleta" para isso.

Primeiramente, o número de cores que pode ser utilizado difere dependendo do formato utilizado ao salvar uma imagem. Por exemplo, o formato GIF, que é frequentemente utilizado em sites, pode salvar apenas até 256 cores. Além disso, o formato padrão de arquivo do Windows é o BMP, que possui vários tipos de cores para escolher dependendo do objetivo, incluindo preto e branco, 16 cores, 256 cores e cor total de 24 bits.

Desta forma, o número de cores que pode ser utilizado é determinado pelo formato de imagem utilizado, mas também existem outros fatores que dependem do hardware utilizado. Essa diferença é especialmente evidente em consoles de jogos, tornando mais fácil de entender. Por exemplo, ao desenhar arte de pixel, a paleta é um elemento importante que não deve ser esquecido como uma limitação a ser lembrada, como apenas ser capaz de usar 4 de 600 cores pré-determinadas ou apenas 16 cores.

Em primeiro lugar, lembre-se de que o número de cores que pode ser utilizado é limitado pelo formato de arquivo e hardware utilizado.

● EXPLICAÇÃO PARA INICIANTES EM COMPUTADORES ●

"O QUE É UM FORMATO DE ARQUIVO?"
O formato de arquivo é simplesmente o tipo de arquivo. Eles são classificados por tipo: este é um arquivo de imagem, este é um arquivo de programa, este é um arquivo de dados de texto, etc. Os tipos são diferenciados pelo uso de uma "extensão" no nome do arquivo, que permite a identificação do tipo e uso do arquivo. Os sistemas operacionais (como o Windows) usam isso para distinguir entre diferentes tipos de arquivos.

Se você olhar para um arquivo, pode ver que ele é composto por uma combinação de "nome do arquivo + extensão", como "hp.exe". O ponto (.) indica que o texto que vem depois é a extensão do arquivo. O nome do arquivo pode ser livremente escolhido pelo usuário, mas a extensão é adicionada automaticamente pelo software. Se um software tiver requisitos especiais, ele pode usar uma extensão de arquivo exclusiva que só funciona com esse software. Mesmo que dois arquivos sejam ambos arquivos de imagem, eles podem ter diferentes formatos de arquivo (extensões), dependendo do número de cores ou do uso pretendido. Por exemplo, se você quiser usar uma imagem em um site da internet, precisará salvá-la como PNG, JPG ou GIF. Se quiser usá-la como papel de parede no Windows, precisará salvá-la como BMP ou JPG. É importante escolher o formato de arquivo correto para a finalidade pretendida.

Exceto por alguns casos especiais, os arquivos com a mesma extensão têm um formato uniforme. Mesmo que eles tenham sido criados com ferramentas gráficas diferentes, podem ser abertos pelo software que suporta o formato de arquivo. No entanto, existem exceções, como o fato de que nem todos os softwares suportam a abertura de arquivos BMP de 16 cores ou 256 cores, mas não suportam a abertura de arquivos BMP monocromáticos. Portanto, é importante estar atento aos detalhes da informação de dados do arquivo e garantir que eles sejam compatíveis.

●DIFERENTES FORMATOS DE IMAGEM●

Como mencionado anteriormente, mesmo que se refira a um arquivo de imagem, há uma ampla variedade de tipos, usos e números de cores que podem ser manipulados. Vamos explicar aqui os tipos de imagens mais comuns e seus conteúdos.

BMP
É o formato de imagem padrão do Windows, também conhecido como bitmap. Tem uma ampla variedade de tipos, como preto e branco, 16 cores, 256 cores e cores de 24 bits. Pode ser criado com a ferramenta acessória do Windows "Paint". No entanto, como a ferramenta "Paint" não tem conceito de paleta, não é adequado para criar gráficos de jogos. O DIB é uma versão diferente do BMP, usada quando não se deseja depender do dispositivo. A compressão RLE é usada como método de compressão do BMP. Se você salvá-lo com 256 cores no RPG Maker, provavelmente poderá usá-lo sem problemas.

JPG
Formalmente conhecido como JPEG, este é um método de compressão criado para reduzir o tamanho de imagens em cores completas que, de outra forma, teriam um tamanho grande e seriam difíceis de manusear. Existem vários níveis de compressão, e você pode escolher a qualidade dependendo do uso. Por ter menos degradação da imagem e menor tamanho de arquivo, ele se tornou popular na Internet. Como não tem o conceito de paleta, não é adequado para gráficos de jogos e o número de cores não é fixo. É adequado para salvar fotos e imagens 3D, que tendem a ter muitas cores.

GIF
É um dos formatos gráficos genéricos usados na Web. Tem um número fixo de cores e um tamanho de arquivo menor quando há uma ampla área de cores iguais. No entanto, esta imagem usa o algoritmo de compressão e descompressão LZW, que é patenteado pela empresa americana Unisys, então a imagem não é originalmente gratuita. Para usar imagens GIF criadas com um software não autorizado, é necessário pagar uma taxa de licença. A extensão do arquivo .gif em si não viola patentes, mas a tecnologia de compressão é patenteada. Ao criar uma imagem GIF, use um software autorizado pela Unisys. Como o software gratuito não é aprovado, você precisará usar software pago.

PNG
Este formato, chamado PNG, foi criado para substituir o GIF, que é considerado uma violação de patente. Ele pode lidar com mais cores que o GIF e pode lidar com várias cores transparentes, então é um formato que provavelmente se tornará popular na Internet no futuro. Além disso, se for o mesmo conteúdo, o tamanho do arquivo é um pouco menor que o do GIF. Geralmente, os dados de paleta são salvos, mas algumas ferramentas podem excluir cores não utilizadas. Como há poucos softwares que podem lidar com ele, é um formato com grande expectativa de crescimento no futuro. O RPG Maker 2000 suporta esse formato.

CTK
Este é um formato de arquivo exclusivo para o Character Maker 95, que pode armazenar quatro camadas. É limitado a 256 cores.

[box2 class=cat_bar]O QUE É COR TRANSPARENTE?[/box2]

A cor transparente é uma cor que não é exibida na tela, embora também seja chamada de cor de fundo, cor transparente, cor de recorte, entre outros nomes. Em jogos, é usada no processo de fazer personagens caminharem no mapa, então acho que é fácil imaginar o que é.

Ao preparar uma imagem, é necessário pintar a "cor transparente" em áreas onde se deseja mostrar a imagem de fundo, como a margem ao redor do personagem ou o mapa, para que seja possível processar "a área pintada com esta cor não é exibida na tela, permitindo que o mapa abaixo seja visível". A cor transparente é usada para este fim.

Lembre-se de que as imagens que incluem cores transparentes são chamadas de sprites.

Em geral, é importante saber que a cor que se torna transparente pode variar dependendo do software. Aqui estão alguns dos principais itens, apenas como referência:

• Quando o valor RGB 0,0,0 (preto) é definido como a cor transparente, independentemente do número da paleta;
• Quando o número da paleta 0 é definido como a cor transparente, independentemente da cor;
• Quando o número da paleta 0 e o valor RGB 0,0,0 (preto) são definidos como a cor transparente;
• Quando uma cor arbitraria é definida como a cor transparente (variável);
• Quando a cor do ponto superior esquerdo da imagem é definida como a cor transparente para toda a imagem.

Quando sobreposto à imagem de fundo, é possível obter um efeito.

Ao lidar com cores transparentes, é importante tomar cuidado para não usar a cor especificada como transparente dentro da imagem. Além disso, não se deve especificar uma cor usada dentro da imagem como transparente. Caso contrário, áreas indesejadas também se tornarão transparentes.

A cor transparente não sofrerá nenhuma influência da mudança de fundo e permanecerá transparente.

Em jogos, esse tipo de processamento é comum.

Além disso, é possível sobrepor imagens acima.

[box2 class=cat_bar]SOBRE AS CORES DO SISTEMA[/box2]

Quando se desenvolve jogos exclusivos de 256 cores no Windows, há casos em que é necessário incluir algo chamado "cores do sistema" na paleta de cores. Essas são as cores que o Windows usa constantemente, principalmente para ícones e cores de texto exibidos na tela. Basicamente, há 20 cores, que são chamadas de "cores do sistema do Windows".

Se um programa tiver a restrição de incluir essas cores do sistema e elas não estiverem presentes na paleta de cores, isso pode causar problemas como vazamento de cores. Além disso, se uma imagem incluir uma cor do sistema e uma cor que seja igual à cor do sistema (mesmo valor RGB), isso pode causar problemas como vazamento de cores em algumas situações do programa ou falhas em operações de paleta (por exemplo, em jogos, operações para escurecer ou tornar a tela vermelha).

Recentemente, tem se tornado menos comum a necessidade de incluir cores do sistema na criação de gráficos de jogos, mas é importante lembrar que elas podem ser usadas para criar ícones. Ao colocar as cores do sistema na paleta de 256 cores, é seguro manter as 10 primeiras e últimas posições da paleta reservadas para elas. Consulte as informações abaixo para obter detalhes sobre cores e disposição.

Existem 256 cores no total, mas geralmente começam do número 0 e terminam no número 255.

[box2 class=cat_bar]RESTRIÇÕES DE PALETA PARA CADA ENGINE DO RPG MAKER[/box2]

Além do assunto da cor do sistema mencionado acima, o RPG Maker possui diferenças nas restrições de paleta para cada gênero de jogo. Se você não entender essas restrições antes de criar suas imagens, pode acabar tendo que corrigi-las posteriormente. Isso pode ser muito trabalhoso e portanto, é uma das coisas mais importantes a se ter em mente. Verifique antecipadamente as especificações da engine que você está planejando usar, consultando o manual ou outras fontes confiáveis.

       
       
       
       
       
       

Nome do Maker	Cor transparente	Cor do sistema	Número de cores	Nota explicativa	Extensão do arquivo
RPG Maker Dante98 I	0	Nenhum	16	Mesma paleta para todos os arquivos	ARV
RPG Maker Dante98 II	0	Nenhum	16	16 cores para cada arquivo	ARV
RPG Maker 95	0	Pode ter	256	Mesma paleta para todos os arquivos	BMP
RPG Maker 2000	Qualquer	Nenhum	256	256 cores por arquivo	BMP PNG
SRPG Maker 95	0	Pode ter	256	Mesma paleta para todos os arquivos	BMP

[box2 class=cat_bar]METÓDO DE CRIAÇÃO DE CORES (RGB E HSV)[/box2]

Ao usar uma ferramenta gráfica para criar cores, você provavelmente perceberá que existem dois métodos: RGB e HSV (também conhecido como HSB). RGB se refere a "vermelho, verde e azul", enquanto HSV se refere a "matiz, saturação e valor". A matiz se refere à tonalidade da cor, a saturação se refere à vivacidade e o valor se refere ao brilho, portanto, é bom ter esses conceitos em mente para lembrá-los intuitivamente.

O que o RGB e o HSV têm em comum é que ambas usam três números para criar uma cor. Cada um é composto por três elementos: R/G/B e H/S/V(B), e inserindo um valor numérico de 0 a 255 em cada um deles, uma cor pode ser criada.

RGB é uma representação que utiliza as três cores primárias para a criação de cores, o que a torna fácil de entender. Então, vamos começar explicando a partir do RGB.

Explicando o RGB, que utiliza a representação das três cores primárias, é fácil de entender. A primeira regra para aprender é que "RGB = 0,0,0" sempre será preto e "RGB = 255,255,255" sempre será branco. Em outras palavras, quanto maior os números, mais brilhante a cor será e quanto menor os números, mais escura a cor será.

Além disso, quanto maior o número em uma das cores, mais intensa ela será na cor resultante. Por exemplo, se o valor de R for maior do que o de G e B, a cor terá um tom avermelhado. Ou se tanto R quanto B forem intensos, a cor será roxa. Isso é semelhante à mistura de tintas de pintura em termos de percepção. E a propósito, lembre-se de que se todos os três valores forem semelhantes, a cor resultante será cinza.

A regra do HSV(B) começa com a compreensão do que é o matiz, a saturação e o brilho, então pode ser um pouco difícil de se familiarizar. H (matiz) refere-se à tonalidade, como mencionado anteriormente e é o que determina as cores básicas, como vermelho, laranja ou verde. A imagem seria como começando com vermelho, passando pelo centro com a cor turquesa e terminando novamente com vermelho. No aplicativo de ferramentas gráficas incluído com o Windows, o "Paint", se você clicar duas vezes na paleta de cores, entrará no modo de edição de cores. Se você escolher "Criar cores", verá uma lista de cores vibrantes e coloridas exibidas como um arco-íris. A direção horizontal neste arco-íris é a matiz, ou seja, H.

Já S representa a saturação, ou seja, a intensidade das cores. Uma cor vibrante é definida como uma cor nítida e não turva. Quando a saturação diminui, a cor fica mais opaca e mais próxima do cinza. Novamente, no Paint, a direção vertical é a saturação, ou seja, S.

V(B) refere-se à luminosidade, ou seja, a diferença pura entre claro e escuro. Quando a luminosidade é alta, a cor se aproxima do branco e quando a luminosidade é baixa, a cor se aproxima do preto. No caso da luminosidade, numericamente, o ponto médio não é afetado pela luminosidade clara ou escura, tornando-se a própria cor.

Esta é a regra básica para criar cores usando RGB e HSV(B). Ao criar cores, usando ambas as técnicas, você pode criar uma paleta de cores eficiente, então tente criar cores de forma aleatória no início. O ideal é que você comece a entender intuitivamente quais valores ajustar para obter a cor desejada.

[box2 class=cat_bar]AGORA VAMOS CRIAR CORES[/box2]

Agora vamos tentar criar algumas cores. Aqui, eu quero criar uma paleta de 16 cores.

• Anote as cores necessárias
  Se você criar cores por impulso, pode ficar sem e depois acabar em trabalho extra. Pense cuidadosamente antecipadamente sobre quais cores são necessárias e faça uma lista. Por exemplo, no caso de desenhar um personagem, se ele tiver cabelo azul, você precisará de azul e é claro, precisará de cor de pele e se ele estiver usando armadura, precisará de cinza. Para cores sutis, está tudo bem adiá-las para depois, então comece escrevendo cores simples como azul ou vermelho. Observe que se você incluir uma cor transparente, deverá escolher uma cor para a cor transparente, então esteja ciente de que o número real de cores usadas será 15.


• Criando cores básicas
  Crie as cores que decidiu no passo 1 por enquanto. Acho mais fácil entender se você as fizer usando RGB. Você pode criar cor de pele fazendo R e G altos e B um pouco baixo.
  


• Adicionando cores suplementares
  Se você só tiver as cores acima, não será capaz de criar uma sensação de profundidade, então crie cores para sombreamento. Nesse momento, você pode facilmente criar uma tonalidade mais escura da cor especificada usando HSV e diminuindo o V. Por outro lado, também é possível criar uma cor de destaque brilhante aumentando o V. Se você quiser torná-lo um pouco mais chique, ao criar uma cor mais escura, defina a saturação um pouco mais baixa para criar uma cor sutil com profundidade.
  


• Adicionando cores
  Ter apenas duas tonalidades de cada cor não é suficiente, mas uma vez que você criou tudo isso, pode adicionar apenas mais três. Por enquanto, não é necessário ter duas tonalidades (duas cores) de preto, então mude ligeiramente a cor e torne-a transparente. Ao adicionar cores, o truque para criar uma paleta é priorizar cores que não possam ser usadas para múltiplos fins. Nesse caso, o destaque do verde claro e a cor da pele podem ser substituídos pelo branco, a parte mais escura do verde claro pode ser substituída pelo azul escuro e a parte escura da cor da pele pode ser substituída pelo vermelho escuro. Tente pensar em reutilização o máximo possível. Priorize a adição de cores que não podem ser substituídas, como azul claro ou rosa. Mesmo que ainda haja espaço na paleta, não há necessidade de adicionar cores desnecessárias. Por enquanto, deixe algum espaço em branco e faça quando precisar delas.
  

▲ Voltar ●

[Victor Sena]

●TÉCNICA BÁSICA: ORGANIZAÇÃO DE PIXELS●
Recomendações para organização e arrumação.

"Bem, vamos começar a fazer pixel art! Devo desenhar com o mouse ou digitalizar? Ah, espera, não posso ser apressado. Será que consigo organizar os pixels corretamente?"

▲ Voltar

[box2 class=cat_bar]A LINHA ESTÁ TODA QUEBRADIÇA[/box2]

Mesmo que eu digitalize ou desenhe com o mouse, seria conveniente se pudesse transformá-lo automaticamente em uma linha limpa e bonita, mas infelizmente não há software com essa função até agora, então a única opção é corrigi-la manualmente.

A qualidade da imagem aumenta quando você alinha os pontos dispersos e desenha uma linha bonita. Não é aceitável dizer "acidentalmente desenhei uma linha bonita". Se você não consegue fazer esse processo de propósito, criar materiais de jogos é apenas um sonho. Isso ocorre porque são necessárias mais de uma ou duas imagens para criar os materiais de jogos. Somente se você puder desenhar muitas imagens com a mesma qualidade é que realmente pode dizer que sabe "desenhar".

Isso é um exemplo de coloração direta em uma imagem digitalizada usando um scanner.
O resultado parece inacabado e muito esboçado e é antiquado.
Além disso, a coloração é muito trabalhosa.

[box2 class=cat_bar]A BASE DA BELEZA DAS LINHAS É A LINHA RETA[/box2]

Acho que muitas pessoas têm dificuldade em desenhar curvas. No entanto, como cada pixel é sempre um quadrado, é possível criar linhas retas na tela do computador apenas alinhando-os. Teoricamente, é fácil desenhar curvas conectando essas linhas retas em detalhes.

No entanto, é necessário trabalhar sempre verificando a imagem em tamanho real e corrigindo-a até obter a curva desejada, portanto, é preciso ter paciência.

Quanto mais ângulo uma curva tiver, menos pixels devem ser alinhados na direção horizontal ou vertical. Quanto mais pixels houver, a curva ficará mais suave.

A representação de curvas também depende muito da sensibilidade pessoal, então é importante tentar sempre olhar as linhas objetivamente.

Vamos dar uma olhada em um exemplo de curva e ver a relação entre o número de pixels alinhados e o ângulo da curva.

[box2 class=cat_bar]COMECE CORRIGINDO A LINHA COM APENAS UMA COR[/box2]

Acredito que você já saiba que é possível desenhar linhas limpas usando a técnica de anti-aliasing, que aprendemos no 1º ano. Mas durante a fase de correção da linha, é melhor evitar aplicar anti-aliasing.

Isso ocorre porque ainda não decidimos qual cor será usada na linha ao lado daquela que estamos corrigindo, e podemos acabar falhando na correção da própria linha por causa do anti-aliasing.

Mesmo sem anti-aliasing, é importante corrigir a linha até que ela pareça limpa. Não se esqueça de que a forma como você corrige a linha pode afetar bastante o nível de acabamento da sua arte. Trabalhe duro e lembre-se de que, para essa tarefa, talvez seja necessário mais paciência do que habilidade técnica.

[box2 class=cat_bar]VAMOS TENTAR CORRIGIR A LINHA NA PRÁTICA![/box2]

Vamos usar a imagem que acabamos de digitalizar com o scanner para explicar. Mesmo que você tenha desenhado diretamente com o mouse, a linha pode ficar quebrada, borrada ou com linhas extras. Se você dominar este método, poderá desenhar imagens de alta qualidade mesmo sem um scanner. Consulte a seguinte ordem para corrigir as linhas e tente encontrar o seu próprio método!

É importante digitalizar a imagem em preto e branco com 2 tons ou converter a imagem digitalizada em cores completas ou tons de cinza em 2 tons usando uma ferramenta gráfica. Se você digitalizar em tons de cinza ou cores completas, o anti-aliasing pode ser aplicado automaticamente, tornando a correção de linhas pontilhadas mais difícil.

1. USE A IMAGEM ORIGINAL (DIGITALIZADA PELO SCANNER OU DESENHADA APENAS COM O MOUSE) COMO UM RASCUNHO...
Considere tanto as imagens digitalizadas pelo scanner quanto as desenhadas com o mouse como esboços. Como são apenas esboços, sinta-se à vontade para redesenhar em grande escala se achar que pode melhorar ainda mais. As linhas principais devem estar em preto, então mude-as para cores suaves como azul claro ou cinza. Você pode fazer isso usando as funções do software ou preenchendo um pixel de cada vez. Essas cores são apenas temporárias, portanto, você pode criar novas cores que não estejam na paleta planejada ou usar cores já existentes. Ao torná-las mais suaves, as linhas para limpar se destacarão.

Neste método de desenho, uma vez que você está usando a imagem original apenas como um esboço, não é necessário digitalizá-la em preto e branco de 2 tons forçadamente. No entanto, se você digitalizá-la em cores ou em escala de cinza, pode capturar muitas cores desnecessárias, o que pode tornar difícil apagar o esboço posteriormente em ferramentas sem a função de conversão de paleta. Se você estiver usando um software com função de camada ou uma ferramenta que pode converter a paleta, não terá problemas, independentemente do modo em que estiver digitalizando.

2. TRACE AS LINHAS NECESSÁRIAS COM UMA COR DESTACADA, COMO VERMELHO
Embora seja possível usar a cor preta, opte por usar uma cor diferente, como vermelho. A razão para usar uma cor diferente do preto é que o preto é uma cor comumente usada para desenhar em papel, portanto, estamos muito acostumados com ela. Ao usar a cor vermelha intencionalmente, podemos ver as coisas de forma mais objetiva, já que é algo incomum. Além disso, ao adicionar mais uma etapa do esboço à finalização, há uma maior probabilidade de aumentar a qualidade geral do desenho.

Ao realizar o traçado, as pessoas que não estão familiarizadas com o mouse podem ter dificuldade em traçar as linhas corretamente e acabar desenhando linhas desnecessárias. Mesmo para aqueles que estão acostumados, é mais fácil usar uma ferramenta de linha reta em vez da ferramenta de caneta (curva) e desenhar a linha conectando várias linhas retas pequenas para facilitar futuras correções. Para áreas detalhadas, como os olhos, a ferramenta de caneta pode ser mais fácil de corrigir, portanto, escolha a ferramenta que preferir, de acordo com o estilo do desenho.

O mais importante neste processo é conectar as linhas quebradas e corrigir as áreas que ficaram esmagadas. Para facilitar a coloração, é melhor conectar as linhas em vez de pintar com uma cor diferente nos locais onde a cor está prevista. Se precisar apagar a linha principal por razões artísticas, é mais fácil corrigir o desenho depois de preencher a área com a cor.

3. FINALIZAÇÃO DO TRAÇO PRINCIPAL
Após finalizar o contorno em vermelho, apague o esboço subjacente. Agora, apenas o traço principal puro permanece. A qualidade parece diminuir em comparação quando o esboço ainda estava presente, mas é um mistério da percepção humana. Quando há muitas linhas, as pessoas tendem a escolher a linha mais nítida e clara, então as linhas do esboço parecem mais bonitas. A aparência desajeitada ao finalizar a limpeza se deve a ter escolhido as linhas erradas. Além disso, devido à diminuição das linhas, a imagem pode parecer vazia. No entanto, após colorir, essa sensação de vazio desaparece e considerando o trabalho de coloração, pode ser melhor deixar a imagem um pouco mais vazia. Quando estiver satisfeito com o resultado em vermelho, mude para a linha preta e revise. A mudança para a linha preta torna as linhas mais visíveis, expondo as partes que parecem desiguais ou distorcidas. Revise até ficar satisfeito e assim, o desenho estará completo.

↑ Depois de traçar o contorno preliminar.


↑ Depois de revisar cuidadosamente as curvas.


↑ Após mudar para a linha preta e revisar ainda mais as linhas.

Ao ajustar a imagem final do desenho, é importante ter a imagem original próxima para ajustar conforme necessário. Se notar alguma deformação no desenho ao revisar, corrija-a ativamente para melhorar a qualidade da imagem. No entanto, em caso de desenhos de outras pessoas, é importante priorizar a precisão em relação à reprodução do estilo de arte do criador original. Decida quais pontos revisar de acordo com a situação em questão.

4. COLORAÇÃO
Depois de terminar o desenho principal, é hora de se divertir colorindo. Comece preenchendo as cores principais. Se possível, é bom pintar com uma cor intermediária que não seja muito escura ou muito clara.

Se puder usar livremente a paleta de cores, ajuste levemente as cores depois de preencher, para aumentar a qualidade final. Priorize o equilíbrio de cores.

Quando você pinta as cores, coisas estranhas podem aparecer aos seus olhos, então corrija essas partes nesse momento.

5. ADICIONANDO SOMBRAS
Ao desenhar sombras, é importante ter em mente curvas e linhas retas. Escolha uma cor chamativa e delimite a área onde a sombra ficará antes de pintar para reduzir erros. Quando desenhar a linha de delimitação com uma cor semelhante, é fácil deixar pequenos pontos desorganizados passarem despercebidos, mas usando uma cor mais chamativa e organizando os pontos enquanto ela está lá, a qualidade final é melhorada.

↑ Linhas vermelhas mostram as áreas onde as sombras serão adicionadas, enquanto a cor da sombra é preenchida.
As linhas vermelhas são desenhadas com curvas em mente.

↑ A parte marcada em vermelho é convertida na cor da sombra daquela área.

↑ A sombra mais escura é adicionada e a cor da linha principal é alterada em algumas áreas.

Se já houver indicações de sombra no esboço, siga-as. Se não, certifique-se de prestar atenção à direção da luz quando adicionar sombras.

Neste ponto, ajuste as áreas onde as linhas foram interrompidas ou onde deseja mudar a cor principal. Ajuste até que fique bem visível, mesmo sem anti-aliasing. Dependendo do design e do número de cores, isso pode ser considerado uma obra finalizada.

6. ACABAMENTO
Finalmente, adicione anti-aliasing às linhas principais, ajuste as sombras, adicione destaques e aumente a qualidade. Quanto você quer trabalhar para finalizar a imagem depende de você.

↑ Estado após adicionar anti-aliasing em todo o desenho

O anti-aliasing deve ser adicionado em tudo, desde as linhas principais até as bordas entre as sombras e as cores intermediárias, e as bordas dos destaques. Tome cuidado para não exagerar.

Ajuste levemente as cores e está finalizado!


Não há necessidade de comparar...
Apenas prestando atenção nas curvas das bordas das sombras, já é possível melhorar um pouco...
Acredito eu...

Tanto para desenhar gráficos de rostos quanto para desenhar imagens, é bom lembrar deste método de desenho que foi apresentado aqui.

No começo, mesmo desenhos deste tamanho podem levar mais de 6 horas para ficarem prontos. No entanto, à medida que você pratica mais, vai conseguir desenhar mais rápido. Se você se esforçar para desenhar todos os gráficos para um jogo, até o momento em que o jogo estiver pronto, você deverá conseguir desenhar em menos tempo!

▲ Voltar ●

[Victor Sena]

●DIREÇÃO DA LUZ E EFEITO DE LUZ●
Importante! Sempre preste atenção.

"Algumas pessoas podem dizer: 'Luz? Isso não é algo invisível que não precisa se preocupar?' Mas, na verdade, a luz pode ser vista claramente. Ao desenhar a luz, podemos expressar a sensação de tridimensionalidade e atmosfera na ilustração."

▲ Voltar

[box2 class=cat_bar]MÉTODOS DE REPRESENTAÇÃO DA LUZ[/box2]

A luz em si é como o ar e não pode ser desenhada, mas é possível representá-la indiretamente ao desenhar o impacto da luz nos objetos.

Uma das representações mais comuns do impacto da luz nos objetos é através das sombras. Ao ajustar a intensidade das sombras de acordo com a intensidade da luz, é possível representar a intensidade da luz. Além disso, a cor da luz pode ser representada mudando a cor dos objetos iluminados e a textura pode ser adicionada aos objetos conscientemente criando um brilho.

Em resumo, ser capaz de representar a luz permite trazer realismo para uma imagem. Embora possa parecer difícil, uma vez que você entenda as regras básicas, será capaz de trabalhar intuitivamente. Então, vamos tentar fazer o nosso melhor.

[box2 class=cat_bar]LUZ E SOMBRA[/box2]

O conceito de luz e sombra é algo que pode ser facilmente compreendido, pois é algo que podemos observar na nossa vida cotidiana. Ao desenhar gráficos de jogos, é importante estar ciente da chamada luz ambiente. Neste caso, a luz ambiente se refere à luz que se espalha uniformemente em todo o cenário, atingindo os objetos com intensidade igual e em ângulos uniformes. A distância entre a posição da fonte de luz, o sol e o solo é medida em unidades astronômicas, portanto não é necessário se preocupar com a diferença na iluminação entre o topo da montanha e a superfície do mar. Portanto, é permitido ter uma ideia geral sobre a luz e a sombra.

Ao lidar com a luz ambiente, é importante ter em mente que a direção da luz é uniforme. É óbvio que a luz do sol atinge os objetos de cima para baixo. Além disso, o sol raramente está diretamente acima, sempre projetando sombras em uma direção específica. O comprimento da sombra aumenta quanto mais baixo o sol estiver, mas a menos que você esteja criando um conceito de tempo específico, não é necessário se preocupar com isso. Se a direção da luz é difícil de entender, pense em colocar as sombras. Se você definiu que a luz está vindo da esquerda para a direita, procure colocar as sombras do objeto para a direita.

O que você deve prestar atenção é quando há várias fontes de luz, o que é bastante complicado. Por exemplo, a luz das lâmpadas em uma caverna ou o fogo de uma lareira. A luz se espalha radialmente em torno da fonte de luz e quanto mais próximo o objeto estiver da fonte de luz, mais forte será o efeito da luz sobre ele. Por outro lado, quanto mais longe, menos influência da luz ele terá. Lembre-se também de que a luz é bloqueada por objetos, portanto, se você estiver cercado por algo que não permite a passagem de luz, ela não se espalhará além desse limite.

Esses pontos dependem da observação diária, portanto, é bom observar e lembrar como a luz e a sombra funcionam na natureza. As cores da luz também mudam dependendo do que está queimando e é importante estar ciente de como os objetos parecem quando expostos à luz. Tente se concentrar em sentir e observar esses detalhes.

[box2 class=cat_bar]O QUE A LUZ E A SOMBRA EXPRESSAM[/box2]

A importância da luz e sombra é que há muitas coisas que devem ser expressas com luz e sombra. Por exemplo, a sensação de tridimensionalidade. Para expressar isso, a luz e a sombra são bastante importantes. Apenas iluminando as partes salientes e criando sombra nas partes afundadas, a sensação tridimensional aparece imediatamente. Além disso, ao criar sombras, é possível enfatizar quais partes estão embaixo e quais estão em cima. A sensação tridimensional é um elemento essencial para representar a forma de um objeto em pixel art, a luz e a sombra para expressar essa sensação são igualmente importantes.

Além disso, a textura é afetada pela luz e sombra. Isso ocorre porque a quantidade de luz refletida varia dependendo do objeto, e ao expressar essa diferença, é possível representar o que é esse objeto. Sem luz, o brilho não é percebido e não é possível expressar se é algo brilhante ou não.

Além disso, as pessoas sentem medo da sombra e paz na luz, por isso é importante para criar a atmosfera de uma cena usando esse efeito.

A dica para criar sombras é tornar as partes mais profundas ou as sombras abaixo mais escuras. Como os olhos das pessoas percebem cores claras na frente e cores escuras no fundo, é possível utilizar esse efeito para expressar a sensação tridimensional!

       
       
       
       

	Tente desenhar uma estátua branca. Sem considerar luz ou sombra, fica apenas uma cor única. Não se sabe que estátua é.
	Desenhe apenas o contorno. Agora é possível ter uma ideia da forma da estátua, mas não há textura ou sensação de tridimensionalidade. Ainda é um plano semelhante ao desenho em papel.
	Adicione sombras uniformemente por toda a figura. Supondo que a luz incide da esquerda superior, há uma sensação de tridimensionalidade, mas ainda parece plano e não expressa bem a estátua.
	Considere as partes iluminadas e sombreie em diferentes tonalidades. Com os relevos claramente definidos, parece tridimensional. O uso excessivo de cores escuras pode tornar a figura pesada, portanto, deve-se ter cuidado para usá-las de forma moderada e com consciência.

Seguindo a ordem de desenho acima, é menos provável cometer erros ao adicionar sombras.

[box2 class=cat_bar]REFLEXÃO DE LUZ[/box2]

Se você deseja maior realismo, é importante também estar consciente da reflexão de luz (ou cor de reflexão). Se houver apenas luz e sombra no mundo, as áreas onde a luz não atinge ficariam extremamente escuras, mesmo durante o dia. Isso não acontece porque os objetos refletem a luz. Embora não reflitam a luz exatamente como um espelho, eles refletem pelo menos um pouco de luz, o que é conhecido como reflexão de luz.

Embora não seja necessário estar muito consciente da reflexão de luz, acho importante conhecê-la como uma técnica, pois pode ajudar a criar uma atmosfera em locais como cavernas escuras.

A reflexão de luz pode ser afetada pela cor do objeto que reflete a luz, então é bom observar isso regularmente. Se o chão é azul, a reflexão de luz que incide nos objetos também tende a ter tons de azul.

Este efeito é bastante perceptível em áreas escuras. Também pode acrescentar um brilho em geral, então acho que é eficaz em áreas onde se deseja criar uma sensação de luxo, como castelos.

↓ Luz

↑ Desta forma, mesmo as partes que normalmente não seriam iluminadas pela luz podem se tornar brilhantes devido à reflexão da luz nas paredes e no solo.

[box2 class=cat_bar]COMO ADICIONAR SOMBRAS NO JOGO[/box2]

Existem muitas técnicas e conhecimentos para tornar as coisas mais realistas, mas ao pensar em usá-los em jogos, você perceberá que na verdade eles não são tão práticos.

Quando se usa gráficos em jogos e se começa a desenhar comprimentos de luz e intensidade de sombras de maneira realista, a quantidade de trabalho torna-se enorme.

Além disso, uma desvantagem dos jogos de RPG, por exemplo, é que muitas vezes os mapas são criados em unidades de chip e se você criar muitos tipos de chips, pode acabar não conseguindo usá-los adequadamente.

Por esse motivo, é necessário simplificar as sombras e a iluminação. Dependendo do estilo gráfico, é importante ter em mente a deformação e adotar sombras e luzes em formas gerais.

Tente uniformizar as sombras no chão o máximo possível para dar uma sensação de unidade na tela. Ao criar, pense se o desenho como um todo ficará bom ou ruim, em vez de se preocupar com a realidade de cada objeto individualmente.

Quando deformar um objeto, é importante pensar na direção e intensidade das sombras.

No entanto, para deformar um objeto, é essencial ter conhecimento e experiência para entender a imagem original. Também é uma boa experiência se dedicar a desenhar uma imagem com o máximo de realismo possível.

Se você quiser criar uma imagem sem sombras de acordo com o estilo, é importante uniformizar a ausência de sombras em tudo. Por exemplo, se uma casa tem sombra, mas uma árvore não, é necessário uniformizar. Se houver um limite no número de chips e não for possível adicionar sombra a algumas partes, é melhor não adicioná-las em nenhuma parte para equilibrar. Nesse caso, a dica é adicionar sombras suaves ao objeto em si. Se uma construção tiver sombras realistas, mas não houver sombras no chão, ela parecerá flutuante, então tenha cuidado.

Por fim, uma imagem com muitas sombras pode dar uma sensação de peso e solidez, enquanto uma imagem sem sombra (ou com sombra fraca) pode dar uma sensação de leveza e brilho.

[box2 class=cat_bar]EXPRESSANDO DEGRAUS USANDO LUZ E SOMBRA[/box2]

Ao desenhar luz e sombra, é importante prestar atenção no limite entre elas. Dependendo se você suaviza ou exagera esse limite, é possível expressar degraus suaves ou extremos. Esta técnica é extremamente importante ao desenhar pixel art, então vamos dominá-la perfeitamente!

DEIXANDO MAIS PROFUNDO（luz vindo do canto superior esquerdo）

       
       
       
       
       

	Aqui temos um retângulo baseado em cinza, colorido sem considerar a luz. Como mencionado anteriormente, devido ao efeito em que cores escuras parecem mais profundas, pode parecer que a parte cinza mais escura está afundada, mas talvez não saibamos quão profundamente. Talvez pareça apenas um painel plano pintado com cores. Então, como podemos mostrar isso afundado adequadamente?
	Exemplo de sombreamento com consciência da luz vinda do canto superior esquerdo em relação ao cinza claro e escuro. Parece que foi cortado em papel, mas deve ter uma sensação tridimensional melhor do que a imagem anterior. A diferença entre ter uma diferença de altura e estar afundado parece estar presente pelo menos.
	Tente adicionar a cor da luz à área de cinza claro que parece receber luz do canto superior esquerdo e colorir a parte da diferença de altura onde a luz também está brilhando. Para eliminar a diferença extrema de altura, um exemplo de adição de uma cor adicional na área de sombra é mostrado aqui. Será que não parece estar afundando?
	Agora, vamos tentar afundar ainda mais suavemente do que o exemplo anterior.
	Se você usar muitas cores como esta, naturalmente parecerá uma depressão suave. A sombra fica mais clara em direção ao centro do quadrado, e a luz fica mais escura em direção ao centro do quadrado. Se você desenhar gradualmente com uma mudança de cor, acabará com uma sensação suave como esta.

DESTACANDO（luz do canto superior esquerdo）

       
       
       
       

	Dessa vez, porque a parte saliente é de cor clara, a expressão "o quadrado central está acima" provavelmente pode ser feita.
	Tente desenhar a parte onde a luz está brilhando na parte saliente. Mesmo que seja apenas um pouco, deve parecer que está flutuando.
	Exemplo de sombra com espessura.
	Um exemplo de ajuste adicional de cor da sombra. Se você adicionar um efeito de luz ao redor da parte superior, a borda da diferença de altura ficará mais clara. Para suavizar isso, é bom usar um gradiente, assim como na parte deprimida.

A chave para dominar esta técnica facilmente é desenhar a partir da sombra se você estiver criando uma depressão e a partir da luz se estiver criando uma saliência. Isso torna mais fácil de entender. Mesmo que você apenas entenda a regra de adicionar a cor da luz ao lado da cor da sombra para tornar a borda mais clara e fazer com que pareça haver uma diferença de altura, pode ser usado em partes detalhadas.

▲ Voltar ●

[Victor Sena]

●DAR REALISMO AOS OBJETOS: EXPRESSÃO DE TEXTURA●
Um pouco de esforço extra para um acabamento realista.

"Também dominei o anti-aliasing e consigo desenhar linhas nítidas. É claro que os efeitos de luz também ficam ótimos! Mas espere um pouco, será que estou desenhando tudo com um brilho brilhante demais? A sensação de aspereza ou textura granulada é um ingrediente indispensável para a pixel art usada em jogos."

▲ Voltar

[box2 class=cat_bar]O QUE É TEXTURA[/box2]

Em primeiro lugar, vamos pensar no que é textura. A textura é a sensação que sentimos a partir das características do material. É simplesmente explicado como "muito brilhante" ou "um pouco áspero". É uma imagem que expressa a sensação que sentimos ao tocá-la com palavras.

Em outras palavras, mesmo no pixel art, podemos produzir realismo e mudanças na tela, desenhando uma mobília de madeira polida como "muito brilhante e suave, mas um pouco quente" ou desenhando um velho tronco de árvore como "áspero, velho e desgastado, com ramos quebradiços".

Na animação 3D, a expressão dessa textura pode ser difícil, então devemos nos concentrar mais na força dos gráficos 2D.

Como essa expressão de textura é difícil sem dominar os efeitos de luz, é melhor estudar bem a aula anterior antes de começar!

[box2 class=cat_bar]SUAVIDADE E TEXTURA ÁSPERA[/box2]

Se muitas cores forem usadas e os limites entre as cores não forem destacadas, como aprendido no tópico anterior, é possível criar uma superfície suave. A textura áspera é o oposto, pode ser expressa destacando os limites das cores de forma mais fina.

A observação diária é importante para determinar se algo é suave ou áspero. Por exemplo, a parede da casa de um lenhador dá uma impressão áspera, enquanto as colunas de uma mansão são polidas e brilhantes. Esses conhecimentos podem ser adquiridos por meio de observação cotidiana (além dos objetos originais, como também através da televisão ou fotografias) e muitos deles são baseados em sensações, então tente desenvolver o hábito de observar conscientemente.

Agora vamos explicar como expressar suavidade e textura áspera em pixel art usando exemplos. No entanto, lembre-se de que este é apenas um exemplo e tente explorar seu próprio método de expressão.

[box2 class=cat_bar]EXPRESSANDO SUAVIDADE[/box2]

Até agora, temos usado a expressão "suavidade", mas há muitos tipos de suavidade. Uma mesa polida e tecidos de seda, por exemplo, são suaves. A suavidade pode ser descrita como uma condição em que não há protuberâncias ou depressões na superfície. Em outras palavras, se você mostrar limites de cor ou a disposição de pixels sem protuberâncias ou depressões, você pode desenhar uma pixel art "suave".

Na verdade, é melhor não adicionar cores desnecessárias a substâncias brilhantes ou suaves sem protuberâncias ou depressões, pois é possível evitar completamente a textura áspera pintando com uma cor única. Portanto, é importante não criar diferenças de cor extremas.

       
       
       
       

	Exemplo de pintura com uma única cor. Esta é a decisão final da suavidade. Sem sombras e sem textura, mas não há absolutamente nenhuma aparência de saliência.
	Quando você adiciona dobras semelhantes a tecido, se você usar muitas cores semelhantes, mesmo se você usar um padrão de mosaico ou sombras, é difícil criar uma aparência áspera e acidentada. Você precisa ajustar os pontos o máximo possível e estar ciente da representação de linhas retas e curvas.
	Mesmo com combinações de cores diferentes, quanto mais cores complementares tiver, menos ásperas e acidentadas serão as aparências.
	Um dos elementos que exige uma representação suave nos gráficos de jogos é a água. Não faz sentido que a água tenha uma aparência extremamente áspera, então a representação deve ser feita usando cores aproximadas. Se houver uma diferença extrema de cores em uma parte do mar, você pode suavizá-la usando anti-aliasing e evitar criar saliências extremas. Se as ondas forem altas, você pode optar por criar saliências, mas mesmo assim, é importante evitar a aparência áspera na parte da "água" usando sombras com cores aproximadas.

Para desenhar algo suave e sem saliências, use uma única cor ou use muitas cores. Se você usar um padrão de mosaico porque não tem cores suficientes, você acabará com uma aparência áspera e saliente. Se for necessário usar um padrão de mosaico para complementar as cores, é melhor usar cores semelhantes o máximo possível.

[box2 class=cat_bar]EXPRESSÕES DE TEXTURA ÁSPERA[/box2]

Depois de dominar as expressões de suavidade, é hora de trabalhar na textura áspera. Pensando no oposto da suavidade, a sensação áspera pode ser facilmente desenhada usando métodos como alterar drasticamente as cores adjacentes ou não arrumar os pontos.

       
       

	Exemplo de pintura com o mouse em cores diferentes. Pode não parecer um padrão, mas dá a impressão de ser áspero.
	Adicionar muitos anti-aliasing pode suavizar um pouco, mas ainda é possível sentir a diferença extrema entre preto e branco, criando um senso de aspereza.

A partir disso, pode-se dizer que, ao desenhar algo com textura áspera, a diferença extrema de cor adjacente (luminosidade ou matiz, por exemplo) é mais fácil de expressar.

       
       
       
       

	Usando os efeitos de luz e sombra aprendidos na página anterior, tente desenhar uma imagem afundada como a da esquerda. Desenhe em várias formas diferentes. Neste ponto, as cores adjacentes já devem ser extremamente diferentes.
	Quando combinados por copiar e colar, como na figura da esquerda, a impressão de aspereza pode ser sentida porque as imagens combinadas têm textura áspera.
	Quando várias imagens menores são reunidas, como mostrado na figura da esquerda, a sensação áspera permanece.
	Se você quiser expressar a textura áspera em gráficos de jogos, pode ser usado para a parte de terra, por exemplo. Mesmo cores similares podem expressar textura áspera, desde que haja uma diferença na luminosidade.

Nos gráficos de jogos, é comum que a suavidade e a textura áspera coexistam em um único chip, portanto, ao desenhar mapas ou outros elementos que exigem clareza de textura, é bom dominar ambos e estar sempre consciente disso.

No entanto, a intensidade das irregularidades é influenciada pelos resultados da observação e pela proporção em relação aos personagens, portanto, é importante praticar desenhar pixel art que se destina a ser usado em jogos.

▲ Voltar ●

[Victor Sena]

●FUNDAMENTOS DE ANIMAÇÃO 1●
Não é apenas uma questão de fazer as coisas se moverem

"Você criou um personagem tão legal, então quer fazê-lo se mover com estilo! Se você está tentando animar pela primeira vez e está tendo dificuldades, talvez seja bom aprender os fundamentos da animação antes de prosseguir."

▲ Voltar

[box2 class=cat_bar]FUNDAMENTOS DA ANIMAÇÃO[/box2]

Para aqueles que não têm ideia de como animar ou estão tentando animar sem entender muito bem, vamos começar entendendo o que é a animação em si.

●VÍDEOS E DESENHOS ORIGINAIS: COMO ELES PARECEM SE MOVER?●
Você já se perguntou por que a animação e as notícias transmitidas pela televisão parecem estar se movendo? Isso acontece porque várias imagens ligeiramente diferentes são exibidas em sequência, criando a ilusão de movimento. Se você tiver pelo menos duas imagens diferentes para um personagem usado em um jogo, ele parecerá estar se movendo. Aqui, gostaria de me referir a essas imagens com diferentes movimentos, uma a uma, como padrões de animação.

Para criar o movimento, precisamos desenhar o desenho original e o vídeo. O desenho original é o "quadro parado" e é a imagem em que o personagem está sentado ou de pé em uma posição parada. Este é o ponto de partida para criar a animação. O vídeo é a parte intermediária e é responsável por desenhar o movimento do personagem desde a posição sentada até a posição totalmente de pé. Quanto mais vídeos você tiver, mais suave será o movimento.

A parte dentro da moldura vermelha é a seção do vídeo.

●LINHA DE AÇÃO - TRAÇANDO O CAMINHO DO MOVIMENTO●

Na imagem acima, foram usados oito padrões para fazer o movimento. Um exemplo muito simples é mover uma forma simples com a mesma velocidade. A bola que sai da esquerda bate no chão e pula diagonalmente para bater na parede direita e voltar à posição original.

Mesmo em um padrão tão simples, há algo importante que você deve prestar atenção: a linha de ação. A linha de ação é a trajetória pela qual um objeto se move e existe em todos os tipos de movimentos.

O movimento permanece na mesma linha até atingir a diagonal da esquerda para a direita. Isso permite expressar um movimento uniforme.

Se você ignorar isso e se concentrar apenas na mudança de posição, pode acabar com algo como na imagem abaixo.

Para dar um efeito de irregularidade, como no movimento de borboletas, às vezes não se usa uma trajetória em linha reta. No entanto, muitas vezes, movimentos humanos e outros movimentos são representados por curvas suaves, e se não entendermos isso, coisas que não podem ser expressas nos conceitos de desenho original e animação podem acontecer.

Em modelos pequenos e simples, pode ser difícil entender a diferença entre movimentos em curva ou em linha reta, mas é importante compreender essa diferença. No exemplo da curva à esquerda, a bola jogada se move suavemente, enquanto na linha reta à direita, ela parece saltar com energia.

Pensar e estar ciente dessa linha de ação torna-se importante na criação de animações.

Para formas e movimentos mais complexos, como os de seres humanos, é mais fácil criar movimentos naturais quando se capta essa linha em cada articulação.

Um modelo frequentemente usado para explicar a linha de ação é o de uma pessoa levantando a mão. Mesmo apenas levantando a mão, há pelo menos três trajetórias possíveis. Escolher uma delas e torná-la o movimento desejado pode ser bastante difícil. Desenhar a trajetória planejada antes de desenhar a imagem torna a correspondência de posição mais fácil.

Ao tomar a posição do cotovelo e do pulso como referência para a linha de ação, é possível evitar que o comprimento da mão varie drasticamente dependendo do padrão.

A linha de ação é a linha que conecta os desenhos principais. Lembre-se de que a animação deve seguir essa linha.

●AJUSTE DE VELOCIDADE DE ACORDO COM O NÚMERO DE PADRÕES●
Embora seja possível controlar a velocidade de movimento ajustando o tempo de exibição de cada quadro por meio de programação, lidar com várias animações em um jogo pode levar a um trabalho árduo e demorado para especificar cada quadro, como "este quadro é exibido por 0,01 segundos, o segundo quadro é exibido por 0,8 segundos" e assim por diante. Portanto, às vezes é feita uma unificação do tempo de exibição por quadro por meio do cálculo do número de padrões por segundo.

Nesse caso, quanto maior o número de padrões por segundo, mais lenta será a exibição e quanto menor o número, mais rápida será a exibição.

Com muitos padrões

Com poucos padrões

É importante ajustar o número de padrões usados ​​no intervalo intermediário, tendo em mente a velocidade da animação.

A propósito, às vezes se usa o fato de que, se a mesma imagem for exibida continuamente, ela parece estar parada.

Para movimentos rápidos de personagens menores, é melhor reduzir o número de padrões no intervalo intermediário e aumentar o número de padrões para movimentos mais lentos. No entanto, essa é uma técnica para exibir imagens em uma velocidade constante. Se for possível especificar o tempo de exibição para cada padrão, é possível reduzir a carga de trabalho aumentando o número de padrões no intervalo intermediário para movimentos suaves e reduzindo o número de padrões para movimentos lineares que não precisam ser suaves.

Suavemente

De maneira travada

▲ Voltar ● Ir para 3º Ano ＞＞

Arquivado por: Internet Archive / Traduzido por: ChatGPT / Escrito por: Nishiki Sasamura（ささむら　にしき）
Publicado por: