Blog Metlivi

Jak animować krycie zamaskowanego cienia na deformującej się części postaci

Aby animować zamaskowany cień na deformującej się części postaci, przygotuj dla cienia osobną grafikę, spraw, by podążał za deformacją części, i animuj jego krycie niezależnie. Maska określa, gdzie może pojawić się cień, a jego krycie — jak mocno będzie widoczny.

Ten przewodnik jest przeznaczony dla twórcy postaci 2D, który ma już deformującą się część i chce płynnie wygaszać jej cieniowanie bez przesuwania go ani zmieniania grafiki bazowej. Opisuje pracę z parametrami w Live2D Cubism, a następnie wyjaśnia odpowiedniki tych ustawień w Spine.

29 października 20267 min czytaniaAutor: Metlivi Editorial Team

Otwórz Produkty Powrót do bloga

Sekcja 1

1. Oddziel cień, granicę maski i ustawienia ruchu

Zanim dodasz animację, wskaż trzy elementy: grafikę bazową, osobną nakładkę cienia oraz deformację, która porusza częścią. W przykładowej konfiguracji nazwij je PartBase, PartShadow i PartWarp. To propozycje nazw porządkujących projekt, a nie wbudowane obiekty.

Zaznacz ArtMesh cienia i sprawdź pola Deformer, Clipping ID, Draw Order i Opacity. Cubism udostępnia je jako osobne właściwości, dzięki czemu możesz oddzielnie sprawdzić przypisanie do deformera, maskowanie, kolejność warstw i przezroczystość. Ustaw cień nad grafiką bazową w kolejności rysowania i tymczasowo zwiększ jego krycie, aby dobrze go widzieć. Live2D: paleta Inspector

Przed rigowaniem zdecyduj, co ma oznaczać zmiana krycia. Jeśli cień powinien zawsze ciemnieć przy określonym zgięciu, powiązanie go z tym ruchem może być właściwe. Jeśli chcesz go wygaszać przy niezmienionej pozie, użyj niezależnego parametru cienia. W kolejnych krokach użyjemy właśnie takiego niezależnego sterowania.

Sekcja 2

2. Spraw, by cień podążał za deformującą się częścią

Umieść PartBase i PartShadow pod deformerem warp, który zapewnia im wspólny ruch. Deformery warp w Cubism mogą jednocześnie deformować wiele obiektów potomnych, dzięki czemu nakładka pozostaje przypięta do grafiki pod spodem. Utwórz deformer lub zmień jego rozmiar tak, by obejmował grafikę w całym zakresie zamierzonego ruchu. Live2D: Deformer warp

Sprawdź deformację przy stałym kryciu cienia. Przejdź od jednej skrajnej pozy do drugiej i sprawdź też pozycję pośrednią. Przyjrzyj się rozpoznawalnym cechom: czy zakrzywiona krawędź cienia nadal biegnie wzdłuż tego samego konturu i czy jego wąski koniec pozostaje przypięty do tego samego obszaru?

Wspólny element nadrzędny obsługuje deformację, którą sam wywołuje. Nie oznacza to, że osobne korekty wierzchołków ArtMesh grafiki bazowej zostały również odtworzone na cieniu. Jeśli nakładka się przesuwa, sprawdź, jak faktycznie kształtowany jest każdy obiekt. Jako rozwiązanie riggingowe przenieś wspólny ruch do wspólnego deformera, jeśli to praktyczne, albo dostosuj kształt samego cienia, by podążał za grafiką bazową.

Sekcja 3

3. Przytnij cień do sylwetki części

Zaznacz PartBase i skopiuj jego ArtMesh ID. Zaznacz PartShadow i wklej ten identyfikator do pola Clipping ID cienia. Dzięki temu bazowy ArtMesh będzie źródłem maski przycinającej, a cień — przycinaną grafiką. Przy zwykłym cieniu mieszczącym się wewnątrz części pozostaw opcję Reverse mask wyłączoną. Live2D: Maska przycinająca, Live2D: paleta Inspector

