Куток

Обкладинка для допису Досвід анімації меню у "Віддзеркалених"
Kami9ja для 4Witch

Додано

Досвід анімації меню у "Віддзеркалених"

Всім привіт!

Я – Ніна – аніматорка команди розробниць візуальних новел Nabula. І я тут, щоб розповісти про свій досвід анімування новели під час Ukrainian Visual Novel Jam (2 сезон), а саме твору «Віддзеркалені». Якщо хтось її чомусь пропустив обов’язково пройдіть, бо ми реально дуже старались❤️. Оскільки вся команда проробила неймовірно велику роботу, в тому числі над анімацією (адже, до неї приклалась не лише я, а й художниці) то розповісти про всі аспекти роботи в одній статті неможливо. Саме тому я планую зробити серію подібних публікацій.

Зараз мова йтиме про роботу над анімацією головного меню. Анімація меню – це відповідальна робота. Особливо, коли знаєш всю захоплюючу історію Ciel і хочеться її візуально доповнити, а Talizorya підготувала для мене шикарнючий арт, який потрібно було вигідно підкреслити. В такі моменти страшенно хочеться зробити щось вражаюче, але в цьому і криється основна пастка, адже анімація ні в якому разі не повинна відволікати від тексту, а з другого боку їй не можна загубитись. Тобто, її основна мета — це підкреслення і доповнення роботи інших учасників команди.

Я звісно ж втрапила в обидві пастки під час виробництва🤣 (що ви ще побачите на власні очі).Тому, коли починаєте роботу над анімацією обов’язково показуйте її іншим: своїй команді, друзям, родичам – хай краще вдарять вас по пальцях до того, як ви закінчите роботу. Погляд зі сторони й розумний фідбек є вкрай важливими складовими успішного результату.

Початковий скетч
Почалась робота над меню, вже коли Talizorya показала готовий скетч. Готовий скетч - це константа - положення персонажів, об'єктів та тексту загалом вже змінюватись не буде і можна приступати до підготовки.

Перед самою анімацією перш за все я шукаю референси для роботи. Приклади можуть бути з кіно, аніме, мультиків - залежить від того, що на вашу думку краще підійде до вашого завдання. Мій друг показав мені сайт https://giphy.com/ , який я вподобала і часто користуюсь ним для пошуку натхнення (там гіфки на будь-яку тематику). Зручно переглядати рефи саме в форматі gif, бо це швидко і зазвичай люди вирізають на гіфки якісь характерні і найбільш цікаві моменти зі стрічок.

Коли понаходила цікаві мені рефи Talizorya підготувала для мене файл. Працюю я в After Effects. Він чудово поєднується з Photoshop, в якому домовились працювати Talizorya (художниця персонажів, UI і керівниця з візуалу) й Error37 (художниця фонів, про роботу над якими я вам ще розповім у майбутньому). Сумісність програм є важливою складовою командної роботи, особливо в умовах такого швидкого виробництва, як під час джему. Основна підготовка файлів перед роботою — це порізка. Нарізати, звісно, ж потрібно все те, що ви плануєте зробити рухомим. Звучить легко, але насправді, на мою суб'єктивну думку - це найважча частина роботи.
Оскільки потрібно розуміти, що буде рухатись, а що ні. А якщо буде переміщуватись, то як буде виглядати простір за рухомим об'єктом.

Простір під всіма рухомими частинами Агати
Все потрібно продумати наперед.
Якщо вам пощастило як і мені тому, що порізкою займається художниця/ник ви повинні постійно комунікувати, у вас має бути вже готовий драфтовий план руху, щоб чітко пояснити їй/йому, що вам потрібно нарізати для руху.

Якщо ж ріжете самі теж важливо собі скласти план, оскільки в процесі нарізки вам захочеться нарізати все і ви зависните з цим надовго (життєвий досвід) і потім коли почнете все рухати, виявиться, що немає основного акценту і все поринуло в хаос.
Але і в першому і в другому випадку слід знати, що потрібно дати шарам нормальні імена (бажано латинськими літерами, а то з кириличними не завжди все гладко працює), бо заплутатись в шарах доволі просто + це забирає дорогоцінний час.

Назви та кольори шарів в проєкті
Крім того, всі споріднені елементи краще позначати кольором. Для цього – тицяєте на кольоровий квадратик збоку від назви й обираєте забарвлення. Тепер ви знаєте, що всі жовті шари пов'язані з руками героїні, фіолетові це пасма волосся, сизі - це обличчя і т.д. Якщо шарів більше як 10 - це рятує.

Отже, почнемо розмову про героїв. Спочатку я приступила до роботи над Сильві. Її поза та характер просто просився на динамічний рух. Я також підібрала супер драматичні рефи (коли дивилась на її позу прям грала Evanescence “Bring me to life”🤘) і сіла працювати, але чим далі робила, тим більше виникало сумнівів - чи не занадто далеко я зайшла, позаяк раніше я зазначала, що рух не має відволікати, а тут Силь просто перетягнула всю ковдру на себе, тому я скинула ще дуже драфтовий ролик руху команді і всі однозначно сказали, що надто динамічно + створюється враження, що Силь та Віль тягнуться один до одного, а не до Агати (створила неканонічний шип❤️😂).
Приклад

Спочатку спробувала заспокоїти вже наявну анімацію, але це все одно було чимось не тим, бо мені все ще подобалася ідея, де герої тягнуться один до одного, та з цими позами, розташуванням героїв і концепцією це не працювало від слова зовсім.
Приклад 2

Тоді я стерла весь рух, що був і вирішила зробити його легесеньким та непомітним, як рух хвиль на морі. На цьому моменті я перемістила свій фокус на Віля і на його більш статичній романтичній позі. Це вже було більше схоже на необхідний результат. Але тут я трішки переборщила зі статикою (дякую Ciel, що вчасно мене зупинила).
Приклад 3

В результаті, хоч і здається, що багато роботи зжер “монстр порожнечі”, та насправді напрацювання всі були тою чи іншою мірою використані) і завдяки тому, що все було виправлено на ранніх етапах роботи, ще на концептах руху, то перероблення тих чи інших елементів була майже безболісною. Тому не соромтесь показувати свою роботу, зідзвонюватись та комунікувати - це дуже важливо в процесі роботи.

Фінальний варіант

Ось таким був мій шлях у розробці анімації меню.
*А про що б вам було цікаво почитати наступного разу? *

Топ коментарі (3)

Звернути
 
kingster263 profile image
KINGSTER263

Чесно кажучи, перед тим як почати грати, я просидів у головному меню декілька хвилин. Я просто роздивлявся, як кожна деталь фону була анімована, і як це плавно виглядає. А ще й + музика, через яку меню стає ще більш привабливішим (я потім у вас в коментарях ще запитував посилання на неї). Та й загалом новела вийшла занадто гарною, мені дуже сподобалась. Дякую за статтю!

Звернути
 
ciel profile image
Сіель

Ми зробили це! Чудова стаття)
Хоч я і була в команді й навіть допомагала фідбеком, а все одно дуже цікаво дізнатися про всі ці процеси глибше✨
Чекаю матеріали про фони, бо вони окрема любоу варта уваги💜

Звернути
 
lisper_1991_71eab5e0ecc54 profile image
Lisper

Якщо на першому джемі я був вражений анімацією, то на другому щелепа покотилась ген за обрій.
Дякую за те що поділилися закулісними пригодами, так би мовити.

Куток

Підписуйтеся на наші соціальні мережі:
Telegram
Twitter
Facebook


Тепер у нас також є Youtube канал!