5 порад щодо вдосконалення ігрових анімацій

image

Привіт, мене звуть Дейв Блежа (Dave Bleja), я працюю в студії Volnaiskra. Протягом останніх 3 років я створював Spryke, захоплюючий і продуманий платформер про глибоководній морській кібер-рибі, досліджує чудеса суші.

Як єдиний постійний учасник команди Spryke, я ніс відповідальність за багато частині творчого і технічного процесу. Деякі завдання нудні, але більша частина — захоплююча. Моєю улюбленою аспектом була анімація, і я хочу поділитися з вами п'ятьма порадами щодо анімації, які виробилися у мене за роки роботи.

Перша порада: іноді «кількість» означає «якість»

Фраза «Менше — це більше» стала таким затасканим кліше, що моя пропозиція може здатися образливим. Ну, тримайтеся. Іноді менше — це… менше!

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

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

Наприклад, візьмемо ці бульбашки. Вони виглядають непогано, чи не так? (Звичайно, так і є, адже вони взяті з нашої приголомшливої гри Spryke!)

Анімаціяimage

Так, про що це я? Ах, так, бульбашки. Вони виглядають добре, але базова графіка самих бульбашок неймовірно проста — загалом-то, це просто кола. Виглядають красиво вони з-за кількості. Але не тільки завдяки кількістю бульбашок, але і великої кількості процесів, що відбуваються з цими бульбашками одночасно. Давайте розглянемо їх детальніше:

Анімаціяimage

(1) Бульбашки з різною прозорістю і розміром;

(2) + трохи відрізняються форми;

(3) + рандомізовані коливання і менший розмір в самому початку;

(4) + рандомізоване тригонометричне рух (тобто по кривій);

(5) + декілька джерел;

(6) + заломлення світла у воді бульбашки рухаються і розділяються на дрібніші при зіткненні з гравцем.

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

Я хочу особливо зазначити, що цей принцип відноситься не тільки до множинних об'єктів бульбашки. Той же підхід «кількість створює якість» застосовується до анімації чого завгодно. Більшість об'єктів природи рухається різними, часто ледь помітними способами. Уважно придивившись до стоїть нерухомо людині, ви побачите десяток невеликих рухів, від моргання і сглатывания до руху стегон. Поспостерігайте за що йде людиною — майже кожна частина його тіла і особи рухається особливим чином, а не тільки руки і ноги.

У загальному випадку, чим більше всього відбувається під час анімації, тим менше механічної вона виглядає, і тим більш органічною і цікавою. Цей підхід можна застосувати навіть до механічних об'єктів, таким як ця двері:

Анімаціяimage

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

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

У самій Spryke використовується пререндеренная анімація, що дозволяє підвищити складність порівняно з практично можливою в движку. Для створення гарної пререндеренной анімації я дуже рекомендую вам програми типу Toon Boom Harmony Premium, дозволяють виконувати риггинг персонажів за допомогою вузлів.

image

Рибка Спрайк, хоча в грі і не перевищує в розмірах 70x70 пікселів, складена більш ніж з 30 рухомих частин, керованих і сполучених з допомогою приблизно 250 окремих вузлів. Це дозволяє створювати дуже гнучке і детальне рух в різних позах.

Друга порада: некрасиві кадри можуть зробити анімацію краще

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

Хороша техніка створення більшого шарму і привабливості анімації чудово освоєна аніматорами Warner Bros: створення єдиного кадру з величезним перебільшенням. Хитрість тут в тому, щоб вибрати момент зіткнення або швидкого руху і вставити один (і тільки один) кадр, демонструє позу в перебільшено-карикатурному стані. При усвідомленому спостереженні цей кадр буде виглядати надмірним і неточним. Але при «відчутті» його в анімації він піднімає іншу частину анімації на більш високий рівень.

Анімаціяimage

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

Анімаціяimage

У цьому перебільшеному кадрі койотожука (якого я назвав так на честь Хитрого койота!) я настільки спотворив різні частини тіла, щоб ілюстрація насправді «розривався». Але така розірваність насправді не розпізнається в анімації, так що цей кадр просто підвищує драматизм моменту.

Третя порада: нечіткі, змазані кадри можуть заощадити дорогоцінні мілісекунди

Також, як можна додати додаткового шарму анімації з допомогою хитрості з карикатурним кадром, можна додати ще більше динаміки з допомогою нечіткого, «змащеного» кадру. Ця техніка дозволяє створювати дуже швидкий рух за невелику кількість кадрів, що ідеально вписується в багато ігрові сценарії, в яких першочергове чуйність управління.

