Galope do pixel - parte cinco - animação do caráter. Caminhada

“Galope de um pixel”, parte I - conceitos básicos, estágios de crescimento, exercícios aplicados ( link )
Pixel Gallop, Parte II - perspectiva, cor, anatomia e exercícios aplicados ( link )
Pixel Gallop, Parte III - Animação ( link )
Galope de Pixel, Parte IV - Animação de Luz e Sombra ( link )
Galope de Pixel, Parte V - Animação de Personagens. Caminhando ( link )

Bom dia, Habr. Continuamos o ciclo do Pixel Gallop. Agora, no início de 2019, podemos dizer com segurança que isso não é apenas uma série de artigos, mas também uma saga de vários anos. Uma narrativa ampla sobre pixels, sua vida, como criá-los, técnicas e truques para trabalhar com eles. Não discutiremos as razões do "sprint" inicial, que depois se transformou em uma maratona de longo prazo, porque não há nada mais vital que a própria vida. Quem precisa de motivos para ausência ou pausa, se você puder simplesmente voltar ao que fizemos, ao que cozinhamos e ao que Deus quiser, continuaremos a observar. Em pixels, é claro!

A publicação de hoje será a próxima, e possivelmente até um ponto de virada na nossa história. Finalmente, chegamos à criação de animação de personagens completa. Nos dois capítulos anteriores, abordamos a animação de luz e sombra, bem como a animação de personagens estacionários (animação inativa) sem ações pronunciadas. Hoje, porém, nossos personagens vão embora e na próxima parte eles até correm, tendo vencido o fato de que eles nasceram por muito tempo. Outra região fértil. E eles passarão por outro ponto que marcará o fim do ciclo base. Nossos pixels finalmente se tornarão vivos.

Em vista do grande tamanho desta parte, vamos dividi-la em dois estágios. Os quinto e sexto capítulos do "galope". Tudo acontecerá como sempre, com a única diferença: você não terá que esperar pelo sexto capítulo por mais um ano ou dois. Tudo que ela precisa é ficar um pouco. Ela se levanta, nós cavamos - pelas pás.



Algumas palavras sobre as tarefas de importância secundária. Primeiramente, no primeiro artigo da série, prometi falar sobre a criação de conteúdo para três tipos de jogos. Isométricos (jogos isométricos), jogos de plataforma (jogos de plataforma) e aqueles que são claramente visíveis da vista aérea (jogos de cima para baixo). Também prometi falar sobre a animação avançada de luz e sombra e sobre os tipos de transmissão de meios-tons devido ao pontilhamento. Cada um desses tópicos não é uma ilha ou mesmo um arquipélago. As tarefas, em geral, são de natureza continental. Há onde se virar e há algo para cavar.

Como nos artigos anteriores, iniciaremos nossa próxima jornada com exercícios simples. Tanto quanto possível quando se trata das duas animações mais complexas - pise e corra. Vamos fazê-los de olho no trabalho dos animadores da Disney, já mencionado em artigos anteriores. Nesse caso em particular, serão quatro animações de quadro. Mais simples do que talvez sejam animações de dois ou três quadros. Para um aprendizado eficaz, também os tocaremos. Eles mostrarão substancialmente a importância de entidades como quadros-chave e como a animação muda se os quadros intermediários aparecerem entre os quadros-chave. Afinal, lembramos da tese principal do “galope”. Tudo começa com o simples, e o complexo nada mais é do que um sistema que consiste em componentes simples. Conhecendo as pedras angulares, você pode criar qualquer design.

Fiquei tentado a usar a paleta CGA no início, como foi feito anteriormente, no primeiro artigo, para demonstrar os estágios do crescimento da animação. Mas estrangulei esse desejo pela raiz. Para o leitor moderno, essas cores parecem bastante estranhas e muitas vezes bastante desagradáveis. Além disso, repetir a narrativa é uma característica ruim. No entanto, vamos fazer reverência na direção daqueles momentos em que havia poucas flores. Há uma razão para isso. Com um pequeno número de cores, entendemos melhor a forma, seu movimento e dinâmica. Os erros serão visíveis melhor, e é disso que precisamos.

Como costuma acontecer, o início do nosso trabalho será a declaração do problema. Digamos que criamos um jogo na resolução clássica para jogos de épocas antigas, 320x200 pixels. E também suponha que tenhamos duas cores para todo o gráfico e dois quadros para qualquer uma das animações. A tarefa não é mais agradável, não é? O que pode ser feito em dois quadros? E mesmo que seja possível, então ... o que pode ser feito em duas cores, se uma delas é o plano de fundo? Uma silhueta? Parece uma zombaria. Verifique se é realmente assim.

Para começar, o fato de que toda pessoa tem um esqueleto ... muitas vezes até em um armário ... inferno, às vezes eles têm túmulos inteiros lá. Criamos nossa animação colocando os ossos na posição correta em cada quadro. Mas e se o esqueleto não estiver claramente visível? O que fazer se o "peso" do personagem for de cerca de 70 pixels? Igual ao peso normal de uma pessoa comum no caso em que, com a nossa frivolidade característica, convertemos pixels em quilogramas? Vamos acertar.

Capítulo I - Danças Binárias

- De fato, apenas uma coisa é importante - o que uma pessoa pode e o que ela não pode.
Capitão jack sparrow

A tarefa que nos é colocada por nós não é trivial. O grau de imersão no assunto não se aproxima dos desenhos de silhueta com os quais Gallop começou, onde nossos primeiros pixels foram comparados com pinturas rupestres de pessoas pré-históricas. Então começamos com o modo CGA e a verdadeira riqueza na forma de quatro cores. Agora tudo é muito mais interessante. Estamos na parte inferior, ao lado do código de baixo nível. Zero e um. Mentiras e verdades. Nada, ou, inversamente, ser. Não sei você, mas sinto uma leve emoção. Em quase todos os artigos, nós, armados com omoplatas, procuramos as fontes dos fenômenos, tentando entender sua própria essência, e apenas tendo entendido por nós mesmos certas bases, começamos a subir.

