Metlivi-bloggen

Så animerar du opaciteten för en maskerad skugga på en deformerande karaktärsdel

För att animera en maskerad skugga på en deformerande karaktärsdel ger du skuggan ett eget teckningsmaterial, låter den följa delens deformation och animerar dess opacitet oberoende. Masken bestämmer var skuggan kan synas; skuggans opacitet bestämmer hur starkt den syns.

Den här genomgången riktar sig till en 2D-karaktärsskapare som redan har en deformerande del och vill att dess skuggning ska tonas ut mjukt utan att glida eller ändra grundmaterialet. Den använder Live2D Cubisms parameterarbetsflöde och förklarar sedan motsvarande kontroller i Spine.

29 oktober 20267 min läsningAv Metlivi Editorial Team
Avsnitt 1

1. Separera skuggan, gränsen och rörelsekontrollerna

Innan du lägger till animering identifierar du tre element: grundmaterialet, ett separat skuggöverlägg och deformationen som flyttar delen. I ett exempel kan du kalla dem PartBase, PartShadow och PartWarp. Namnen är förslag på organisation, inte inbyggda objekt.

Markera skuggans ArtMesh och granska fälten Deformer, Clipping ID, Draw Order och Opacity. Cubism visar dessa som separata egenskaper, så du kan kontrollera infästning, maskering, lagerordning och transparens var för sig. Placera skuggan ovanför grundmaterialet i lagerordningen och ge den tillfälligt tillräckligt hög opacitet för att kunna granska den tydligt. Live2D: Inspector palette

Bestäm vad opaciteten ska styra innan du riggar den. Om skuggan alltid ska bli mörkare vid en viss böjning kan det vara lämpligt att koppla den till den rörelsen. Om du behöver tona ut den medan posen är oförändrad använder du en oberoende skuggparameter. Följande steg använder den oberoende kontrollen.

Avsnitt 2

2. Låt skuggan följa den deformerande delen

Placera PartBase och PartShadow under warp-deformern som ger dem deras gemensamma rörelse. Warp-deformers i Cubism kan deformera flera underordnade objekt tillsammans, vilket gör dem användbara för att hålla ett överlägg fäst vid det underliggande materialet. Skapa eller ändra storlek på deformern så att den rymmer materialet under hela den avsedda rörelsen. Live2D: Warp Deformer

Testa deformationen med skuggans opacitet oförändrad. Gå från den ena ytterpositionen till den andra och granska mellanläget. Titta på igenkännbara detaljer: ligger skuggans böjda kant fortfarande intill samma kontur, och sitter dess smala ände kvar på samma område?

En gemensam förälder hanterar den deformation som föräldern tillämpar. Det innebär inte att separata vertexredigeringar på grundens ArtMesh också har återgivits på skuggan. Om överlägget glider bör du granska hur varje objekt faktiskt formas. Som riggningsval kan du, där det är praktiskt, flytta den gemensamma rörelsen till deras gemensamma deformer eller justera skuggans egna former så att de följer grunden.

Avsnitt 3

3. Beskär skuggan efter delens silhuett

Markera PartBase och kopiera dess ArtMesh-ID. Markera PartShadow och klistra in ID:t i skuggans fält Clipping ID. Då blir grundens ArtMesh beskärningskälla och skuggan det beskurna materialet. Låt Reverse mask vara avstängt för en vanlig skugga som hålls inom delen. Live2D: Clipping Mask, Live2D: Inspector palette

Gör följande praktiska gränstest: låt skuggmaterialet sträcka sig lite utanför grundens silhuett och skrubba sedan igenom deformationen. Det beskurna resultatet ska hålla sig inom den avsedda gränsen. Då kan du skilja ett maskeringsproblem från ett överlägg som helt enkelt tar slut för tidigt.

Beskärning och deformation löser olika problem. En korrekt gräns kan dölja överflödigt material samtidigt som skuggans inre form fortfarande glider. Kontrollera både den yttre silhuetten och skuggans position inom den innan du fortsätter.

Avsnitt 4

4. Skapa en oberoende parameter för skuggopacitet

Skapa en vanlig parameter med namnet ShadowOpacity, med minimum 0, standardvärde 0 och maximum 1. Det här intervallet är ett illustrativt designval. Cubism-parametrar har konfigurerbara minimi-, standard- och maxvärden, och deras registrerade former interpoleras mellan nycklarna. Live2D: About Parameters

Gör så här för en skugg-ArtMesh utan befintliga posnyckelformer:

  1. Markera PartShadow.
  2. Markera ShadowOpacity i paletten Parameter.
  3. Välj Add 2 Keyforms och bekräfta nycklarna vid 0 och 1.
  4. Vid parametervärdet 0 ställer du in skuggans Inspector-opacitet på 0 %.
  5. Vid parametervärdet 1 ställer du in opaciteten på ett illustrativt maxvärde på 40 %.
  6. Skrubba mellan nycklarna och bekräfta att endast den avsedda skuggningen ändras.

