Частина 10: оживляє спрайт
Ну ось ви і вмієте малювати спрайт. І у вас навіть є прикольно зроблений персонаж, яким всі захоплюються. Але все одно чогось не вистачає. А. ваш спрайт і раніше схожий на нерухому картонку. Давайте ж вдихнемо в нього життя, зробивши, відповідно, анімацію дихання. Але спочатку, за традицією, поглянемо на приклади від компанії Capcom, щоб знати, до чого ми прагнемо:
Оцініть кількість рухів, які присутні в цих анімаціях. Зліва ми бачимо Балрога, енергійно підстрибує і готового змести свого опонента в манері "Давай, спробуй, козел!" У цій анімації багато дії і жвавості. Справа в нижньому ряду стоїть хтось Гай. він практично нерухомий, розслаблений і спокійний, його стійка показує: "Тільки підійди ближче, і ти про це пошкодуєш." Вибираючи анімацію для персонажа, слід виходити з його характеру і кращого стилю бою. Звичайно, варто застосовувати такий підхід і в інших іграх, а не тільки в файтинга. Я використовую гри з бійками і їх термінологію, так як вони - хороший приклад спрайтові анімації. Ви ж можете застосовувати знання, отримані тут, де завгодно. Отже, в загальному і цілому, ви зрозуміли ідею дихального руху. Є, однак, деяка специфіка.
Тут дуже важливий розмір спрайту. Працюючи з персонажами таких великих розмірів, як представлені вище, ви можете поекспериментувати з різними варіантами вдиху-видиху. Але якщо ви придивитеся, то помітите, що голови у них практично не змінюють своїх положень. Голова Коді (хлопець в тюремній робі) підводиться на один піксель, йде в бік на два, потім опускається на один, повертається вправо, і все повторюється по-новій. У Гена (майстер кунг-фу в фіолетовому прикиді) голова всього лише ходить туди-назад. У Гая вона взагалі не рухається. Адже якщо ви хочете зобразити персонажа спокійного, то, швидше за все, його голова не буде так сильно сіпатися, як, наприклад, у Балрога. Це що стосується великих спрайтів. Якщо ж ви застосуєте підхід "зрушити корпус на один піксель в кожному кадрі - ось тобі і дихання" до маленьких спрайт, то вийде наступне:
За ідеєю, цей персонаж рухається зовсім по чуть-чуть, по пікселу за раз. Голова йде вгору, потім убік, а потім повертається назад. Точно так, як було в русі у Коді. Ну так ЧОМУ Ж виглядає все так, ніби цей персонаж хоче виконати удар головою і одночасно когось ззаду штовхнути ліктем? Переміщення на 1 піксель в спрайт шириною в 100 пікселів призводить до отримання малопомітного руху, так як зсув становить лише 1% від загальної ширини. У спрайт шириною 20 пікселів таке ж переміщення буде відповідати зміщення в 4%, тобто рух вийшло в 4 рази енергійніше, ніж у великого спрайту. Різниця в розмірах створює деякі проблеми, над якими доводиться поламати голову. При малюванні анімації дихання існує певний межа в габаритах спрайту (він залежить від форми і розміру персонажа). Якщо його не переступати, то все буде добре. Тому великими спрайтами можна "дихати" по-різному, а ось з маленькими слід бути обережними.
"Так, але як щодо таких старих ігор, як Final Fight, Ninja Turtles і їм подібних? Я пам'ятаю, в них персонажі чудово вдихали і видихали." Вибач, приятель, пам'ять підвела тебе. Я точно також помилявся до тих пір, поки не глянув на ці ігри. Персонажі там взагалі не ворушаться. Черепашки рухаються, але вони не "дихають" (немає помітного вдиху і видиху). Там використовувалася так звана анімація "бездіяльності". Вона запускалася, коли персонажі нудьгували без діла. Пам'ятайте - якщо почекати досить, їжак Sonic прітопнет ногою, герой Bubsy постукає по екрану, Рафаель періодично підкидає кинджали сай і т.д. Такого роду фішки легко було робити навіть в маленьких спрайт, так як це були виразні, відчутні руху (а не ледве помітні вдихи-видихи грудьми). Гаразд, повернемося до обговорення анімації дихання, тільки запам'ятайте, що в ваших маленьких спрайт така праця може ніхто і не помітити. Навряд чи ми очікуємо побачити у RPG спрайту 16х16 глибоке грудне дихання, а ось якщо його не буде в якогось великого спрайту, то тут можна сміливо ганьбити художника. Робити дихання або не робити - це залежить від розмірів і загальної форми персонажа. Так, йдемо далі.
У попередньому розділі я говорив, що хорошим підходом при створенні анімацій буде послідовний переклад намальованих від руки кадрів в пікселі, так як при цьому вам не доведеться багато "роздумувати" при роботі пікселями. Ви говорите собі: "Щоб показати удар ногою, як у Фей Лонга, я намалюю розкадрування цього руху, а потім цю справу відсканують". Але уявіть собі, що вам потрібно наваять ТОННИ графіки для цієї гри і що поруч сидить програміст, який кожну хвилину-другу видає щось типу: "Слухай, давай ти зробиш цього чуваку удар в повітрі з розвороту?", Але ж він не розуміє, як багато кадрів доводиться на такий рух, і це взагалі нікого не турбує, крім вас, тому що саме вам доводиться малювати з ранку до вечора, і всі думають, що у вас легка робітка. Ви-то знаєте, що це важка праця. Так навіщо ускладнювати його ще більше, малюючи і скануючи кожен кадр? Погляньте-но на Фей Лонга ще раз:
Саме тут проявляється важливість вашого вміння крутити пікселями, як заманеться, і працювати з ними всілякими способами. Ви художник, і ви володієте цими пікселями. якщо не володієте, то практикуйтеся до тих пір, поки не досягнете потрібного рівня майстерності. Ви можете заощадити купу часу, якщо навчитеся малювати відразу в пікселах. Погляньте на руку Фей Лонга (у його підборіддя). Вона плавно рухається, повертається і т.д. Але навіщо витрачати час на "ручну отрисовку" цього руху, якщо можна просто взяти і скопіювати цю руку в місце трохи нижче попереднього, змінити вид пальців і злегка підправити пікселі передпліччя? Те ж саме можна робити з ногами. вони перещаются всього на пару пікселів за раз, відтінки на них ледве змінюються. Втілюйте такі деталі на стадії роботи з пікселями, і тоді для анімації дихання вам знадобиться всього лише ОДИН кадр, намальований від руки. Якщо ви намалюєте два кадри, де на одному пальці стикаються, а на іншому вони розведені, то після сканування і ретрейсінга у вас вийдуть непотрібні нагромадження пікселів. І доведеться їх підправляти так чи інакше, щоб отримати відповідний результат. Ви даремно витратите час, малюючи руками кадр із зайвою деталізацією. Навіщо ускладнювати собі життя, вашої уваги вимагатимуть багато інших речей. Якщо ви аніміруете персонаж, наприклад, наносить удар, то на папері вам варто малювати тільки руку і частину плеча (для загальної схеми), а не все тіло, яке взагалі не рухається. Хтось, звичайно, скаже, що це легкий шлях. але художники-то ми. І це наша справа. Ми просто намагаємося бути "енергетично ощадливими", хех. Окей, давайте займемося нашим спрайтом, поступово, крок за кроком:
Він високий (зростання аж 110 пікселів) і готовий влаштувати бійку. Я зроблю йому дихання, працюючи одними пікселями. Якби я хотів зробити таку ж різноманітну анімацію, як у Бланки, довелося б прикинути спочатку все на начерках. Ну а з метою навчання я скористаюся методом "вирізав-вставив". План такий - його корпус погойдується туди-сюди, кулаки рухаються в різних напрямках (один йде вгору, інший вниз), і його стегна трохи пружинять. Можливо, варто було б для повноти анімації переміщати і щиколотки, подивимося. Ну що ж, тепер цей образ з голови треба перенести в пікселі. Насамперед намалюємо найпомітніше рух. Я зрушу верхню частину корпусу на два пікселя вгору. Моя задумка така: він дихає важко і швидко, тому вдихи і видихи будуть глибокими, і як тільки вдих досягне піку, рух грудної клітини сповільниться, потім він зробить швидкий видих і опустить груди, знову сповільнившись в кінці. Під час швидкої фази дихання ми зміщуємо пікселі на велику дистанцію, при уповільненні - на маленьку. Отже, робимо рух грудної клітини:
Окей, у нас є дихання (4 кадри). Анімація зліва отримана шляхом зміщення грудей вгору-вниз і подальшого виправлення відбилися пікселів. Photoshop в цьому плані укомплектований дуже зручним інcтрументом прямокутної селекції (можна розширювати обрану область, використовуючи клавішу Shift). Як би там не було, анімація зліва не така вже й страшна. Він дійсно дихає. Але весь процес якийсь монотонний. Всі кадри мають однакову тимчасову затримку (при зміні кадрів), і він ковзає вгору, вниз, вгору, вниз. Мені не сподобалося таке роботоподобное рух, і тому, повозившись із затримками, час показу кадру, де досягається пік вдиху і видиху, я подвоїв щодо затримки інших "перехідних" кадрів. Загалом, стало більше схоже на процес глибокого дихання і в цілому додалося реалізму. Я можу отримати пару ефектів, працюючи тільки зі швидкістю показу анімації. Персонаж буде задихатися, якщо показувати його вдихи швидко, а видихи повільно. Зробивши навпаки, можна створити враження, що він намагається заспокоїтися і проконтролювати своє дихання. Якщо трохи повозитися, завжди можна отримати бажане поведінку. Ах да, коли я трохи підправляв пікселі, я змінив відтінки у кількох "грудних", щоб грудна клітка не виглядала абсолютно нерухомою. Зміна відтінків підказує спостерігачеві, що груди розширюється або стискається. Отже, персонаж дихає, але не виглядає досить анімованих. Бракує руху ніг. Скопіювати і вставити, змінюючи деякі пікселі, отримаємо наступне:
Тепер він живіший. Мужик погойдується точно так же, як це робив Балрог із прикладів, наведених вище (Балрог послужив основою для нашого спрайту, тому що мені подобається його поза і анімація). Це результат нескладних поправок. У першій "дихальної" анімації у мене було 4 різних кадру з переміщається грудьми. На цей раз я хотів, щоб, починаючи з стегон, рухалося все тіло і щоб було видно згинання ніг. Це призвело до того, що однопіксельні рух на піку дихання (пам'ятаєте, на початку анімації тіло рухалося по 2 пікселя, а в "піку" на 1 піксель, ми це зробили для більшого реалізму) перетворилося в двухпіксельное, через те, що спочатку я зрушив вгору окремо корпус, а потім змістив його знову, але вже разом з стегнами. Загалом, це було навіть занадто, я не цього хотів, і довелося вбити два кадри з першої анімації (верхню і нижню точку в його погойдуванні) і заново зібрати кадри вже зі зміщенням і торсу і стегон, також я відобразив ноги в новому положенні. Тепер додамо деталей:
Я додав анімацію в нижню частину його ніг. п'яти стали трохи рухатися і частина одягу теж. Тут не потрібно БАГАТО руху. Анімації одного-двох пікселів цілком достатньо для більш "живого" сприйняття того, що відбувається гравцем. Я трохи змінив форму звисає шматка тканини, щоб відобразити рух того стегна, на якому цей шматок лежить. Потім, щоб отримати більш спокійний рух, я згладив зміна відтінків на його животі. Нарешті, я прискорив всю анімацію в цілому. В майбутньому я можу зробити її ще швидше, щоб персонаж виглядав стривоженим. Швидкість анімації можна міняти коли завгодно, лише б кадри її були закінчені. Прийшов час анімувати руки, і це буде найскладніше, оскільки буде потрібно багато чого перемалювати:
Я відмовився від кругових пасів руками і зупинився на ідеї простенької затримки при їх русі, щоб вони зліг відставали від руху тіла на один піксель по висоті. Маленьке таке поліпшення, воно може зробити анімацію більш природною. Один-два пікселя, на які зміщуються руки, "відклеюють" їх (руки) від грудей і висувають вперед. Інший підхід - взяти та зробити один кулак відстаючим в русі від другого. Ми ніби розбиваємо мужичка на шматки і переміщаємо їх. Коли вгору-вниз зміщалася верхня частина торса (в початковій анімації), то все тіло здавалося монолітним. Змушуючи руки трохи відставати, всього на піксель, ми відокремлюємо їх від корпусу. Щоб фрагментировать тіло ще більше, можна додати "відставання" одному кулаку і отримати 3 рухомих шматка. Хоча тоді виникне питання, чи хочете ви, щоб персонаж ТАК сильно рухався, і вам доведеться вибрати, ваш герой ворушить руками одночасно або порізно. У анімаціях від Capcom руки Бланки рухаються разом, тому що сам він робить велику монстроподібні рух. А ось Ген робить маленьке круговий рух кожною рукою. Як я вже пояснював, все залежить від типу створюваного персонажа.
Як то кажуть, "краще менше, та краще". У нашого забіяки руки раніше рухалися по великому колу, і це виглядало не зовсім правильно. Зараз він злегка ворушить ними і це певним чином виглядає краще. Адже щоб зробити персонажа анімованим, не завжди потрібно купа рухів, особливо в ситуації, коли він просто "дихає", вбиваючи час перед атакою. Тому, якщо щось виглядає не так, спробуйте зменшити кількість анімованих елементів, і ви отримаєте щось більш природне. Чи не ускладнюйте собі життя.