Por uma questão de interesse, usamos o branco como a primeira cor e deixamos que seja a cor da vida e da luz, uma ode ao nosso ser neste planeta mortal. Bem, a segunda cor será ... roxa. Ou o que eu considero roxo. Mas não é preto. Hoje não vamos ficar tristes. No interesse de economizar espaço, cortaremos a parte superior e inferior da tela em 320x200 pixels, focando apenas no personagem.

Penso que, após o curso anterior, podemos muito bem fazer um homenzinho. E até equipá-lo imediatamente com animação em dois quadros. Onde o primeiro quadro será um homem comum, e o segundo é exatamente o mesmo, mas com uma mudança de um único pixel para cima. Ele parece estar esperando por algo. É provável que paremos de brincar e o ensinemos a andar.


Capítulo I. Fig. 1 - Onde ele está esperando

E vamos desenhá-lo em uma vista lateral. Porque enquanto se move para a esquerda ou direita, nosso personagem deve ser visível de lado. Devemos imaginar como ele se parece do lado de fora. Então ... deixe nosso expectante ter um amigo. Ou mesmo um grupo inteiro. É verdade que vamos expulsá-la de nossas filmagens. Para não interferir.


Capítulo I. Fig. 2 - Onde ele está esperando com seus amigos

Até os “12 princípios de animação” dos animadores da Disney, Ollie Johnston e Frank Thomas nos ajudarão em nossa tarefa em apenas um ponto. Use layouts. Recepção, quando os quadros principais são criados e o restante é adicionado entre eles. Isso seria apropriado para quatro, seis ou oito quadros de animação. Mas temos apenas patéticas de dois quadros no horizonte!

No entanto, os layouts nos ajudarão em nossa tarefa. É verdade que, para isso, precisaremos ver outra animação. Aquele para o qual ainda temos muitas milhas. Para desenhar quadros-chave - você precisa entender o que é. Vejamos o exemplo a seguir. O principal é não ter medo, mas ... sem medo, não tente imediatamente fazer algo assim sem dominar o básico.


Capítulo I. Fig. Animação de 3 a 24 quadros feita para o projeto inédito "Drake: The Golden Hind Story", como ilustração da carga máxima nos quadros e como resultado no artista.

Existem 24 quadros nesta animação, e devo dizer que foi uma loucura completa. Você não pode piorar as animações, com metade do número de quadros. A propósito, em muitos jogos modernos feitos no estilo de pixel art, poucas pessoas acenam para a animação de 24 quadros. Nos últimos anos, eu realmente queria fazer um plaftormer cinematográfico (do inglês “platformer cinematográfico”) e decidi enlouquecer. De alguma forma, o jogo não deu certo, mas as animações continuaram e estavam esperando nos bastidores para aparecer aqui. Pelo menos na forma de material aplicado.

Drake (esse é o nome dele) precisamos hoje não para nos gabar, mas para treinar. Vinte e quatro quadros, então, para uma fase, precisamos de apenas 12 quadros. Por fase, queremos dizer um passo. E os quadros desta etapa terão a seguinte aparência.


Capítulo I. Fig. 4 - Animação de 24 quadros, como material ilustrativo para quadros-chave com destaque retroativo. Geralmente tudo acontece ao contrário. Primeiro vêm os quadros principais do artista, depois o desenho dos quadros intermediários.

Agora, de volta ao texto casual dos quadros-chave. Embora um momento. O detalhamento de cada quadro na forma de uma pilha de pixels coloridos nos impedirá. Portanto, chamamos o vampiro local e os transformamos em imagens de silhueta.


Capítulo I. Fig. 5 - Animação de meio quadro 24 traduzida em “branco e preto” como material ilustrativo para destacar os quadros principais de acordo com a tarefa apresentada no capítulo. Com base nos quadros-chave selecionados, a animação especificada será criada.

Infelizmente, ainda precisamos tocar em algumas definições, mas tentaremos fazê-lo rapidamente, de maneira divertida e clássica do nosso jeito. Para começar, o conceito de “quadros-chave” veio da animação (em inglês). O animador (por favor, não confunda isso com pessoas malcriadas de hotéis diferentes que entretêm um público entediado) criaram esboços dos principais quadros de seus personagens e, em seguida, desenhou os quadros necessários entre eles, que depois se transformaram em movimento. O número de quadros entre esses quadros principais foi responsável pelo movimento suave.

Existem duas técnicas para criar animação (de acordo com os "12 princípios da animação") e isso é usando layouts ou movimentos diretos em fases. Layouts são o que vamos fazer, criando quadros-chave e desenhando entre eles os movimentos adicionais que precisamos (através de quadros intermediários). Movimento em fases direto é quando o personagem é desenhado como está. O primeiro quadro é desenhado e, em seguida, quadros adicionais são desenhados para ele à medida que se move (eu chamaria de “animação de acordo com as circunstâncias”). Isso é adequado para um desenho animado, mas não muito adequado para a produção de gráficos em jogos nos quais a animação que criamos entra imediatamente no mundo do jogo como personagem. A exceção pode ser protetores de tela ou vídeos.

O fato é que, no caso de um movimento direto em fases, o personagem pode ir a algum lugar de acordo com seus próprios assuntos, coçando a cabeça pensativamente, às vezes olhando em volta e possivelmente até rindo de alguma coisa, e cada quadro do movimento que ele fará será único. Essa técnica é perfeita para os protetores de tela de jogos no estilo do inesquecível outro mundo ou flashback. Mas no caso de você precisar criar vários quadros de animação que, quando repetidos, funcionarão em loop (na indústria de jogos, a palavra em inglês é frequentemente usada não a palavra ciclo, mas a palavra loop), e elas serão uma etapa ou execução - o layout é a única solução. Assim, obtemos o primeiro, e espero o último, na definição de publicação de hoje.

