Від ідеї до моделі — як створюються образи в іграх

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

Про нас

як створюються образи в іграх

Ми — невелика інді-команда. Любимо ігри, ми в них граємо і ми їх робимо. Намагаємося комбінувати механіки і виробляти гри, яких ще не було.

А ось і я

як створюються образи в іграх

Я, Кирило, художник площин, по суті займаюся всім 2D-артом у проекті: те-се, концепти, UI, іноді анімацією, персонажами, фоном…

Концепт

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

Створення форми

як створюються образи в іграх

Цей метод в основному використовую я. У такому варіанті створюється форма об’єкта, потім її деталізація, опрацювання об’єму, вибір кольору та освітлення. Можливі варіанти з пропуском певних етапів або їх суміщення, наприклад кольором відразу створювати об’єм.

як створюються образи в іграх

Форма об’єкта повинна бути зрозумілою, передавати характер, стан об’єкта та його властивості.

як створюються образи в іграх

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

Від кольорової гами

як створюються образи в іграх

Другий, скажений, метод — це «Концепт від кольорової гами». Накидаємо різні картинки на одне поле з різними режимами накладення, розташування і прозорістю.

як створюються образи в іграх

Розмиваємо все це. Створюється щось подібне до кольорових плям Роршаха. І тут починається творчий процес пошуку форм. Ви бачите тут щось?Я побачив це.

Далі, за необхідності, відтинаємо непотрібне. Деталізуємо і робимо невеликі виправлення. Розкидаємо основні кольори і світло/тінь.

як створюються образи в іграх

Допрацьовуємо деталі. Вийшов такий маленький мамонто-качкодзьоб. Плюс такого методу в тому, що можна створити найнеймовірніші об’єкти, які при здоровому глузді не прийдуть в голову. Мінус — якщо є конкретне завдання, наприклад носоріг, то важко розгледіти необхідну пляму

За перформансами

як створюються образи в іграх

Якщо ваш замовник або ґеймдизайнер дає вам точні зразки, то завдання з концептом трохи спрощується. У вас є конкретні пункти, від яких потрібно відштовхуватися. Важливо вказати чого ліпше не робити. У такому разі уникаємо фраз: “Я не це мав на увазі!”

Вибір стилістики

Експерименти

Після створення серії концептів перед командою стоїть виразне зображення майбутнього проекту. Але тепер необхідно вибрати стилістику гри. І це так само можна зробити по-різному.

як створюються образи в іграх

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

Критерії

як створюються образи в іграх

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

Зразки

як створюються образи в іграх

Найпростіший в реалізації, але найменш творчий підхід — передерти або скопіювати стилістику. Зразок краще використовувати в пошуку деталей, але не в повному копіюванні.

Загальна гама

як створюються образи в іграх

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

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

Палітра

як створюються образи в іграх

Заготовте палітри кольорів. Палітри можна вибирати різними способами. Наприклад кольори зі зразків. Або накласти на колірне коло фільтр. Можна скласти і свою палітру. Головне — дотримуватися заданого напрямку.

Колір тла

як створюються образи в іграх

При виборі кольорів для фону слід пам’ятати, що тло не повинне відволікати, навантажувати і дратувати гравця. Кількість кольорів на тлі обмежена.

як створюються образи в іграх

Для більшої зручності, слід дотримуватися хоча б елементарних законів фізики. Об’єкти, розташовані далі — світліші і менш насичені.

Колір текстур

як створюються образи в іграх

Текстури повинні бути складені з декількох відтінків одного кольору. Не використовувати максимальні значення RGB-каналів, оскільки при висвітленні такої текстури вона буде надмірно яскравою. Уникати виділених деталей, для запобігання циклічності.

Колір персонажів

як створюються образи в іграх
Персонаж повинен виділятися. Тому бажано, щоби кольори персонажа і фону перебували в протилежних частинах кольорового кола. Зазвичай, кольори персонажа більш насичені і яскраві. Але яскравість будь-якого кольору не повинна бути більше 80%, оскільки це негативно позначиться при освітленні.

як створюються образи в іграх

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

як створюються образи в іграх

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

Світло та тінь

як створюються образи в іграх

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

Увага до деталей

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

Зони відпочинку

як створюються образи в іграх

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

Мінімальний розмір

як створюються образи в іграх

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

Функціональність

як створюються образи в іграх

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

Переходи і стики

як створюються образи в іграх

Неприродно виглядають об’єкти які йдуть в нікуди. Тому на кордоні двох об’єктів повинні бути позначені місця стику. Так картинка буде виглядати більш природно і гармонійно.

Перевір

як створюються образи в іграх

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

УНІФІКАЦІЯ

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

Повторне використання

як створюються образи в іграх

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

Фарбуй шейдером

як створюються образи в іграх

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

як створюються образи в іграх

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

Смарт-об’єкти

як створюються образи в іграх

Використання смарт-об’єктів значно економить час і сили. Смарт-об’єкт — це якийсь контейнер, при редагуванні якого, вміст не змінюється. Змінивши перспективу трикутника, який є таким смарт об’єктом, легко надалі редагувати цей трикутник не втрачаючи його перспективу на кінцевому малюнку.

Структура

як створюються образи в іграх

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

Впровадження в рушій

як створюються образи в іграх

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

Висновки

Завжди отримуйте задоволення від Вашої роботи. Якщо це не так, то, можливо, Ви зайняті чимось не тим. Не бійтеся експериментувати. Читайте літературу і розвивайтеся. Економте свої сили і сили своїх співробітників. Розважайтеся і стежте за своїм здоров’ям. Успіхів у роботі!

SPACE ANIMALS

Untitled-1

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

Давайте товаришувати!

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


Приєднуйтесь! Ще більше коротких, але цікавих новин в нашій групі VK: vk.com/playua


Вам це може сподобатись

Приєднуйся до обговорення →
  • Вова Собко

    Ахах. Гарно)

    • Кирилл Фиалка

      Дякую)

  • Yuriy Burda

    Хороші ілюстрації, не надто багато технічних деталей і просто цікаво. Хороша стаття )

    • Кирилл Фиалка

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

  • sixshooter

    Краса!

    • Кирилл Фиалка

      Дякую!

  • >Ви бачите тут щось?
    Спочатку я побачив робота, а потім краба.
    гарна стаття

    • Кирилл Фиалка

      Дякую. Цікаво було б побачити цього робота і краба:) В тому то і суть, що кожен бачить щось своє. Наприклад, під час докладу на GetIT, одна дівчина побачила тут чайник. Люблю цей спосіб генерації ідей.

  • jaguar_arx

    Цікава стаття. :)

    • Кирилл Фиалка

      Дякую:)

  • Imp_from_DOOM

    Я бы был в своей студии духовным наставником и генератором идей.

    • Mikots

      Тобто, бив би байдики?)

  • Mikots

    Цікавий матеріал — і тааак рясно всіяна ілюстраціями! :)

    • Кирилл Фиалка

      Дуже дякую. Без іллюстрацій, із свого досвіду, не так зрозуміло.

  • creosine

    Шикарна, деталізована стаття, дякую!

    • Кирилл Фиалка

      Спасибі, старємось.

  • Олег Канащук

    Дякую дуже ксласна стаття

    • Кирилл Фиалка

      Дякую і Вам.