Анімація спрайту: Крокуючий боєць, pixel walking
Гайд: анімація ходьби для спрайтів маленького дозволу
У цьому Уроці я розповім як створити анімацію ходьби для спрайтів маленького дозволу. Коли я малюю маленьких анімованих спрайтів я завжди вибираю 1 з трьох способів анімації ходьби:
• Двох-фреймова ходьба
• Чотирьох-фреймова ходьба
• П'яти-фреймова ходьба
Отже давайте все по порядку.
-----------------------------------------------------------------------------------------------------------------------------
Двох фреймова анімація ходьби
Йде для: Зовсім маленьких спрайтів, тобто максимум висотою в 32 пікселя, але я рекомендував би для спрайтів висотою 24 і менше пікселів ....
Двох фреймова ходьба дуже проста в створенні і була популярна в NES-іграх.
В основному двох-фреймова ходьба ділиться на A) ноги розходяться і Б) Ноги поєднуються або перекривають один-друга.Получается невеликий обман зору коли ви дивитеся на спрайту на кшталт цього; Фішка в тому що ваш мозок бачить 4 кадри з анімації; первое-ноги розходяться, ліва нога відводиться назад, потім ноги знову поєднуються, тепер ноги розходяться знову і начебто вже відводиться права нога. Погляньте.
Бачили? Ви можете наполягати що кожна нога відводилася по-різному. Щоб зробити цю анімацію вірно потрібно простежити що обидві ноги однаково освітлені; Тобто однакову кількість відблисків і тіней на обох ногах. У чотирьох і восьми-фреймових анімаціях ми дізнаємося як анімувати ноги з різним освітленням.
Ще один ключ до успіху це зробити ефект, як ніби одна нога ближче ніж інша. Ми, наприклад, повинні вміти висловити, То що в кадрі де поєднуються ноги (кадр перший) то що права чи ліва нога трохи виступає вперед. Бачили як права чи ліва нога була виділена 1-піксельної лінією? Якщо одна нога не до кінця перекриває іншу то вийде ефект що наш герой кожен раз відводить іншу ногу. Погляньте на приклад того, що НЕ ТРЕБА робити:
Тут я зробив ліву ногу яскравіше правої і вийшло так що він їй просто дриґає тому, і вже відразу помітно що яскравіша нога ближче до дивиться.
У двох фреймовой анімації вся фішка полягає в тому щоб видати 2 кадри за 4. А ще з допомогою двох фреймовой методики можна непогано зробити анімацію бігу: змінити час між кадрами
змінюючи час, довжину ніг в кадрах можна домогтися такого результату
Чотирьох фреймова анімація
Йде для: невеликих спрайтів, не вище 32 пікселів.
Чотирьох фреймова анімація ходьби в основному дуже схожа з двухфреймовой, і якщо ви зробили двох фреймової анімацію то вам буде дуже легко зробити четирехфреймовую. Наш герой в чотирьох фреймовой анімації буде робити те ж саме, що і в двох фреймовой. Тобто відводити одну ногу, потім поєднувати, потім відводити іншу знову поєднувати і тд ... Цього разу як раз варто зробити ноги освітленими по-різному бо тоді ноги будуть виглядати більш реалістично. Я раджу вибрати «передню» ногу (i.e. Більш освітлена нога для наглядача, і ліва нога для нашого героя) більш освітленій, і зробити іншу ногу темнішою.
Цікаво те що це робить анімацію не схожою на двох фреймової! Це тому що затемненіеосветленіе ніг трохи помогает.Ви напевно помітили що наш герой намальований не зовсім в профіль; Якби він був в профіль, ми б не змогли побачити його перед шиї, торс, перед пояса і т.п. І до того ж ми б плуталися в його ногах так як не бачили б його торса ...
Зверніть увагу на кадри 1 і 3, як в низ рухається більш освітлена нога ....
Тому я часто міняю ноги, але це не обов'язково.
Ну, а тепер давайте порівняємо 2-фреймової і 4-фреймової анімації.
-чотирьох фреймова
-двох фреймова
Але це ще не вся анімація; Це тільки для того щоб показати який шлях проходить нога.Ви звичайно помітили що нога піднімається вгору а потім «падає» на землю і кілька кадрів ковзає і повертається до тіла. а потім знову піднімається, і т.п. Це і є те, що я спробую зробити анімувати це все в восьми кадрах. Я завжди починаю з малювання положення ноги, а потім вже її прорисовкой. Також важливо залишити схему руху ноги як пам'ятку (а то мало-ли).
А тепер я просто смакота слові в одну папку з шарами. Скопіюють цю папку (Щоб зробити наступну ногу), розміщуючи цю папку під оригінальну. і поміняю місцями шари щоб створити альтернативну анімацію для другої ноги. Отже. Для першої ноги, Я перемістив шар ноги 1 на кадр 1, шар ногі2 на кадр 2, і так далі. Для скопійованої ноги (2), Я помістив шар ноги 5 на кадр1, шар ноги 6 на кадр 2, і т.д. А тепер давайте подивимося що вийшло.
Працює але не ідеально Тепер у мене є повністю робоча анімація і я хочу щоб тіло нашого героя трохи «підскакував» .Він буде підніматися кожні 2 фрейма і опускатися кожні два фрейми і тд. Він повинен опускатися коли його нога торкається землі. І підніматися коли вона знову починає підніматися). Тому він буде підніматися на 3,4 7,8 кадрах. Також тепер я збираюся додати тіней на ногі..Запомніте, Я збираюся зробити ногу, яка ближче до дивиться, яскравішою щоб відрізнити її від іншої, більш темною ...
От і все. Погляньте! Ноги рухаються по потрібній траєкторії і більш освітлена ближче до нас! І ще, руки мого персонажа не рухаються так як він тримає зброю, якби він його не тримав довелося б анімувати плечі і руки ...
Окей, непогано, нижче зібрані всі попередні анімації і одна з щитом.