Quadros-chave são quadros específicos que o animador define como quadros-chave, entre os quais os intermediários são adicionados.

No entanto, a redação é bastante vaga, não é? Que tipo de quadros específicos são esses? Qual é a sua especificidade? Para mim, deduzi minha própria definição de um quadro-chave.

Quadros-chave são os quadros que melhor descrevem o movimento animado nos momentos-chave individuais no momento desse movimento.

Agora, precisamos definir os quadros-chave na animação acima. Para determinar entre quais "teclas" os quadros restantes da animação serão adicionados, se não estiverem. Obviamente, esse é um quadro de "divulgação máxima" quando uma pessoa dá um passo completo e um quadro em que uma pessoa levanta a perna, prestes a dar um passo ou um quadro próximo a ele. Porque são precisamente essas posições de caracteres no espaço que descrevem o passo da melhor maneira possível. Esta é a intenção de dar um passo (perna do pé) e, na verdade, o próprio passo em toda a sua glória. Portanto, se você selecionar dois quadros da nossa lista de silhuetas, os quadros-chave serão o primeiro e o sexto quadros, do exemplo acima.


Capítulo I. Fig. 6 - Dois quadros designados como chave. À esquerda está em cores. À direita na versão "preto e branco". É claramente visto na imagem que a opção esquerda parece amassada, enquanto a opção direita, quando reduzida e adequadamente limpa, pode resolver o problema apresentado no capítulo.

No primeiro, uma pessoa começa a derrapar; no segundo, ele está na posição mais aberta que caracteriza bem o passo completo. E se a versão colorida não nos convém, devido à sua inferioridade, encontraremos o preto e branco calorosamente e de maneira amigável. Porque foi ela quem resolveu o nosso problema. Sem cores, luz e sombra, não há como avaliar um objeto no espaço. Não há membros esquerdos ou direitos, não há objetos mais próximos do observador ou distantes - há apenas uma silhueta.

Agora armados com pelo menos um conhecimento superficial do pessoal-chave, retornaremos a nossos amigos e, ao mesmo tempo, riremos de nós mesmos e de nosso dilema. Ou seja, a animação de imagens de duas cores em dois quadros. Como no nosso caso, os dois quadros, por definição, serão fundamentais. Pelo menos por causa da falta de outro pessoal!


Capítulo I. Fig. 7 - Animação de dois quadros feita de olho nos quadros da Fig. 6

Nós lidamos com a tarefa. Temos animação de dois quadros em uma variedade de duas cores. No entanto, vale ressaltar que isso só foi possível devido à restrição de cores. Porque qualquer detalhe (cor, luz ou sombra) no personagem que ultrapassa a silhueta colocaria tudo imediatamente em seu lugar, e ficaria claro que a solução que criamos não passava de uma ilusão. Por diversão, criei sete réplicas do mesmo homem. Não apenas porque, com a ajuda deles, pode ser demonstrado que até “caracteres em dois quadros” podem ser diferentes na mesma categoria de peso. Mas provavelmente porque eu queria dizer isso graças à banda “Hanggai”, cuja composição “The Vast Grassland” compus esta parte do Gallop por várias horas, e que ainda me mantém à tona.

Ao mesmo tempo, este exercício teve como objetivo informar ao leitor que você pode sair de muitas, se não de todas as situações. Para fazer isso, sente-se e encontre uma solução. Seja criativo. Entenda o que uma pessoa pode fazer em uma determinada situação e o que ela não pode.


Capítulo I. Fig. 8 - Um esboço emocional que demonstra a diferença entre os personagens, alterando a espessura dos objetos, alterando grupos de pixels, alterando a força - para dar ao personagem um personagem diferente. Considerado um pequeno tributo à banda Hanggai .

Capítulo II - Tricolor

- Talvez três xelins sejam melhores? E o nome ... caramba.
Capitão jack sparrow

Para começar, não estamos falando de patriotismo. O título do capítulo definiu de maneira breve, mas sucinta, nossa tarefa futura. Três quadros para uma animação de uma etapa ou qualquer ação e ... três cores. Já mais rico, mais interessante, mas, como em qualquer outro lugar, existem algumas nuances. É sempre bom quando o número de quadros é múltiplo. Ele levantou a perna duas vezes, deu um passo completo duas vezes e assim por diante. Seria lógico usar quatro quadros, certo? Mas é muito mais interessante para nós (para ser mais exato comigo) nos torturarmos a fim de chegar à essência dos fenômenos. Para entender o que fazer em certos casos.

Além disso, lembrei-me de um detalhe engraçado. É uma restrição ao número de quadros por animação usada e ainda usa o mecanismo RPG Maker (em várias de suas versões). Eu não entendo as razões para tais decisões tomadas pelos desenvolvedores (e não foram poucas), devido a alguma lógica estranha e alienígena. Mas isso me convém como um tipo de desafio e a oportunidade de ilustrar outra ilusão que criaremos com você. Agora mesmo.

Então ... nós temos três cores. Portanto, além da cor de fundo, já existem duas no nosso arsenal. Até duas cores que podemos usar ao desenhar um personagem. Assim, podemos dividir nossa imagem em mais clara e mais escura. E isso significa que teremos volume em nossa silhueta e teremos membros que estarão mais próximos do observador e mais distantes dele, o que em teoria nos dará o resultado que precisamos para resolver o problema.