Wykonaj praktyczny test granicy: nieznacznie wykraczaj grafiką cienia poza sylwetkę bazową, a następnie przewijaj deformację. Przycięty wynik powinien pozostać wewnątrz zamierzonej granicy. Pozwala to odróżnić problem z maską od nakładki, która po prostu kończy się za wcześnie.

Przycinanie i deformacja rozwiązują różne problemy. Prawidłowa granica może ukryć nadmiar grafiki, a jednocześnie wewnętrzny kształt cienia nadal może się przesuwać. Zanim przejdziesz dalej, sprawdź zarówno zewnętrzną sylwetkę, jak i położenie cienia wewnątrz niej.

Sekcja 4

4. Utwórz niezależny parametr krycia cienia

Utwórz zwykły parametr o nazwie ShadowOpacity, z wartością minimalną 0, domyślną 0 i maksymalną 1. Ten zakres jest przykładowym wyborem projektowym. Parametry Cubism mają konfigurowalne wartości minimalne, domyślne i maksymalne, a ich zarejestrowane formy interpolują między klatkami kluczowymi. Live2D: Informacje o parametrach

Jeśli ArtMesh cienia nie ma jeszcze klatek kluczowych formy, wykonaj następujące kroki:

Zaznacz PartShadow.
Wybierz ShadowOpacity w palecie Parameter.
Użyj opcji Add 2 Keyforms i potwierdź klatki kluczowe przy wartościach 0 i 1.
Przy wartości parametru 0 ustaw krycie cienia w polu Inspector na 0%.
Przy wartości parametru 1 ustaw krycie na przykładową wartość maksymalną 40%.
Przewiń wartości między klatkami i upewnij się, że zmienia się tylko zamierzone cieniowanie.

Udokumentowana procedura tworzenia klatek kluczowych w Cubism zaczyna się od zaznaczenia obiektu, wybrania jego parametru i dodania dwóch lub trzech klatek kluczowych. Tutaj edytowaną właściwością jest krycie zaznaczonego ArtMesh. Podczas tych zmian nie zaznaczaj grafiki bazowej. Live2D: Dodawanie/usuwanie klatek kluczowych w parametrach, Live2D: paleta Inspector

Jeśli cień ma już kilka klatek kluczowych formy, rozważ dodanie osobnego deformera wyłącznie nad cieniem i przypisanie do niego parametru krycia. Ta sugerowana hierarchia oddziela sterowanie wygaszaniem od istniejących korekt kształtu cienia. Deformery Cubism umożliwiają regulację krycia, a także deformację. Live2D: Deformer warp

Sekcja 5

5. Animuj parametr w czasie

Zapisz model, wczytaj go do sceny Animation i rozwiń grupę Live2D Parameters na ścieżce modelu. Na każdej wybranej klatce wprowadź wartość ShadowOpacity. Cubism tworzy klatki kluczowe na osi czasu po zmianie wartości parametru, a podczas odtwarzania interpoluje między nimi. Live2D: 6. Tworzenie animacji

Do przykładowego testu w 30 kl./s użyj poniższych wartości. Opisują one pojawienie się cienia, krótkie zatrzymanie i wygaszenie; nie są to zalecane czasy.

Klatka	Wartość ShadowOpacity	Zamierzony efekt
0	0	Cień niewidoczny
12	1	Cień osiąga skonfigurowaną wartość maksymalną
24	1	Cień pozostaje na maksymalnym poziomie
36	0	Cień zanika

Animuj deformację części w tym samym przedziale. Następnie powtórz wygaszanie, utrzymując część w najbardziej ściśniętej pozie. Osobne testy ułatwiają ustalenie, czy niepożądana zmiana wynika z kształtu, czy z wygaszania.

