Розробка гри з використанням пластилінової анімації

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



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


При такому обмеженні персонаж не зможе стрибнути або вдарити з розгону, не зупинившись перед цим, але зате будь-анімація буде починатися і закінчуватися з умовного нульового кадру. Часто діаграма анімацій буває більш складним, в такому випадку необхідно починати наступне дію з тієї позиції моделі, в якій вона була в останньому кадрі попередньої анімації. Наприклад, відзняли стрибок з розбігу з приземленням в нерухому позу, далі треба зняти удар з розбігу, модель для цього треба перевести з нерухомої пози в стан початку удару в русі. Щоб це зробити, зручно скористатися onionskin – функцією кожної програми для зйомки stop-motion анімації, яка дозволяє відобразити одночасно з тим, що знаходиться в кадрі, напівпрозорий вже відзнятий кадр:


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

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

Фон
Іншим наслідком інтерактивності гри є те, що ви не можете знати наперед, який фон буде знаходитися за моделлю. З цього випливає, що всі моделі необхідно знімати на чистому зеленому фоні (або іншому кольорі, якого немає в самій моделі). Деякі програми дозволяють автоматично робити chroma key — видаляти з кадру вибраний колір, але у мене не виходило домогтися якісного ефекту, тому я вирізав моделі з кожного кадру, використовуючи Photoshop.

У разі якісної зйомки, для цього досить одного виділення фону інструментом Magic Wand. Якщо ж фон з тінню від моделі погано відрізняється від кольору самої моделі, при спробі очищення фону може скластися така ситуація:





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

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


Якщо ви відзняли, наприклад, ходьбу, то модель, швидше за все, рухалася в яку-небудь сторону. Для анімації варто пересунути її на стартову позицію — зміщення координат спрайту буде забезпечуватися движком гри. На цьому ж кроці можна обрізати порожнє місце в кадрі. Буде простіше, якщо всі кадри анімації будуть одного розміру, так що варто вирізати на суміщених разом кадрах, по самому великим. Картинку можна відразу отмасштабировать. З приводу розмірів, необхідно відштовхуватися від того, на яку платформу гра проектується. Якщо планується запуск на різних мобільних пристроях, часто графіка зберігається в декількох різних масштабах, і вибір актуальної відбувається вже в момент запуску, для екрану 320x240 завантажуються маленькі спрайт, для 11-дюймовий retina дисплея планшета – максимальні. Про те, як це організувати, можна почитати в цій статті.

Економія місця
Не робіть графіком за розмірами більше, ніж це необхідно, гру розміром в 10 мегабайт скачають більше користувачів, ніж розміром в 20 мегабайт, і вже точно більше, ніж розміром 100 мегабайт. Існують і інші способи зменшення розмірів анімації, наприклад, використання повторюваних кадрів, або відображених кадрів. Приклад – ходьба вліво і вправо може бути складена з однакових кадрів, дзеркально відображених в одному з випадків. Інший приклад – підняття та опускання рук може бути складено з однакових кадрів, програних у зворотному порядку. Але користуватися таким способом потрібно обережно, іноді руху не повністю співпадають, хоча і здаються такими. Наприклад, підняття рук починається з короткого поворотного руху вниз, потім швидкого ривка вгору і плавного уповільнення. Якщо просто розгорнути ці кадри назад, опускання рук буде невірним через відсутність зворотного руху наверх. Боротися з цим може допомогти просунута система анімацій в ігровому движку, наприклад, якщо в ній можна налаштувати швидкість і кадри кожної окремої стадії анімації, а не тільки швидкість всієї анімації

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



Створення гри
В довершення статті, власне, про створення гри, що використовує підготовлену анімацію.

Я давно хотів написати навчальну програмування гру, в якій гравець буде управляти персонажем за допомогою серій попередньо записаних команд, і вирішив використовувати пластилінову графіком для такої гри. Коли-то я сам вчився писати програми для виконавця Робіт на мові КуМир, але для мобільної гри написання повноцінних програм з допомогою тексту було б перебором, тому я вирішив спростити введення команд аналогічно тому, як це зроблено в грі Lightbot. Крім того, я хотів додати в гру елементи інтерактивності (по полю можуть рухатися вороги), і обмежити гравця в доступних в кожен момент командах, натомість дозволивши змінювати алгоритм на спеціальних точках перепрограмування робота.

У мене вже був невеличкий прототип такої гри з графікою-заглушкою:


… і редактор рівнів для неї, в якому я міг збирати завдання. Я перевірив играбельность прототипу, пограти з ним сам і давши пограти друзям, і вирішив зробити на основі його гру для дітей з навчання програмування, використовуючи пластилінову графіком.