Vamos começar com quadros-chave. Com um pé inserido para um passo, e quadros de um passo completo, onde nossas pernas se afastam ao máximo. Deixe o pé esquerdo estar mais perto do observador e o pé direito mais longe dele, e deixe a pessoa ir da direita para a esquerda. Sem perceber, emitimos TK para a próxima tarefa. Formou-o na forma de texto. Isso sempre deve ser feito para entender pelo menos aproximadamente o que você deseja fazer. Além dos quadros-chave em nosso primeiro esboço, também haverá poses e seções únicas de nosso herói em diferentes versões para uma melhor compreensão da forma e do humor do objeto.


Capítulo II Fig. 1 - Diferentes poses do mesmo personagem executadas para entender seu humor e forma. Eles não precisam corresponder ao que você faz no final. Não há regras estritas para seguir. Mas sempre há uma necessidade de pensar antes de começar o trabalho, e às vezes apenas para sentir alguma coisa.

Decidimos as poses, com uma visão aproximada dos quadros-chave também. Mas, no interesse da investigação, não começaremos animando simultaneamente tudo de uma vez (todas as pernas do punho), mas seletivamente. E solte as pernas primeiro.


Capítulo II Fig. 2 - Ilustração do progresso

No caso do “doublet” anterior, não tínhamos outras cores além da cor do plano de fundo e da própria silhueta. Portanto, não seria possível dividir em primeiro plano e em segundo plano no mesmo objeto. Agora temos uma segunda cor, com a qual fomos capazes de sombrear o fundo, e o principal empurra o primeiro plano para frente. É aqui que finalmente entenderemos que uma etapa, assim como a execução, ou qualquer outra animação em loop nasce da repetição da mesma forma com uma mudança de cor. Usando a mesma silhueta, nos quadros 1 e 3, alteramos as cores das pernas, o que deu origem à ilusão de movimento das pernas direita e esquerda. No segundo quadro, escolhemos uma pose neutra, que esconde a perna o máximo possível no momento de sua entrada, para que não interfira no ritmo geral do movimento.


Capítulo II Fig. 3 - Ilustração do progresso

Tendo feito a mesma técnica com as mãos, descobrimos que nossas ações não só não trouxeram magia ao trabalho, mas também pioraram o sentimento geral da animação que está sendo criada. Existem duas razões para isso. O primeiro é um número limitado de quadros. O segundo é o alcance das mãos. Eles vão além do corpo, e a moldura entre eles não é suficiente para compensar o movimento intermediário. No caso da perna, torcemos inteligentemente, porque do quadril até o joelho ela repete outros quadros, e o que resta fica escondido atrás do pé mais próximo do observador, fundindo-se com o corpo. Com as mãos, esse número não funcionou, eles pareciam se espalhar como galhos de uma árvore em direções diferentes. Por causa do efeito desagradável de cintilação. Não podemos fazer um tiro intermediário de tal maneira que compense adequadamente a posição das duas mãos, porque elas ... estão acenando descaradamente.

O que fazer Para começar a se tornar mais modesto. A onda energética de braços, no caso de três quadros, não brilha para nós. No entanto, estamos bem cientes de que bandidos espertos vivem e trabalham na maioria das indústrias de entretenimento (embora eu prefira o termo ilusionista), que sempre fará o observador acreditar na realidade do que está acontecendo, ou pelo menos tentar enganá-lo com uma ilusão inteligente. Ao comprar outro utensílio desnecessário na casa, eles informam sobre a exclusividade do que compraram, além de oferecerem um cupom com um desconto no próximo item desnecessário, fornecem um chaveiro "elegante" como presente, talvez até enviem mensagens SMS com "recompensas por lealdade" ... talvez , alguns de vocês sairão da loja com consciência de sua própria importância. No cinema, você ficará coberto de efeitos e, se o ator de repente engordar - apenas seu rosto será removido, bem, nas cenas de batalha, eles serão substituídos por um subestudo. E eles farão tudo tão habilmente que você nem notará nada. Tudo isso é uma grande mentira ... uma ilusão. Nosso caminho não é exceção. Vamos aprender e apreciar o trabalho que nos dará longe de resultados ilusórios.


Capítulo II Fig. 4 - Ilustração do progresso

Agora nossa mão esquerda parece bastante decente, e até algo como uma mão real. Bem certo? Sim para o inferno com ela. E eu não estou brincando. Em alguns casos, alguns elementos da imagem devem ser sacrificados em prol da suavidade do movimento. Se você, como pesquisador curioso, estuda os sprites dos protagonistas de jogos passados, ficará surpreso ao ver que às vezes a mão mais distante do observador está ausente ou presente de forma tão implícita que parece que eles simplesmente a esqueceram. Mas somente se você olhar os quadros individualmente. Em estática. Em movimento, você não percebe, ou percebe porque foi apontado para isso.

Também adicionamos um pouco de sombra para enfatizar nossa mão. Ainda assim, uma mão branca em um corpo branco parece bastante discreta. A segunda cor, suavemente a sombreamos para que fique visível.


Capítulo II Fig. 5 - Ilustração do progresso

Ainda podemos usar a mão direita. Mas pessoalmente, eu prefiro não. Nesse caso em particular. Bem, o próximo item do programa para nós será uma mudança na altura do personagem. Com o "moonwalk" você pode terminar, como vimos que os formulários que selecionamos são suficientes para criar nossa primeira animação. O fato é que o movimento principal é melhor executado sem animações secundárias, para que elas não interfiram no seu trabalho e permitam que você se concentre diretamente na etapa, na execução ou em qualquer outra animação que você queira fazer. Assim, primeiro você fará a animação básica e básica. E depois vá para os detalhes, para animações secundárias, mas não necessárias.


Capítulo II Fig. 6 - Ilustração do progresso

