Citação de: Enterbrain Co. LtdaQuando 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.
Akida Komachi (あきだ こまち) | Professora do 3º Ano |
Uma antiga professora bonita, apelidada de "pontilhismo Komachi". Uma mulher forte que ainda é habilidosa mesmo em sua velhice. Ela tem uma reputação pela precisão de suas aulas nervosas e sua habilidade com giz experiente. Ela está frequentemente ausente devido a doença. |
Linhas estranhas aparecem e parecem campos. | Está meio desalinhado. |
●MÉTODO DE CORREÇÃO DE COLOCAÇÃO CONTÍNUA● 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. 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. 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 vertical 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. 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. |
●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 maneiras de desenhar objetos naturais de maneira apropriada para que sejam padronizados. ●COISAS A TER EM MENTE AO DESENHAR OBJETOS NATURAIS●
|
●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●
|
★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. 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, e o azul escuro é visto como baixo (fundo) e o ciano claro é visto como alto (frente). 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.
Integrar as cores de fundo ajuda a criar um senso de profundidade. | ||||||
★REGRA DE DESTACAR OU AFUNDAR★ Você já aprendeu sobre como desenhar coisas parecendo estar saindo ou afundando na aula de segundo ano. Aqui, gostaria de explicar como essa ilusão é simples. 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 pontos, exceto pelo fato de ter sido invertida horizontalmente. 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. Embora seja a mesma disposição de pontos, 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. 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. |
★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. Eu tornei o fundo preto para torná-lo mais fácil de ver, já que um fundo escuro torna mais fácil de distinguir. Coisas opacas não são afetadas pelo fundo, enquanto coisas transparentes são afetadas pelo fundo. No caso de uma esfera, a borda ainda é colorida porque a parte circundante parece mais espessa. Coisas brilhantes não são afetadas pelo fundo e ficam mais escuras à medida que se afastam do centro. Esta imagem não foi processada, então a sensação ao toque seria suave. Quando os tiles são colocadas em áreas com sombras ou diferenças de cor, a impressão imediatamente se torna áspera. Isso ocorre porque as diferenças de cor adjacentes parecem degraus, como explicado acima. O padrão de mosaico é 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. Se você usa o preenchimento de cores para objetos lisos para complementar as cores que faltam, pode criar uma textura áspera, então tenha cuidado. Adicionar brilho faz com que a superfície pareça lisa. Para manter essa superfície lisa, o padrão de mosaico deve ter cores discretas ou não muito chamativas. |
(https://i.imgur.com/pT4vozR.png) Baixo | Grama realmente baixa, como musgo, que não tem muita diferença de altura e é suave e uniforme. É possível expressar a sensação de grama apenas com cores, mesmo pintando de uma cor só. |
(https://i.imgur.com/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 pontos de cerca de 2 pixels de altura em cores semelhantes, tomando cuidado para não deixar as bordas muito nítidas. |
(https://i.imgur.com/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 pontos com cuidado, tendo em mente cada folha de 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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/AulWJYz.png) | Com a cor transparente habilitada, sobreponha-a à seção de terra para evitar desalinhamentos. |
(https://i.imgur.com/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. |
(https://i.imgur.com/OJ0yDCd.png) | Copie os quatro cantos de 4 peças e a seção de terra, como mostrado na imagem. |
(https://i.imgur.com/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. |
(https://i.imgur.com/tOhJeTi.png) | O quadrado vermelho na imagem tem 8x8 pixels. Copie e coloque-o na posição mostrada na imagem. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/tOSzdji.png) | Com a cor transparente selecionada, sobreponha sem deslocar as partes da grama. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/O7S8ja8.png) | Reorganize conforme o esquema abaixo, como a combinação de objetos naturais com objetos naturais. |
(https://i.imgur.com/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 terra. Em seguida, implemente no RPG Maker e verifique a conexão dos chips gerados automaticamente. |
(https://i.imgur.com/z8J82xf.png) | Primeiro, desenhe a praia usando a mesma técnica usada para desenhar a terra na página 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 pontos 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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/VSGEvlg.png) (https://i.imgur.com/LsDwVgf.gif) | Desloque-o 8 pixels para baixo e esquerda. Nesta etapa, usando o chip da maré anterior, crie duas animações. A figura abaixo é a parte da animação e se tudo der certo, pode parecer como água, mas vamos modificar um pouco mais aqui. |
(https://i.imgur.com/L2Le9fl.png) | Configure vários chips da segunda maré. Apenas o chip central é editado. |
(https://i.imgur.com/FvryfEr.png) (https://i.imgur.com/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. |
(https://i.imgur.com/ngbkrHt.png) (https://i.imgur.com/4oNmfca.gif) 1-2-3 (https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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 nesta figura. Devemos colocar as sombras da mesma maneira que o exemplo da esquerda. 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. |
(https://i.imgur.com/p1DlFiU.png) | Cada parte do oceano é movida dois ou três pixels em todas as direções. |
(https://i.imgur.com/BUHiKfZ.png) | A imagem brilhante da praia é composta com a imagem do oceano. |
(https://i.imgur.com/KW5yaeV.png) | As cores usadas para o oceano são substituídas por uma cor transparente. |
(https://i.imgur.com/ZHf8zUs.png) | A sombra da praia é colocada e a imagem é composta. |
(https://i.imgur.com/4wAOq2X.png) | Colocamos o padrão original do oceano sem rolagem por cima. Com isso, a sombra está completa. |
(https://i.imgur.com/M9Ci1qS.gif) Sem anti-aliasing (https://i.imgur.com/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. |
(https://i.imgur.com/MaSV5I4.png) (https://i.imgur.com/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. |
(https://i.imgur.com/zDYaO4M.png) | Primeiro, crie um modelo de animação como o da esquerda, 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 esta figura. Se for muito trabalhoso, use esta imagem diretamente. |
(https://i.imgur.com/utdhRWG.png) | Coloque a imagem que você desenhou acima 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 com uma cor transparente. |
(https://i.imgur.com/38g0v5Z.png) (https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/7VkNbJQ.png) (https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/nnWj5j4.png) (https://i.imgur.com/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. |
(https://i.imgur.com/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 impressã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. |
(https://i.imgur.com/8z5fGpn.png) Figura 1 (https://i.imgur.com/tDYJaar.png) Figura 2 (https://i.imgur.com/M9VpCkd.png) Figura 3 (https://i.imgur.com/bxVqnM3.png) Figura 4 (https://i.imgur.com/egRWzMU.png) Figura 5 (https://i.imgur.com/dHO57u9.png) Figura 6 (https://i.imgur.com/bXo8EzF.png) Figura 7 | Em seguida, desenhe as telhas laterais junto com as telhas frontais.
|
(https://i.imgur.com/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 assim 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 pop porque pode escurecer demais a imagem. |
●Exemplo de como desenhar janelas● (https://i.imgur.com/9e0N1W6.png) Figura 1 (https://i.imgur.com/Xm9fdH5.png) Figura 2 (https://i.imgur.com/iLAAqop.png) Figura 3 (https://i.imgur.com/hzYrQjI.png) Figura 4 (https://i.imgur.com/k92nBCg.png) Figura 5 (https://i.imgur.com/rg7VgNw.png) Figura 6 (https://i.imgur.com/oKYI2Dq.png) Figura 7 |
*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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/xLtPBBM.png) Figura 1 (https://i.imgur.com/svIS5Q1.png) Figura 2 (https://i.imgur.com/WcCPRJD.png) Figura 3 (https://i.imgur.com/QcMcbps.png) Figura 4 (https://i.imgur.com/gJ3jdCE.png) Figura 5 |
|
(https://i.imgur.com/6M2iXfx.png) Figura 1 (https://i.imgur.com/vphFRXg.png) Figura 2 (https://i.imgur.com/yYr7k6h.png) Figura 3 (https://i.imgur.com/Us1fhje.png) Figura 4 (https://i.imgur.com/sgE1fOq.png) Figura 5 |
|
(https://i.imgur.com/MKcCh0g.png) Figura 1 (https://i.imgur.com/IyhSSdF.png) Figura 2 (https://i.imgur.com/Z8IrHzD.png) Figura 3 (https://i.imgur.com/E5AuEM8.png) Figura 4 (https://i.imgur.com/HDcbTEF.png) Figura 5 (https://i.imgur.com/Nha1yob.png) Figura 6 (https://i.imgur.com/dTt2itN.png) Figura 7 (https://i.imgur.com/eIcAlAP.png) Figura 8 (https://i.imgur.com/T6AhvmR.png) Figura 9 (https://i.imgur.com/TCIypXc.png) Figura 10 (https://i.imgur.com/rsfkDHu.png) Figura 11 |
|
(https://i.imgur.com/N4sPlAm.png) Figura 1 (https://i.imgur.com/AjtWWVT.png) Figura 2 (https://i.imgur.com/CBhyTyC.png) Figura 3 (https://i.imgur.com/19v0Cd4.png) Figura 4 (https://i.imgur.com/GEV74Kr.png) Figura 5 (https://i.imgur.com/4CJx8YU.png) Figura 6 (https://i.imgur.com/SgB53VH.png) Figura 7 (https://i.imgur.com/TDr5zGi.png) Figura 8 (https://i.imgur.com/O8uKb0X.png) Figura 9 (https://i.imgur.com/SY1DBtL.png) Figura 10 (https://i.imgur.com/lfRd7d1.png) Figura 11 (https://i.imgur.com/e99Phei.png) Figura 12 (https://i.imgur.com/wfEh1Iy.png) Figura 13 (https://i.imgur.com/vWsPOVz.png) Figura 14 |
|
(https://i.imgur.com/dN7ytQ2.png) | Primeiro, criamos a base do penhasco da mesma maneira que desenhamos o solo em loop. A diferença é que devemos imaginar que vários rochedos, como na figura da direita, se combinam. Vamos organizá-los e desenhar enquanto verificamos. |
(https://i.imgur.com/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). |
(https://i.imgur.com/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. |
(https://i.imgur.com/m0LinuW.png) | Em seguida, criamos os cantos. Colocamos os chips acabados na parte superior um ao lado do outro. Mas assim, a imagem do canto parece artificial e não natural. |
(https://i.imgur.com/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 o penhasco com uma curva como esta. |
(https://i.imgur.com/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 pontos 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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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 cabelos para trás. |
(https://i.imgur.com/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. |
(https://i.imgur.com/oTLKTUp.png) | Início do salto. Movendo-se rapidamente para cima. Como a distância percorrida é longa, os cabelos já estão sendo arrastados. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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 fofos por causa do ar. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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). | (https://i.imgur.com/aWc5T0f.png) Tamanho: 24x32 pixels. Sem laços no decote. Sem fenda na cintura. Sem ênfase nas faixas dos braços. |
(https://i.imgur.com/K9UUFSH.png) (https://i.imgur.com/3A2PMIL.png)(https://i.imgur.com/7xoerZM.png) | 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. ← Prepare os gráficos por parte, como mostrado aqui. |
(https://i.imgur.com/gu0yYWW.png) | (https://i.imgur.com/Mxxo6zq.png) |
(https://i.imgur.com/SqHJW3M.png) Primeiro, copie e coloque a frente normalmente. (https://i.imgur.com/c3WxY5x.png) Configure as mãos e os pés desenhados com cores escuras para que pareçam estar mais atrás. Termine com verificação de animação várias vezes. Veja a explicação detalhada ▼¹ (#post_Detalhado) (https://i.imgur.com/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. (https://i.imgur.com/yweF0G8.gif) (https://i.imgur.com/QvBvmLQ.png) | Primeiro, conclua a frente. Faça a imagem com uma composição apenas das partes simétricas à esquerda e à direita. 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. 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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/g80JWpg.png) Preste atenção também na torção do corpo. (https://i.imgur.com/ntTTvTo.png) Faça checagens frequentes na animação. Neste estágio, faça uma cópia para a direção oposta. (https://i.imgur.com/UsvsHhV.gif) | 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. 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. 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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/JznSgQt.png) RTP Herói 1 (RPG Maker 2000) |
Ao usar a mesma paleta, é possível criar imagens semelhantes a este estilo ao compreender as características acima. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/ToZCk6T.png) (https://i.imgur.com/i1TTk5V.gif) | 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. 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. |
(https://i.imgur.com/J4holsB.png) | ■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. ■3■ Com base na linha guia, complete o personagem na diagonal. Preste atenção à posição dos olhos, pescoço, cintura e pés. |
(https://i.imgur.com/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. |
(https://i.imgur.com/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. |
(https://i.imgur.com/v0vMT6o.gif) Estado de produção | (https://i.imgur.com/VxaDxMF.gif) Estado de conclusão |
Citação de: MACK / 宮内真琴 (Makoto Miyauchi)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)