W swoim żywiole: ekran logowania z superskórką Lux

po bananaband1t

Historia Lux Mistrzyni Żywiołów jest pełna wewnętrznych sprzeczności, a każda z jej dziesięciu postaci została celowo stworzona tak, by uzewnętrzniać określoną emocję. Próba uchwycenia subtelnych uczuć w typowej animacji ekranu logowania okazała się znacznym wyzwaniem. Na poprzednich ekranach logowania bohaterowie często byli portretowani z oddalenia, co utrudniało rozpoznanie emocji na ich twarzy. Aby lepiej wyrazić emocjonalną podróż Lux, graficy stworzyli pierwszą w League of Legends animację ekranu logowania w stylu portretu.


Zaraz, czy to Lux?

Postać światła Lux Mistrzyni Żywiołów: praca w toku

Gdy spoglądamy na sylwetkę bohatera, znajdujemy wizualne wskazówki, które pomagają odróżnić go od innych. Para ogromniastych rękawic pozwoli wam z daleka rozpoznać Stróża Prawa z Piltover, podobnie jak słup latarniany wskazuje, że patrzycie na kogoś, komu brakuje prawdziwej broni. Bez tych charakterystycznych cech trudno byłoby odróżnić na pierwszy rzut oka, powiedzmy, Poppy od Tristany.

Grafik Suke „hugehugesword” postanowił uchwycić esencję Lux zastygłej w bezruchu, bez pokazywania pełnej sylwetki czy charakterystycznej różdżki — kluczowych elementów jej rozpoznawalnej sylwetki. Po stworzeniu szkicu ogólnego pokazywał go innym Rioterom i pytał, czy to przypomina bohaterkę z League of Legends, a jeśli tak, to którą?

Na pierwszych seriach rysunków ludzie z rzadka identyfikowali demaciańską magiczkę, a wielu uważało, że brakuje jej tego, co sprawia, że Lux jest sobą: żywej, przyjaznej osobowości. Po zebraniu tych opinii Suke przerobił portret, rozjaśniając światło w jej oczach i uśmiech na twarzy. Gdy pokazał ludziom nowe rysunki, zobaczyli coś więcej niż tylko piękną twarz. Zobaczyli Lux.

Suke chciał, by każdy wizerunek Lux Mistrzyni Żywiołów przedstawiał określone uczucie. Postać światła jest ucieleśnieniem nadziei, dostrzegalnej w blasku jej oczu i świetle tańczącym na twarzy. Ogień opiera się na gniewie z dramatycznymi, kontrastowymi barwami we włosach i kanciastym kształtem twarzy, który podświadomie sugeruje surowość. W postaci wody dominuje wewnętrzna harmonia, przejawiająca się w spokojnym wyrazie twarzy i chłodnej, kojącej palecie kolorów.

Oto kilka z wielu warstw składających się na postać światła Lux... No i jeszcze to.

Gdy ilustracja była ukończona, została podzielona na warstwy, które graficy mogli niezależnie kontrolować osobno. Na przykład włosy Lux mogą powiewać w powietrzu, ale ten ruch nie wypływa na jej ramiona i twarz. Często trzeba dodawać tło między warstwami, aby wszystko mogło poruszać się swobodnie bez odsłaniania niezamalowanych obszarów. Oczy Lux zostały stworzone w całości, aby uniknąć pojawiania się luk, gdy bohaterka przesuwa spojrzenie. Gdy Suke wrócił do zaprojektowania gałki oczne Lux, rozśmieszył go ich wygląd i wysłał obrazek do swojego zespołu — tak narodził się wewnętrzny mem.


Robić więcej, robiąc mniej

Gdy graficy ruchu, Adam „AdamKadamon” Oliveira i Timothy „BumsAreCool” Weiser, zaczęli pracować z Suke, by wprowadzić ruch do rysunku, nie byli pewni, jak ożywić Lux bez utraty subtelnego klimatu portretu. Poprzednie podejście do animowania ekranów logowania, polegające na dodawaniu dramatycznych animacji do postaci bohaterów zastygłych w pozach gotowości do walki, nie sprawdziłoby się. Zatem graficy skupili uwagę na delikatnych animacjach twarzy, ruchach tła i przejściach.

Dołączając uchwyty do wybranych punktów rysunku, graficy mogli manipulować wyrazem twarzy Lux.

Ruchy oczu Lux: praca w toku i wersja finalna

To nie było łatwe. Przy pierwszych próbach dodania ruchu oczy Lux wydawały się omiatać pokój, zamiast skupiać się na oglądającym. — Ludzie ciągle powtarzali, że w zasadzie woleliby, żeby ona wcale się nie ruszała — mówi Adam. Ruchy były zbyt gwałtowne, by tworzyć wrażenie, że bohaterka utrzymuje kontakt wzrokowy. Zastosowanie w oczach subtelniejszych, naturalnych drobnych drgnięć pozwoliło odzyskać wrażenie połączenia między Lux i oglądającym, jednocześnie dodając jej twarzy życia.

Ponadto Tim i Adam użyli ruchu, by uwypuklić emocje uchwycone na każdym rysunku. Rozedrgane promienie światła miękko odbijają się od twarzy Lux w postaci wody, podczas gdy w postaci ognia z jej włosów dramatycznie spływa lawa. Podkreślenie nadziei w postaci światła było już trudniejsze, ale Tim i tak był podekscytowany. — Niewiele mam okazji, by narysować postać „słodką aż do bólu” — mówi Tim. — Rozbłyski światła, tęczowe refleksy, migotanie we włosach — zamierzałem z tym zaszaleć.


Gdy plan układa się w całość

Połączenie trzech unikalnych obrazów w jedną spójną, zapętloną animację było trudne. — Chcieliśmy, by przejścia wyglądały tak, jakby stanowiły część grafiki Suke, która z czasem się zmienia — mówi Tim. Pierwsze wersje tych przejść, zwłaszcza w postaci ognia, wykorzystywały drastycznie kontrastowe barwy w agresywnym nasyceniu. Zdecydowanie przypominało to ogień, ale nie pasowało do bardziej abstrakcyjnego, miękkiego stylu grafiki oryginału. Przejście znowu zaczęło wyglądać naturalnie, gdy odwzorowano oryginalne poziomy nasycenia kolorów i punkt skupienia.

Przejście do postaci ognia: praca w toku i wersja finalna

Poza dosłownym połączeniem trzech oddzielnych rysunków, przejścia wzmocniły emocje ucieleśniane przez każdą postać. Na przykład żar ognia jest intensywny, więc warstwa przejścia musiała być mocna i dramatyczna, podczas gdy spokój wody podkreśla delikatny efekt falowania.

Moment, gdy Lux przechodzi z furii ognia do spokoju wody, można dostrzec w jej oczach. — Jest taki moment w postaci ognia, krótszy od sekundy, gdy Lux gwałtownie zamyka oczy, jakby z wściekłością. A potem odzyskuje opanowanie i spokój. Podobnie, gdy Lux otwiera oczy po wyjściu z postaci wody, dosłownie wypełnia się światłem. Po wprowadzeniu tego ostatniego dodatku przejścia sprawiają wrażenie czegoś więcej niż tylko elementu łączącego: wyrażają niekończące się poszukiwanie przez Lux swojej prawdziwej natury — podsumowuje Adam.

Wideo ekranu logowania powstawało równolegle z muzyką, a jednak przejścia i tak wpasowały się w takt. — Tak miało być — żartuje Tim.


8 months ago

Oznaczono za pomocą: 
Lux, Dev Blog, Elementalist Lux