Ao deslocar um pixel verticalmente na zona neutra, obtemos um efeito de manobra ou ... saltando. Escolha por si mesmo o que melhor lhe convier. No caso de uma etapa completa, uma pessoa geralmente é um pouco mais baixa, no caso de um rack com uma perna derrapada ... mais alto. Uma mudança de apenas um pixel torna nossa caminhada mais real e mais animada. Proponho não insistir nisso. Lembre-se, eu mencionei "12 princípios de animação"? Um desses princípios é criar uma característica expressiva no personagem.


Capítulo II Fig. 7 - Ilustração do progresso

No total, adicionamos alguns pixels ao personagem com dinâmicas adicionais que precisamos tanto para dar vida ao personagem. No caso do movimento das pernas, tentamos fazer um movimento síncrono. Aqui seguiremos o caminho oposto e adicionaremos aos elementos de caráter do movimento assíncrono, únicos em todo o perímetro da zona mutável, em cada quadro individual.


Capítulo II Fig. 8 - Ilustração do progresso

Assim como na quarta imagem - vamos sombrear o penteado do personagem. Nós não o animaremos. Basta adicionar sombras onde ela possa ser projetada pelos cabelos. Ao criar a sombra, devemos ter cuidado. O equilíbrio é importante em todos os lugares, e sombra excessiva pode arruinar nossos resultados. Não há esquemas universais para criar detalhes tão pequenos. Improvisação é importante. Faça a si mesmo a pergunta "e se?" e sinta-se à vontade para tentar algo novo. No final, apagar uma dúzia de pixels com falha não é tão difícil. E desde que começamos a nos fazer perguntas ... e se adicionarmos um pouco mais de sombra ao personagem para enfatizar o braço ainda melhor enquanto nos movemos?


Capítulo II Fig. 9 - Ilustração do progresso

Mal disse o que fez. A única coisa a cuidar é que a sombra se move suavemente e sem sobressaltos. Ou seja, sua mudança em relação ao quadro anterior e ao próximo não deve exceder um pixel. Se a animação tiver uma mudança acentuada no claro-escuro - isso é ruim para a suavidade geral do movimento. Você pode ver facilmente por si mesmo criando seu próprio homenzinho. Espero que este material o ajude.


Capítulo II Fig. 10 - Ilustração do progresso

Adicionamos outro detalhe expressivo, assim como anteriormente animamos o cabelo do personagem. Agora esse detalhe se tornou a gola da jaqueta. Podemos dizer que alcançamos o resultado estabelecido. Fizemos uma animação de personagem em três quadros físicos usando três cores. O cara encontrou a vida e está pronto para se retirar para o deserto. Para aumentar suas chances de sobrevivência, daremos a ele um rifle, uma mochila com suprimentos e passaremos para o próximo capítulo. É verdade, com um pequeno bloco de notas.


Capítulo II Fig. 11 - Ilustração do progresso

Nota: A mochila é exatamente como o cabelo e a borda da jaqueta se move de forma assíncrona. Além disso, eles se movem na antifase. Se você olhar atentamente, notará que a parte superior da mochila com a alça não se move da mesma maneira que a borda da jaqueta. Com esses elementos com diferentes dinâmicas de movimento, você torna a silhueta do objeto única. Especial. Em todo o seu perímetro. E, apesar do princípio de layouts baseados em quadros-chave e criação de um ciclo ser usado para criar animação, alguns dos elementos do personagem são eliminados do esquema geral, atraindo a atenção do observador. É disso que precisamos.

Seria feio para mim não visitar um velho conhecido. O mesmo princípio que usamos acima foi usado para um jogo pós-apocalíptico, que, infelizmente, nunca viu a luz do dia. Os sprites foram feitos especificamente para o RPG Maker, com essa estranha limitação de três quadros em uma sequência. O jogo não se tornou realidade, mas temos material educacional, o que significa que o trabalho não foi mais em vão.
É claro que o movimento do personagem é mais do que um passo que lembra o embaralhamento e, em alguns momentos, até a dança russa, mas, no entanto, ele se move, o que também leva a outro pensamento. Ao trabalhar em um número limitado ou pequeno de quadros, você não deve ter medo de caracteres grandes em termos de tamanho de pixel. Eles também têm direito à vida.


Capítulo II Fig. 12 - Um personagem feito com parâmetros idênticos à tarefa do capítulo para o projeto pós-apocalíptico com falha "Finder". Usado na versão demo criada no mecanismo do RPG Maker.

Tas (oh deus, e esse aqui com nome) também usa três quadros. Dois degraus largos e uma estrutura intermediária com um pé derrapado. O amplo degrau é redesenhado duas vezes com a mudança de luz e sombra. O pé derrapado é mascarado e é feito para não atrapalhar o ritmo geral com sua aparência, mas para mantê-lo. Em seguida, os detalhes das características são aplicados à imagem. Por exemplo, ao caminhar para a esquerda, fios cinzentos são visíveis na cabeça e há um relógio em uma das mãos. Uma simples imagem no espelho já resolveu o problema de mover para a esquerda e para a direita.

Mas e os detalhes? Essas pequenas coisas que tornarão seu personagem especial? O que dirá ao observador quanto amor e atenção aos detalhes você coloca no personagem? Não os negligencie, e ele será grato a você por isso. Vinte minutos de trabalho, além do que já foi feito, não o sobrecarregarão, mesmo que você precise fazer vinte desses personagens, e adquirir na forma de simpatia do público ... vale muito.

Capítulo III - O Sinal de Quatro

- Você não ganhou, você trapaceou! Em uma luta justa, eu apunhalaria você!
- Bem, então, lutar honestamente claramente não é motivo.
Diálogo Will Turner e Jack Sparrow