Cubisms dokumenterade procedur för nyckelformer börjar med att du markerar objektet, väljer dess parameter och lägger till två eller tre nyckelformer. Här är den markerade ArtMeshens opacitet den egenskap som redigeras. Låt grundmaterialet vara omarkerat när du gör dessa ändringar. Live2D: Add/Delete Keys to/from parameters, Live2D: Inspector palette

Om skuggan redan har flera posnyckelformer kan du överväga att lägga till en särskild deformer ovanför endast skuggan och tilldela opacitetsparametern där. Den här föreslagna hierarkin håller toningskontrollen separat från skuggans befintliga formredigeringar. Deformers i Cubism har stöd för opacitetsjusteringar såväl som deformation. Live2D: Warp Deformer

Avsnitt 5

5. Animera parametern över tid

Spara modellen, läs in den i en Animation-scen och expandera modellspårets grupp Live2D Parameters. Ange ett värde för ShadowOpacity vid varje önskad bildruta. Cubism skapar tidslinjenycklar när du ändrar parametervärden, och uppspelningen interpolerar mellan nycklarna. Live2D: 6. Creating Animations

Använd följande värden för ett illustrativt test vid 30 fps. De beskriver en intoning, en kort paus och en uttoning; de är inte föreskrivna tidsinställningar.

Bildruta Värde för ShadowOpacity Avsett resultat
0 0 Skuggan syns inte
12 1 Skuggan når sitt inställda maxvärde
24 1 Skuggan ligger kvar på maxvärdet
36 0 Skuggan tonas bort

Animera delens deformation under samma tidsintervall. Upprepa sedan toningen medan delen hålls i sitt mest sammanpressade läge. När du testar dessa separat blir det lättare att avgöra om en oönskad ändring beror på formen eller toningen.

Öppna Graph Editor för att granska parameterövergången och justera dess tidsinställning. Se också till att modellspåret och uppspelningsområdet täcker hela testet; Cubisms animeringshandledning förklarar att ett kortare spår kan göra att hela modellen försvinner innan scenen är slut. Live2D: 6. Creating Animations

Avsnitt 6

6. Felsök ojämn opacitet och artefakter vid kanterna

Följ den här felsökningsordningen innan du lägger till fler nycklar. Det är en praktisk sekvens som bygger på kontrollerna ovan.

Symptom Kontrollera först Nästa åtgärd
Grundmaterialet tonas också ut Markerat objekt och underordnade objekt till opacitetskontrollen Begränsa kontrollen till skuggan
Skuggan glider när delen böjs Gemensam deformation och separata meshredigeringar Korrigera rörelsen innan du ändrar opaciteten
Skuggans styrka ändras mellan posnycklar Sparad opacitet på befintliga nyckelformer Granska formerna efter oavsiktliga värden
Skuggan hamnar utanför delen Clipping ID och maskens tillgänglighet Återställ den avsedda beskärningskällan

Om befintliga nyckelformer innehåller ojämna opacitetsvärden kan du använda Cubisms funktion Multiple Keys Editing för att redigera opaciteten i ett markerat intervall. Markera endast de former som ska ha samma värde, aktivera Opacity och granska de berörda objekten innan du verkställer ändringen. Behåll avsiktliga skillnader i stället för att skriva över alla former utan åtskillnad. Live2D: Multiple Keys Editing Function

Om en ljus kant syns kan du granska maskens genomskinliga kant. Live2D dokumenterar en lösning där en förstorad duplicerad mask används med visad opacitet på 0 %, transformerad tillsammans med originalet. Kontrollera också om nyckelformer saknas vid ändpunkterna och om maskkällor är dolda när beskärningen oväntat släpper. Verifiera utseendet i den avsedda renderaren eftersom maskbeteendet kan variera mellan implementationer. Live2D: Clipping Mask

Avsnitt 7

7. Använd samma uppdelning i Spine

I Spine animerar du skuggslotens alfa via dess egenskap Color. Slotfärgen styr bilagans opacitet och kan nyckelsättas; bilagans separata färg kan inte nyckelsättas. Placera skuggan i en egen slot så att toningen påverkar det avsedda överlägget. Spine User Guide: Slots

Skapa en beskärningsbilaga runt delen för att definiera gränsen. Placera skuggan inom dess beskärningsintervall och ange uttryckligen End slot: beskärningen gäller till och med den sloten. Beskärningspolygonen kan följa ben med hjälp av vikter, och dess vertexpositioner kan också animeras. Den här gränsen måste följa deformationen oberoende av skuggans alfa-animering. Spine User Guide: Clipping attachments

Om skuggan ska förbli osynlig efter uttoningen rekommenderar Spine att du döljer dess bilaga med en slotbilagenyckel när den blivit genomskinlig. Enbart alfa 0 kan fortfarande medföra ritningsarbete. Om skuggan ska tonas in igen återställer du bilagan innan den synliga intoningen börjar. Spine User Guide: Slots

Avsluta med att testa skuggan vid noll, delvis och maximal opacitet i neutral pos, vid båda ytterlägena för deformationen och i mellanliggande poser. Med en fungerande uppsättning kan du ändra skuggans styrka och samtidigt bevara dess placering och gräns genom hela rörelsen.

Avsnitt 8

Källor

Relaterad läsning

Fortsätt utforska detta ämne