Хитрість полягає в тому, щоб взяти два зовнішніх кадру руху, і з'єднати їх у змащений третій кадр, який вставляється посередині.

Тут потрібно пам'ятати про парі принципів. По-перше, нечіткий кадр повинен виглядати як суміш, а не середнє між початковим і кінцевим кадрами. Іншими словами, перекривається їм область повинна приблизно відповідати області, закривається і початковим і кінцевим кадрами (це зробить об'єкт в змащеному кадрі більше, ніж зазвичай, але це нормально).

По-друге, слід приділити особливу увагу невеликим ключових компонентів персонажа, таким як око. Якщо положення ока в початковому і кінцевому кадрах сильно відрізняються, то помістивши його посередині в середньому кадрі, ми отримаємо дерганую анімацію, яка втратила плавність. Тому в цьому середньому кадрі потрібно «розмазати» очей від початкового до кінцевого положення, як на прикладі нижче:

Анімаціяimage

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

Четверта порада: пам'ятайте, що дев'ятка старих не грала у відеоігри

Якщо ви ще не чули про 12 засади анімації, ви зобов'язані познайомитися з ними. Це логічні принципи, розроблені майстрами анімації Діснея, так званої «дев'яткою диснеївських стариків». Але в контексті певних відеоігор наслідування деяким з цих принципів може бути проблематичним.

Візьмемо високоефективний принцип запобігання (anticipation). Цей принцип передбачає, що більшості рухів повинно передувати рух у протилежному напрямку: бейсбольний пітчер, кидає м'яч вперед, спочатку відводить руку назад; кричущий людина спочатку робить вдих і стискає м'язи обличчя. Включення таких рухів запобігання їм анімацію робить їх більш правдоподібними і приємними.

На жаль, цей принцип іноді суперечить потребам гейм-дизайну. Коли гравець натискає клавішу стрибка, він очікує, що персонаж відразу ж підстрибне. Якщо випередити стрибок кількома кадрами попередження, то він може виглядати краще, він відчуватися гірше (менш чуйним). Те ж відноситься і до принципу пом'якшення початку і завершення руху: анімація стрибка зі значним пом'якшенням буде красивою, але неотзывчивой.

Тому в багатьох іграх ці принципи в деяких анімація ігноруються. Навіть чудово анімованих іграх на зразок Rayman Legends. Зауважте: у Реймана є випередження при ударі об землю, а у NPC є випередження при стрибку, але коли доходить до анімації стрибка Реймана, він раптово втрачає свою візуальну «гумовість» і миттєво відривається від землі, ніби піднята з дошки шахова фігура. Це призводить до менш якісної анімації, але і до більшої чуйності, а значить, до кращих відчуттів від гри.

Анімаціяimage

У стрибку Реймана чуйність поставили вище анімації, а в оригінальному Prince of Persia — протилежна ситуація. Зауважте, як при стрибку з обриву є майже ціла секунда попередження. Це виглядає добре, правдоподібно з точки зору фізики та анатомії, але створює затримку, яку гравець повинен враховувати при кожному стрибку.

Я вважаю, що це було правильним рішенням для гри Prince of Persia, яка вражала нас безпрецедентним рівнем реалістичною анімації. Але сьогодні багато гравців з цим не змиряться.

Принц Персіїimage

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

Час і рух цих двох послідовностей однаково. В анімованому варіанті можна помітити, як вся маса Спрайк підстрибує миттєво, так само, як і у версії без анімації. Але всередині її анімації присутній трохи попередження: вона трохи відштовхується, переміщаючи вагу свого центру назад. Це, в свою чергу, змушує її антену і гребінці податися вперед на кілька кадрів, поки вони не отбросятся тому.

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

Анімаціяimage

Крім попередження, на відчуття від гри може впливати принцип пом'якшення початку і завершення руху (in slow slow out, він же easing). Погляньте на ці дві анімації з The Witcher 3:

Witcher 3image

Складно заперечувати, що анімація зліва виглядає краще: рух більш переконливе, воно має більшу вагу і мужність. Рух праворуч енергійніше, але воно виглядає дуже нереалістично і нерозумно. Геральт виглядає легким, як пір'ячко, а в світі наче відсутня частина фізики. Тут відбувається багато різних процесів, але основний полягає в менш вираженому пом'якшення початку і завершення, що призводить до руху Геральта зигзагом майже без інерції.