Também iniciaremos nosso terceiro capítulo com uma declaração do problema. Deixe a animação ter quatro quadros. Continuaremos a avançar em direção aos quadros gradualmente, de forma incremental. No entanto, em termos de cores, não seremos tão severos. O tempo de jejum acabou. Já percebemos que a fome e a abstinência são úteis para entender a essência das coisas e a falta de excesso de peso. Mas ... e as orgias? Que pelo menos dezesseis cores sejam colocadas sobre a mesa, pois desejamos um banquete! Também concordamos que, se nossa gula for longe demais, não vamos chorar, observando a dieta "trinta e dois".

Antes de cairmos no êxtase da gula, vale a pena completar nossos termos de referência. Até agora, fizemos animações exclusivamente em vista lateral. Passar por Tas nos estragou todas as framboesas, dizendo e mostrando que em vários jogos os personagens podem andar não apenas para a esquerda ou para a direita. Portanto, desejamos que nosso personagem também suba e desça. Para se divertir, para se divertir. Que o nosso kit não seja pior do que em Stardew Valley.


Capítulo III Fig. 1 - Esboços emocionais, como parte da busca pela imagem do personagem futuro. Eles podem ser executados como você gosta, em qualquer tipo e estilo. A tarefa deles não é desenhar no estilo pixel art, mas tatear essas emoções, a imagem que você precisa.

: - . . , , . , , , – . -. . , – . . , , , — - , .

. , , ( ) - , -, . … . , . – . , , , . – , , , , . – , , . – .

Começamos com poses simples, que, em essência, são quadros-chave futuros. Eles terão que passar por alguma limpeza. Porque precisamos da essência das coisas e do ponto de partida. No interesse de entender os processos, devemos passar do mais simples para o complexo, mas não vice-versa.

Vamos concordar que os elementos de nossos primeiros quadros serão divididos em matrizes de duas cores. Esses mesmos primeiro plano e plano de fundo, onde o primeiro plano do objeto serão os braços e as pernas mais próximos do observador, e o plano de fundo serão os braços e as pernas mais distantes do observador. O close-up será mais claro, mas mais escuro. E finalmente, é hora de trapacear. Porque precisamos - apenas um passo. O segundo passo será uma cópia do primeiro alterado alterando as cores. Ou seja, apenas repintamos os braços e as pernas, sem tocar na silhueta. Isso será válido tanto para a vista lateral quanto para a dianteira e traseira. No caso do último mencionado, simplesmente fazemos uma cópia espelhada da mesma etapa. Parece um pirata, então vamos começar.


Capítulo III Fig. 2 - Ilustração do progresso.

Exatamente, como combinado. Um par de flores no rosto, um par na jaqueta e um par na calça. A tampa ainda não é impressionante, mas não de uma só vez. Os tênis também são divididos em duas cores, de acordo com o conceito de objetos próximos e distantes do observador. Portanto, sem hesitação, corremos mais longe. Vamos começar a conjurar com sombras. Enfatizamos o boné com uma cor mais escura, deixamos a jaqueta do herói mais arrumada (vamos, aliás, dar a ele o mesmo nome que os caras anteriores) e adicionar um buraco atrás do boné.


Capítulo III Fig. 3 - Ilustração do progresso.

Agora vamos fornecer detalhes adicionais ao rosto de Joshua. Divida a tez e a barba com uma cor intermediária. Por isso, ficará mais atraente e volumoso. E, ao mesmo tempo, como no início do artigo, vamos esperar. Não é um rosto, mas um personagem. Pelo contrário, a perna dele. Esperando a perna. O tênis impacientemente batendo indica claramente isso. Apenas um pixel e o personagem central deixam de estar mortos. Que ele nos entretenha, como o resto da ação.


Capítulo III Fig. 4 - Ilustração do progresso.

Suponha que a luz caia de cima, um pouco em ângulo, e ajude o volume da jaqueta, adicione sombras que projetam as mãos e, ao mesmo tempo, faça as próprias mãos. Punhos um tanto corajosamente cerrados.


Capítulo III Fig. 5 - Ilustração do progresso.

A próxima mudança será pequena, mas bastante significativa. Deixe uma camiseta ou camiseta por baixo do casaco. Apenas uma cor quebrará o reino sombrio de duas cores, aumentando a legibilidade de Joshua na área.


Capítulo III Fig. 6 - Ilustração do progresso.

O rosto do nosso cara é de longe a parte mais imóvel do objeto. Ele oscila para cima e para baixo, mas não altera sua topologia. Para que possamos trabalhar de tal maneira que seja final. Bem no estágio inicial do esboço.


Capítulo III Fig. 7 - Ilustração do progresso.

Agora vamos fazer a mágica. Sem prestar atenção a detalhes específicos, será bastante difícil ver as diferenças entre a versão anterior e a subsequente. Mas eles definitivamente são. A mesma forma das mãos ganha vida devido à mudança de cores. Sem alterar a forma do objeto - alteramos sua cor. Quanto mais próximo o objeto está do observador, mais brilhante é, mais distante, mais escuro. Este é um ponto de virada no nosso trabalho. Agora temos que pôr em prática a mesma técnica com o resto do corpo. No entanto, não vamos nos antecipar.


Capítulo III Fig. 8 - Ilustração do progresso.

Você não acha que o limite do personagem principal que vem em nossa direção parece estranho? Pessoalmente, isso me lembra um limite estereotipado para personagens não menos estereotipados que gostam de inserir em comédias baratas, a fim de criar uma imagem de terceira categoria de um georgiano que há muito tempo não está em contato com a realidade (e correspondeu de alguma forma)? Vamos consertar. Adicionando luz a ele. E, ao mesmo tempo, desde que começamos a trabalhar com Sveta, adicionamos sombras nas pernas de Joshua. Quanto mais longe a perna, mais escura. Afie as cores na área das sombras, para que o personagem se torne mais volumoso das perspectivas, de onde ele vem até nós, e de nós, em particular.


