Blog Metlivi

Como Animar a Opacidade de uma Sombra Mascarada em uma Parte de Personagem Deformável

Para animar uma sombra mascarada em uma parte de personagem deformável, dê à sombra sua própria arte, faça-a seguir a deformação da parte e anime sua opacidade independentemente. A máscara define onde a sombra pode aparecer; a opacidade da sombra define com que força ela aparece.

Este passo a passo é para um criador de personagens 2D que já tem uma parte deformável e quer que seu sombreamento desapareça suavemente sem deslocar ou alterar a arte base. Ele usa o fluxo de trabalho de parâmetros do Live2D Cubism, depois explica os controles equivalentes no Spine.

29 de outubro de 20267 min de leituraPor Metlivi Editorial Team
Seção 1

1. Separe a sombra, o limite e os controles de movimento

Antes de adicionar animação, identifique três elementos: a arte base, uma sobreposição de sombra separada e a deformação que move a parte. Para uma configuração ilustrativa, chame-os de PartBase, PartShadow e PartWarp. Esses nomes são sugestões organizacionais, não objetos nativos.

Selecione o ArtMesh da sombra e inspecione seus campos Deformer, Clipping ID, Draw Order e Opacity. O Cubism expõe essas como propriedades separadas, para que você possa verificar anexação, mascaramento, ordenação de camadas e transparência individualmente. Coloque a sombra acima da arte base na ordem de desenho e dê a ela opacidade suficiente temporariamente para inspecionar claramente. Live2D: Paleta Inspector

Decida o que a opacidade deve significar antes de configurá-la. Se a sombra deve sempre escurecer em uma curvatura específica, vinculá-la a esse movimento pode ser apropriado. Se você precisa desvanecê-la mantendo a mesma pose, use um parâmetro de sombra independente. Os passos a seguir usam esse controle independente.

Seção 2

2. Faça a sombra seguir a parte deformável

Coloque PartBase e PartShadow abaixo do warp deformer que fornece seu movimento compartilhado. Os warp deformers do Cubism podem deformar múltiplos objetos filhos juntos, o que os torna úteis para manter uma sobreposição anexada à arte subjacente. Crie ou redimensione o deformer para acomodar a arte em todo o seu movimento pretendido. Live2D: Warp Deformer

Teste a deformação com a opacidade da sombra constante. Mova de uma pose extrema para a outra e inspecione o meio. Observe características reconhecíveis: a borda curva da sombra permanece ao lado do mesmo contorno, e sua extremidade estreita permanece anexada à mesma área?

Um pai compartilhado lida com a deformação que esse pai aplica. Ele não estabelece que edições separadas de vértices no ArtMesh base também foram reproduzidas na sombra. Se a sobreposição se desloca, inspecione como cada objeto está realmente sendo moldado. Como decisão de rigging, mova o movimento compartilhado para o deformer comum onde for prático, ou ajuste as próprias formas da sombra para seguir a base.

Seção 3

3. Recorte a sombra à silhueta da parte

Selecione PartBase e copie seu ArtMesh ID. Selecione PartShadow e cole esse ID no campo Clipping ID da sombra. Isso torna o ArtMesh base a fonte de recorte e a sombra a arte recortada. Deixe Máscara Invertida desligada para uma sombra comum contida dentro da parte. Live2D: Máscara de Recorte, Live2D: Paleta Inspector

Use este teste prático de limite: deixe a arte da sombra se estender ligeiramente além da silhueta base, então esfregue a deformação. O resultado recortado deve permanecer dentro do limite pretendido. Isso separa um problema de mascaramento de uma sobreposição que simplesmente termina cedo demais.

Recorte e deformação resolvem problemas diferentes. Um limite correto pode ocultar arte excedente enquanto a forma interna da sombra ainda se desloca. Verifique tanto a silhueta externa quanto a posição da sombra dentro dela antes de prosseguir.

Seção 4

4. Crie um parâmetro independente de opacidade da sombra

Crie um parâmetro regular chamado ShadowOpacity, com mínimo 0, padrão 0 e máximo 1. Essa faixa é uma escolha de design ilustrativa. Parâmetros do Cubism têm valores mínimo, padrão e máximo configuráveis, e suas formas registradas interpolam entre chaves. Live2D: Sobre Parâmetros

Para um ArtMesh de sombra sem keyforms de pose existentes, use este procedimento:

  1. Selecione PartShadow.
  2. Selecione ShadowOpacity na paleta Parâmetro.
  3. Use Adicionar 2 Keyforms e confirme chaves em 0 e 1.
  4. No valor do parâmetro 0, defina a opacidade do Inspector da sombra para 0%.
  5. No valor do parâmetro 1, defina sua opacidade para um máximo ilustrativo de 40%.
  6. Esfregue entre as chaves e confirme que apenas o sombreamento pretendido muda.

O procedimento de keyform documentado do Cubism começa selecionando o objeto, selecionando seu parâmetro e adicionando duas ou três keyforms. Aqui, a propriedade editada é a opacidade do ArtMesh selecionado. Mantenha a arte base não selecionada ao fazer essas alterações. Live2D: Adicionar/Excluir Chaves de/para parâmetros, Live2D: Paleta Inspector