Трохи про вибір інструментарію:

Кросплатформенность. Так як гру в результаті вирішив зробити для смартфонів, то хотілося вибрати мову, на якому код з мінімальними змінами запрацює під Android і iOS.

Движок. Особливих вимог до нього немає. Мені достатньо можливості виводити анімовані спрайт, програвати музику і звуки, менеджить ресурси (завантажувати/вивантажувати текстури і шрифти), а також мати обгортку над віконною системою і обробкою повідомлень. Не хотілося брати занадто високий рівень начебто Unity або подібних систем, так як мені не потрібен такий потужний комбайн для маленької гри.

– Потрібні більш-менш нормальний мова і система налагодження, тому вкрай не хотілося зв'язуватися з різними виробами начебто конструкторів ігор (GameMaker, Construct2), які в принципі дозволяють збирати код і на сматрфона, але мають масу недоліків – складно залізти всередину і виправити щось, використовується свій, місцями езотеричний, мова програмування – гальма при розростанні проекту, і т. д.

Безоплатність (ну, або хоча б дешевизна ліцензії). За цим критерієм відкинув цікаву зв'язку Xamarin + MonoGame для створення крос-платформної гри на мові C# і open-source движку, написаному за подобою занедбаного XNA.

Я не буду вдаватися в те, який двигун краще і чому, кожен може вибирати той, який особисто йому по душі, скажу лише, що в підсумку зупинився на Cocos2d-x.

Він підтримує розробку на C++, в сучасній його версії; — код, що використовує движок виглядає акуратно і красиво. В основному, ігрові об'єкти на екрані управляються за допомогою задається для них послідовності стандартних дій, невеликий приклад коду:

robix->runAction(Sequence::create(
Repeat::create(Animate::create(stopAnim), 2),
Spawn::createWithTwoActions(Animate::create(flyAwayAnim), makeParticlesFlyaway),
CallFunc::create([=]() { this->setVisible(false); }),
DelayTime::create(1.0 f),
enableRunButton,
NULL
));

Це функція повернення гравця на старт. Читається практично порядково дослівно – запустити послідовність дій:

Двічі програти анімацію зупинки, потім одночасно програти анімацію улетания і створити частинки для неї, зробити об'єкт невидимим (виклик загорнутий в лямбда-функцію, щоб передати його в конструктор дії «Виклик функції»), почекати одну секунду і активувати кнопку GUI.

Разом з движком потрібно використовувати спеціальні програми, які полегшують роботу з створеної графікою.

Упаковка текстур
Створену пластилінову анімацію можна використовувати у грі у вигляді png-файлів, але для мобільних ігор існують спеціальні формати для кращого стиснення зображень, крім того, кілька текстур прийнято упаковувати в один атлас для оптимізації використання відеопам'яті. Є кілька програм для цього, мені найбільше сподобалася Texture Packer. Приклад атласу з кадрами анімації:



Програма платна, але автор дає незалежним розробник безкоштовну ліцензію на рік.

Створення шрифтів
Шрифти – той випадок, коли у мене не вийшло використовувати пластилінову графіком, красиво зробити ніяк не виходило, тому я взяв готовий безкоштовний шрифт і просто виводив текст їм на пластилінової підкладці. Це – той випадок, коли звичайна пластилінова графіка і нормально виглядають поруч. Символи шрифту в движку також пакуються в одну текстуру, на додаток до якої використовується допоміжний файл, в якому описано місце зберігання кожного символу. Для генерації таких файлів з шрифту я використовував програму BMFont.

Створення рівнів
Як я вже згадував, я використовував свій редактор. Якщо свого редактора немає, то можна експортувати рівні з прекрасного редактора Tiled.

Системи частинок
Ще один розділ в грі, в якому буде добре виглядати пластилінова графіка – частинки. Можна виліпити прості невеликі фігурки і використовувати їх в якості спецефектів при всякому зручному випадку. Щоб налаштувати систему частинок, підходить онлайновий інструмент на сайті particle2dx.

Звуки

Для озвучення гри я використовував сайти з безкоштовними звуками, наприклад, freesounds і допомогу знайомого музиканта. Движок дозволяє програвати музику і звуки без використання додаткових інструментів.

Скріншот вийшла гри:



На цьому про пластилінової анімації для ігор у мене все.

p.s. Щодо створеної гри – перша глава навчає використання команд пересування та фарбування клітин поля в різні кольори і доступна в App Store, наступна буде присвячена циклам і умов. Сподіваюся, вийде розвивати її далі.
Джерело: Хабрахабр

0 коментарів

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