Otwórz Graph Editor, aby sprawdzić przejście parametru i dostosować jego czas. Upewnij się też, że ścieżka modelu i obszar odtwarzania obejmują cały test; samouczek animacji Cubism wyjaśnia, że zbyt krótka ścieżka może spowodować zniknięcie całego modelu przed końcem sceny. Live2D: 6. Tworzenie animacji

Sekcja 6

6. Diagnozuj niejednolite krycie i artefakty na krawędziach

Zanim dodasz kolejne klatki kluczowe, wykonaj poniższą diagnostykę w podanej kolejności. To praktyczna sekwencja wynikająca z omówionych wcześniej oddzielnych ustawień.

Objaw	Najpierw sprawdź	Następne działanie
Zanika też grafika bazowa	Zaznaczony obiekt i elementy potomne sterownika krycia	Ogranicz sterownik do cienia
Cień przesuwa się przy zginaniu	Wspólna deformacja i osobne korekty siatki	Popraw ruch przed zmianą krycia
Siła cienia zmienia się między klatkami kluczowymi pozy	Krycie zapisane w istniejących klatkach formy	Sprawdź, czy nie ma w nich niezamierzonych wartości
Cień wychodzi poza część	Clipping ID i dostępność maski	Przywróć zamierzone źródło maski przycinającej

Jeśli istniejące klatki kluczowe zawierają niespójne wartości krycia, funkcja Multiple Keys Editing w Cubism pozwala zbiorczo edytować krycie w wybranym zakresie. Zaznacz tylko formy, które powinny mieć tę samą wartość, włącz Opacity i sprawdź, na które obiekty wpłynie zmiana, zanim ją zastosujesz. Zachowaj zamierzone różnice zamiast bezkrytycznie nadpisywać każdą formę. Live2D: Funkcja edycji wielu klatek kluczowych

Jeśli widzisz jasną obwódkę, sprawdź półprzezroczystą krawędź maski. Live2D opisuje obejście polegające na użyciu powiększonej, zduplikowanej maski o ustawionym kryciu wyświetlania 0%, transformowanej razem z oryginałem. Jeśli przycinanie nieoczekiwanie przestaje działać, sprawdź też brakujące skrajne klatki kluczowe oraz ukryte źródła maski. Zweryfikuj wygląd eksportu w docelowym rendererze, ponieważ sposób działania masek może się różnić w zależności od implementacji. Live2D: Maska przycinająca

Sekcja 7

7. Zastosuj ten sam podział ustawień w Spine

W Spine animuj alfę slotu cienia za pomocą jego właściwości Color. Kolor slotu steruje kryciem przypisania i może być animowany klatkami kluczowymi; osobny kolor przypisania nie może być animowany. Umieść cień we własnym slocie, aby wygaszanie wpływało na właściwą nakładkę. Spine User Guide: Sloty

Aby ustawić granicę, utwórz wokół części przypisanie przycinające. Umieść cień w zakresie przycinania i jawnie ustaw End slot: przycinanie obejmuje ten slot. Wielokąt przycinający może podążać za kośćmi dzięki wagom, a jego położenie wierzchołków również można animować. Granica ta musi podążać za deformacją niezależnie od animacji alfy cienia. Spine User Guide: Przypisania przycinające

Jeśli po wygaszeniu cień ma pozostać niewidoczny, Spine zaleca ukrycie jego przypisania za pomocą klatki kluczowej przypisania slotu po osiągnięciu przezroczystości. Sama alfa równa zero nadal może powodować obciążenie związane z rysowaniem. Jeśli cień ma ponownie się pojawić, przywróć przypisanie przed rozpoczęciem jego widocznego wygaszania. Spine User Guide: Sloty

Na koniec sprawdź cień przy zerowym, częściowym i maksymalnym kryciu w neutralnej pozie, w obu skrajnych pozycjach deformacji oraz w pozach pośrednich. Działająca konfiguracja pozwala zmieniać siłę cienia, zachowując jego położenie i granicę w całym zakresie ruchu.

Sekcja 8

Źródła

Warto przeczytać