Para uma sombra que já tem várias keyforms de pose, considere inserir um deformer dedicado apenas acima da sombra e atribuir o parâmetro de opacidade lá. Essa hierarquia sugerida mantém o controle de desvanecimento separado das edições de forma existentes da sombra. Deformers do Cubism suportam ajustes de opacidade, bem como deformação. Live2D: Warp Deformer

Seção 5

5. Anime o parâmetro ao longo do tempo

Salve o modelo, carregue-o em uma cena de Animação e expanda o grupo Live2D Parameters da trilha do modelo. Em cada frame desejado, insira um valor para ShadowOpacity. O Cubism cria chaves na linha do tempo quando você altera valores de parâmetros, e a reprodução interpola entre essas chaves. Live2D: 6. Criando Animações

Para um teste ilustrativo de 30 fps, use os seguintes valores. Eles descrevem um fade in, uma breve pausa e um fade out; não são tempos prescritos.

Frame Valor ShadowOpacity Resultado pretendido
0 0 Sombra ausente
12 1 Sombra atinge seu máximo configurado
24 1 Sombra permanece no máximo
36 0 Sombra desaparece

Anime a deformação da parte no mesmo intervalo. Então repita o desvanecimento mantendo a parte em sua pose mais comprimida. Testar esses separadamente facilita identificar se uma mudança indesejada vem da forma ou do desvanecimento.

Abra o Editor de Gráfico para inspecionar a transição do parâmetro e ajustar seu tempo. Também certifique-se de que a trilha do modelo e a área de trabalho de reprodução cubram todo o teste; o tutorial de animação do Cubism explica que uma trilha mais curta pode fazer o modelo inteiro desaparecer antes do fim da cena. Live2D: 6. Criando Animações

Seção 6

6. Diagnostique opacidade inconsistente e artefatos de borda

Use esta ordem de diagnóstico antes de adicionar mais chaves. É uma sequência prática derivada dos controles separados acima.

Sintoma Primeira verificação Próxima ação
Arte base também desvanece Objeto selecionado e filhos controladores de opacidade Restrinja o controlador à sombra
Sombra se desloca durante a curvatura Deformação compartilhada e edições de malha separadas Corrija o movimento antes de mudar a opacidade
Força da sombra muda entre keyforms de pose Opacidade armazenada em keyforms existentes Inspecione essas formas por valores não intencionais
Sombra vaza fora da parte Clipping ID e disponibilidade da máscara Restaure a fonte de recorte pretendida

Quando keyforms existentes contêm valores de opacidade inconsistentes, a função Edição de Múltiplas Chaves do Cubism pode editar em lote a opacidade em um intervalo selecionado. Selecione apenas as formas que devem compartilhar um valor, habilite Opacidade e revise os objetos afetados antes de aplicar. Preserve diferenças intencionais em vez de sobrescrever toda forma indiscriminadamente. Live2D: Função Edição de Múltiplas Chaves

Para uma borda pálida, inspecione a borda translúcida da máscara. O Live2D documenta uma solução alternativa usando uma máscara duplicada ampliada, com sua opacidade exibida em 0%, transformada junto com a original. Também verifique keyforms de extremidade ausentes e fontes de máscara ocultas quando o recorte libera inesperadamente. Verifique a aparência exportada no renderizador pretendido porque o comportamento da máscara pode variar por implementação. Live2D: Máscara de Recorte

Seção 7

7. Aplique a mesma separação no Spine

No Spine, anime o alpha do slot da sombra através de sua propriedade Color. A cor do slot controla a opacidade do anexo e pode ter chaves; a cor separada do anexo não pode ter chaves. Mantenha a sombra em seu próprio slot para que o desvanecimento afete a sobreposição pretendida. Guia do Usuário Spine: Slots

Para o limite, crie um anexo de recorte ao redor da parte. Organize a sombra dentro de seu intervalo de recorte e defina explicitamente Slot final: o recorte se aplica através desse slot inclusive. O polígono de recorte pode seguir ossos através de pesos, e suas posições de vértice também podem ser animadas. Esse limite precisa seguir a deformação independentemente da animação de alpha da sombra. Guia do Usuário Spine: Anexos de recorte

Se a sombra permanecer ausente após desvanecer, o Spine recomenda ocultar seu anexo com uma chave de anexo de slot após atingir a transparência. Alpha zero sozinho ainda pode incorrer em trabalho de desenho. Para uma sombra que desvanece de volta, restaure o anexo antes de seu desvanecimento visível começar. Guia do Usuário Spine: Slots

Finalize testando a sombra em opacidade zero, parcial e máxima na pose neutra, ambos os extremos de deformação e poses intermediárias. Uma configuração funcional permite alterar a força da sombra preservando sua colocação e limite durante o movimento.

Seção 8

Fontes

Leituras relacionadas

Continue explorando o tema