Зліва представлена версія, з якої починала гра The Witcher 3. Але з-за вимог покупців CD Projekt Red змінили патчем рух на альтернативне (праворуч). Коли я вперше спробував альтернативне рух в грі, я був шокований — настільки воно шкодило реалізму і занурення в гру. Раптово гра, повна суворої ступеня, стала схожою на аркадну Darksiders.

Хоча це і трохи розбило мені серце, я залишив цю анімацію на частину гри: нова анімація відчувалася краще. І як гравець, і як розробник ігор, я цілком за занурення в гру, але потреби чуйності до управління та ігрових відчуттів настільки важливі, що навіть я не хотів заважати їм.

П'ята порада: створюйте механіку, потім анімацію, і знову механіку

Анімація не просто накладається поверх механіки — вона фундаментально змінює механіку.

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

Spryke провів 3-4 місяці у формі блоків. Я знав, що хочу створити платформер з особливо жвавими і привабливими рухами, тому нескінченно експериментував з інерцією, прискоренням, кривими стрибків, механікою ударів об стелі і парений в повітрі, поки переміщення цього квадратного блоку за рівнем не стало захоплююче цікавим.

На цьому етапі я ще навіть не уявляв, яким буде персонаж Спрайк, і її зовнішній вигляд поступово виріс з вимог абстрактної механіки цього блоку. Стало ясно, що для швидкого і швидкого руху найкращою формою буде квадрат розміром 50x50 пікселів. Тому коли я приступив до дизайну Спрайк, ми знали, що вона буде маленькою і схожа за формою на м'яч, щоб жваво переміщатися в будь-якому напрямку.

Потім ми виконали безліч ітерацій її дизайну, поки не почав оформлятися персонаж і його характер, після чого я анимировал її різні рухи.

Цікава річ сталася на цьому етапі: плейтестеры почали помічати, наскільки краще стала механіка. Вони говорили, що управління стало набагато зручнішим. Однак насправді механіка не змінилася — ми не міняли нічого, крім анімацій. Я усвідомив, що моє відчуття механіки було доповнено додумыванием анімації, яка була у мене в голові, а плейтестеры були позбавлені цієї можливості.

Різницю можна побачити в порівнянні нижче. Без анімації Спрайк виглядає і відчувається як куля для боулінгу. Вона прилипає до стелі, як намагнічена, важко падає на землю при стрибках. Сам її стрибок схожий на якусь штучну параболу. При анімуванні точно такого ж руху Спрайк стає м'якою і жвавою. Її стрибок виглядає більш природнім (може бути, навіть трохи більш тривалим), і при кроці вона ніби відштовхується від землі на пружині.

Анімаціяimage

Технічно, в механіці нічого не змінилося, хоча й міг би. Анімація змінила відчуття від гри, і Spryke ніби стала зовсім іншою грою.

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

У нашому випадку більшість рухів Спрайк відчувалося чудово — процес був більше схожий на удосконалення механіки першого етапу, ніж на її повторний винахід. Основним винятком була механіка польоту. У Spryke завжди була механіка польоту, що дозволяє сповільнитися в падінні, щоб уникнути небезпеки або досягти платформи. Але після того, як я анимировал цю механіку в міхурі, вона зажила свій власним життям. Ширяння виглядало настільки іншим, що здавалося неправильним. У наявній механіці це було просто зниження швидкості, яке можна було включити в повітрі, але ця нова анімація міхура вимагала чогось легшого й пружинисті.

В результаті я переробив механіку ширяння в повітрі «з нуля». Я створив новий фізичний компонент, який дозволяв ковзати як би на повітряній подушці за допомогою власного імпульсу, який штовхає персонажа. Новий «миттєвий» міхур (instabubble) надавав дуже приємне відчуття, яке я можу описати лише словом «ривок».

Instabubble — це зараз один з найбільш унікальних елементів Spryke, і найбільш приємна базова механіка гри. І вона народилася з анімації! Або, якщо бути більш точним, вона народилася з процесу, функції дозволяє визначити форму, а потім вийшла формі поліпшити функцію. Спочатку механіка. Потім анімація. І знову механіка.

Анімаціяimage

Ну ось і все. Сподіваюся, вам сподобалися мої поради, нехай вони будуть корисними для вас!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.