Capítulo III Fig. 9 - Ilustração do progresso.

Se já começamos a nos deliciar com a irmã Shadow, deixe-a se abrir em toda a sua glória. Deixe a cabeça, como deveria ser, lançar uma sombra sobre o corpo. E deixe a jaqueta abaixo também ter uma sombra, e deixe as mãos balançando desleixadas, também pecam com ela. Nós até enfatizamos o colar na vista traseira. Uma linha pequena é suficiente, e sua mudança dentro dos quadros dos quadros vizinhos por apenas um pixel criará a ilusão de um colar móvel.


Capítulo III Fig. 10 - Ilustração do progresso.

Assim como já fizemos isso com as mãos, vamos usar o tênis. Na vista à esquerda e à direita, simplesmente adicionamos um pixel na ponta do tênis mais próximo do observador. Algo como um brilho. Mas na vista traseira e vista frontal - tem que trabalhar.


Capítulo III Fig. 11 - Ilustração do progresso.

Como as mudanças, mesmo com um aumento, são praticamente invisíveis, fiz uma seção ampliada dessa zona. À esquerda, o que aconteceu antes de começarmos a adicionar luz e sombra aos tênis, e à direita, o que obtivemos como resultado. Parece um detalhe insignificante, um punhado de pixels. Mas, acredite, é a partir de tais insignificâncias que a imagem é formada. Das pequenas coisas ao nosso redor, absolutamente tudo é inventado. Um punhado de pequenas coisas à sua volta na mesa pode dizer mais sobre você do que você, bem, e fazer uma bagunça rara ao mesmo tempo.


Capítulo III Fig. 12 - Um exemplo ampliado de animação mudando de cor. Nas mãos, a forma do objeto não muda, mas apenas a cor muda para transmitir o movimento do objeto no espaço. Os tênis usam a mesma técnica. É claramente visto que mesmo um pixel colocado corretamente faz o sapato parecer dobrar.

É hora de brincar com os formulários. Primeiro, vamos enfatizar entre o caso a sombra que a jaqueta da calça lança. Faremos isso em uma linha para separar claramente a jaqueta da calça. E o que é muito mais interessante, faremos com que a jaqueta se comporte como deveria. Antes disso, ela "nos agradou" com um log de graça, que gira em torno de seu eixo, sem reivindicar mais. Se isso é tudo o que uma jaqueta de couro é capaz, então não estou impressionado.


Capítulo III Fig. 13 - Ilustração do progresso.

Uma questão completamente diferente. Não é tão embaraçoso quanto antes. No entanto, nosso rosto ostenta luz e sombra, transmitindo informações sobre o volume, e a jaqueta parece uma mancha plana, embora com uma sombra. Por que não adicionar um pouco de luz aos seus ombros? Se assumirmos que uma cor é a cor principal do objeto e a segunda cor é a cor da sombra, por que não há cor responsável pela luz? Vamos consertar essa omissão. Não esquecendo o boné. Já é hora de dividi-lo por cores para separar o pico da parte vertical.


Capítulo III Fig. 14 - Ilustração do progresso.

Agora estamos começando a andar como uma pulga tentando "consertar" nossas próprias omissões. Mas, de fato, adicionamos iterativamente mais e mais detalhes à imagem, continuando a trabalhar com luz e sombra. E cada nova iteração nos diz onde temos espaços vazios, onde é melhor adicionar algo, para que o personagem pareça vantajoso em comparação com o resultado anterior. É hora de adicionar uma sombra à camiseta e, ao mesmo tempo, melhorar as calças, fornecendo-lhes uma sombra adicional (ou seja, reforce a sombra atual adicionando cores mais escuras a algumas partes da imagem), o que permitirá que você mova as pernas ainda mais longe do observador, forçando Joshua a trabalhar com os quadris.


Capítulo III Fig. 15 - Ilustração do progresso.

Como costuma acontecer, um puxa o outro. Após o aparecimento da luz no objeto, fica claro que algumas partes do personagem parecem vazias. Vamos adicionar o cocar do carteiro ao seu boné. Com o mesmo sucesso, poderia ter sido outro distintivo, mas presumiremos que é exatamente isso que as regras do carteiro se parecem na arte pixel. Não vou me esconder, quase tudo o que faço está de alguma forma ligado ao pós-apocalíptico. Vamos chamar de mais uma dedicação ao "Carteiro", de Kevin Costner, a quem eu tenho uma certa fraqueza (quantos deles eu tinha, esses carteiro!).


Capítulo III Fig. 16 - Ilustração do progresso.

E quanto mais novos detalhes aparecerem, mais claramente será solicitada a continuação do trabalho com luz e sombra. Parece-me que uma jaqueta nas vistas traseira e frontal deve ser especialmente útil. Como sempre. Apenas um punhado de pixels. E já que resolvemos um pouco, assumindo o fim do caminho - vamos adicionar um remendo no ombro dele. Lembra do Tas? Faremos o mesmo truque. Existe um patch por um lado, mas não por outro. Estojo para dois pixels!


Capítulo III Fig. 17 - Ilustração do progresso.

Lembrando que os animadores da Disney adicionam um detalhe expressivo. E nós, nesse caso, não nos importamos com as críticas eternas que se seguem, além do mais, de que os visores dos bonés não balançam assim. Nós precisamos de uma imagem. Vivo. Móvel. Vida respirável sempre que possível.


Capítulo III Fig. 18 - Ilustração do progresso.

Um detalhe duvidoso, para ser honesto. No entanto, você sempre pode corrigi-lo do seu jeito. Por exemplo, adicionando uma bolsa de carteiro, trocando calças de moletom estranhas por calças uniformes e enfiando um boné de verdade na cabeça. Não há limite para a fantasia. Não há obstáculos no processo de sua improvisação.


Capítulo III Fig. 19 - Quadros individualmente

Quatro perspectivas mostram bem que o uso de quadros é mínimo (quatro quadros) para cada sequência. Dois quadros são usados ​​para cada etapa. Os próximos dois quadros são cópias espelhadas desta primeira etapa com claro-escuro redesenhado e elementos que ajudam a ocultar a reutilização dos dois primeiros quadros. Eu diria que essa é a economia máxima possível, com o alcance visual mais eficaz.

Esses personagens podem se tornar os ossos de qualquer projeto, facilitando para os animadores. É muito mais fácil fazer sequências de quatro quadros do que animações de seis ou oito quadros. É muito mais fácil criar elementos substituíveis para ocultar a duplicação dos dois primeiros quadros do que desenhar roupas realmente únicas.

Obviamente, se o projeto tiver meios para criar animações e personagens únicos. Mas, como mostra a prática, o desenvolvedor sempre tenta salvar. Afinal, economizar em um lugar significa lucro em outro. E nem sempre há dinheiro suficiente.


Capítulo III Fig. 20 - A versão final do Postman.

Não há por que desbloquear e dizer que o trabalho de "Little Big" com a composição "Skibidi" não teve efeito na última animação. Como todo mundo, sou constantemente influenciado por ferramentas poderosas como som e vídeo. Cerca de quinze anos atrás, decidi que não queria ter nada a ver com coisas como televisão e transmissão televisiva. No entanto, existe uma rede e o YouTube também. De tempos em tempos, sou coberto por uma onda de obras musicais populares, filmes ou séries de televisão.

Capítulo IV - Sinopse Opcional

Hora de fazer um balanço da corrida de hoje. Vamos tentar descrever brevemente o que está oculto sob uma pilha de fotos que acompanham este artigo. De uma forma ou de outra, encontramos os seguintes conceitos:

Layouts. O método de criação de animação por meio de quadros-chave com renderização adicional entre eles, quadros intermediários na quantidade necessária para o autor.

Movimento faseado direto. O método de criação de animação do primeiro quadro ao final, com a conclusão de cada quadro subsequente manualmente, de acordo com a intenção do autor.

Quadros principais. Quadros que melhor descrevem o movimento animado em momentos-chave separados no tempo desse movimento, entre os quais os quadros intermediários são desenhados.

Animação espelhando um objeto. , .

. , , .

V –

O objetivo desta publicação era criar animações, começando de duas e terminando com seqüências de quatro quadros, a fim de se preparar para o acorde final “Pixel de galope”. Sem dúvida, um fenômeno como a pixel art pode ser discutido infinitamente, exatamente, como qualquer outro fenômeno artístico. Todos os dias existem novas soluções, métodos de automação e estilos que afirmam ser novos. É impossível acompanhar tudo, e é impossível descrever tudo o que está acontecendo ao redor. Portanto, minha tarefa que vejo é focar nos aspectos básicos e públicos que o ajudarão a preparar um pixel muito diferente, tanto para a alma quanto para uso comercial.

Com essas lições simples e com alguma prática, você pode criar gráficos que parecerão apropriados em jogos da classe "Stardew Valley" ou "Starbound". Obviamente, esse curso pode não ser suficiente se você estiver ameaçado com "Another World" ou "Flashback".

Ao mesmo tempo, esses marcos básicos serão suficientes para dispersar a tripulação por sua própria inspiração ou para acender a pólvora, que arde há muito tempo, de conquistas futuras. Um pouco de prática, e você pode fazer coisas semelhantes, pois é realmente ... simples. O principal é querer, não parar e avançar em direção ao seu objetivo. Ou, se não houver desejo de fazer algo, mas se houver interesse no tópico, pelo menos seja capaz de manter uma conversa na cozinha, se isso acontecer, sobre um fenômeno tão maravilhoso como a pixel art.

Em um futuro próximo, está planejado o lançamento do artigo final “Gallop Pixel”, que marcará o final do ciclo base e a transição para o chamado DLC. Por DLC, quero dizer artigos relacionados a pixel art e tópicos reveladores não incluídos no curso básico. Depois de tantos anos, ainda quero pôr um fim à história. Pelo menos um dos meus projetos de redação nos últimos anos seja concluído.

No final do epílogo, gostaria de expressar minha gratidão aos meus clientes de Patreon, meu caro PP, que me apoiou por dois anos. Quero expressar minha gratidão a eles por sua paciência, porque o trabalho na Dark Crystal Games que de repente me engoliu e vários problemas de saúde me impediram de fazer esse negócio com a devida diligência. E acrescentarei que descrever em palavras as emoções que elas me dão com o apoio delas e, portanto, as emoções diretamente relacionadas ao lançamento do novo capítulo de "Galope" - não funcionarão. Portanto, direi simplesmente - Obrigado por ser!

Gronkh, Igor Gritsenko, Matei "Retronator" Ian, Kalam, Howie Day, Ben O'Neill. Pavel Bartchuk, Gleb Rukashnikov, Alexander “La Bestia” Andreev, Ross Williams, Paddle Poe, Stas Galyunas, X-Rust, Echo_Memoria, Nikolay Izoderov, Anton Reshetnikov, Oleg, Fernando Ezra (Fernando Esra) , Konstantin Epishev, Tanya Veksell, LilBrutha É

isso aí. Vejo você do outro lado da lua (piscadela).





Data da última edição no artigo: 30/03/2018 Hora: 10:46

• Edições ortográficas
• Os quadros estáticos do The Postman foram adicionados no final do terceiro capítulo para enfatizar o trabalho mínimo necessário para criar esse ativo, com os comentários correspondentes.
• « » Project Serenity, Project Serenity: Finder . — II- . .
• «» .
• . .
• . « »
• . .
• - . .