Gamedev Marginal act
1 994

У меня горят глаза! Как нарисовать игру (коллаж)

Всем привет!

Как-то Олег Чимде в комментариях сказал, что интересно будет почитать про визуализацию и вот спустя пол года (или больше) я сел за статью.

На данный момент я сделал игры в трех разных визуализация:

- Цифровой коллаж (the Line, Marginal act)

- Пиксель-арт (Need a packet?, Blind Boris)

- Рисунок от руки (Vasilis)

Я напишу 3 заметки про работу с визуальным контентом и мои ошибки - это первый текст.

В закладки
Аудио

Коллаж

Бытует заблуждение, что его делать просто. Это, конечно, не так. У коллажа есть свои преимущества и недостатки и его делать зачастую сложнее чем рисовать с нуля.

Сразу отмечу - не стоит ждать какого-то фундаментального текста, это мои ошибки и приемы, кому-то они покажутся очевидными, но для кого-то будут полезны.


Поиск материала

Это занимает много времени, далеко не всегда можно найти то, что вы хотите и нужно будет обзавестись навыками поиска.

Я бы советовал использовать специализированные сайты, на которых есть картинки по вашей тематике.

К примеру для получения живописных картин в хорошем качестве я использовал Google art project.

Я бы не советовал брать визуальные элементы без изменений, если вы их не покупали. Так что приступаем к редактированию и вырезанию.

Внешний вид боя в the Line
Marginal act - общая карта

Обрезка

Большинство материала это JPG картинки, но вам то нужны PNG. Следовательно нужно обрезать все и делать это вручную, иначе контуры будут рваными. Автоматические средства подходят только, если на изображении есть однородный фон.

Спрайт-лист главной героини
Собранная героиня

Анимация

Это самая сложная часть для коллажа.

Если вы работаете со спрайтами, то всегда есть вариант по кадровой анимации.

Для нее нужно вручную передвигать на каждом кадре необходимые элементы и сохранять их в виде спрайт-листа.

Естественно, по кадровая анимация вам не подойдет. Один спрайт-лист будет весить от 3МБ до 20МБ, да и занимает она значительно больше времени, чем остальные методы.

Я бы советовал по кадровую анимацию только для небольших объектов с малым количеством кадров. К примеру эмоции на лицах, мониторы, лужи и т.д.

По кадровая анимация. Спрайт-лист
Пример собранной по кадровой анимации головы

Запись движения

Я использовал Unity и в нем есть встроенные инструменты для работы с анимацией. Запись, вращение, перемещение, активация и прозрачность объектов. Из коробки доступно много функций.

С этих базовых возможностей я и начал. Руки и ноги анимировал просто: объект - кисть, вложенный в объект - локоть, вложенный в объект - плечо. И записывал перемещение и вращение объектов.


Минусы - это занимает много оперативной памяти и в какой-то момент система просто не будет справляться с огромным файлом анимации, где записано перемещение 17 - 20 объектов.

Плюсы - анимация получается именно коллажная и резкая. Для такого эффекта этот метод хорош.

Увы мой компьютер не вытягивал огромный файл анимации и это заняло много времени. Если в персонаже составные руки и ноги, то есть смысл воспользоваться костевой анимацией.

Программная анимация в движке без костей
Монстр с большим количеством конечностей

Костевая анимация

Затем я воспользовался бесплатным плагином Anima 2D для анимации, который позволяет делать костевую анимацию для спрайтов.

Плюсы - с ним анимировать легче и не так затратно для ресурсов системы.

Минусы - гладкость, искажение, определение областей. К каждой кости привязана часть спрайта, которую она приводит в движение и выставлять эти области часто приходилось вручную.

Спрайт делится сеткой и сетку тоже нужно регулировать. Из коробки есть несколько инструментов для сетки, но возни все равно выходит много. Не получится использовать одну анимацию на разные объекты, поскольку у необработанного персонажа не будет костей.

Я бы советовал использовать этот плагин, если планируется много разных анимаций для одного персонажа. Если у каждого героя по одной - две анимации, то процесс будет неоправданно долгим.

Стрим на канале Unity по созданию костевой анимации персонажа
Спрайт - лист для работы с Anima 2D

Бекграунды

Когда вы собираете задник, то важно закрывать все резкие ровные линии, если вы делаете природные пейзажи. Это предаст аккуратность и законченность всему пейзажу.

Если вы собираете свежуй архитектуру, то ровные линии пригодятся, но, как правило, вы не хотите много однообразных прямых. Длинные ровные линии скучны для глаза и придется их чем-то перебивать.

По возможности нужно делать параллаксинг, разбивая задники на слои. В the Line много важных элементов находилось на пути героини и не было сегментов, где не происходило бы ничего механически важного, поэтому сильно перебивать путь героини передним планом не выходило. В итоге почти весь параллаксинг происходит на заднем плане.

Важно следить за количеством объектов в сцене. Я увлекся собиранием фонов в движке и в какой-то момент число объектов стало откровенно ужасным, частота кадров начала падать, пришлось делать скриншоты и заново собирать все что не движется в единые сегменты.

Они выглядят примерно так:

Фон второй техногенно-заводской локации the Line. Сегмент с фонарями - передний план, остальное - задний

Цветокоррекция

В играх она весьма специфично работает. Нужно дать понять игроку что является активным объектом, что фоном, а что противником. Особенно это важно в 2д играх.

Мне это удалось далеко не везде, особенно плохо дела с выделением цветом и тоном обстоят в игре Marginal act, где порой не всегда понятно что стена, а что пол.

К примеру на этом скриншоте есть светлые бордюры, которые часть пола и по ним можно ходить, а вот киоск снизу от персонажа бледный, хотя он является преградой.

Общая локация - Marginal act

Резко выделять активные объекты не всегда нужно, они могут быть обозначены анимацией или контекстом.

К примеру если игрок открыл сундук один раз, то теперь он знает что сундуки можно открывать и бледный сундук с нужными предметами может служить наградой за внимание игрока к деталям.

Персонажи в the Line обозначены анимацией, сундуки котекстом и тоном, а другие активные зоны спрайтом свечения.

Поглощение огня и бой с совой

Объемы

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

Если фон темный, то затемнить край почти всегда помогает, чтобы "посадить" персонажа в фон.

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

Я бы советовал пройтись по контуру персонажа, чтобы подвести его к общему цвету и тону фона. Примерно как на руках и ногах в этом спрайт-листе.

Оптимизация процесса

Для ускорения работы стоит искать уже обрезанные PNG и по возможности использовать их.

Есть вариант находить картинки на монохромном фоне и автоматически их обрезать. Края, которые останутся с ненужным цветом, можно обесцветить и затемнить. Иногда это работает. Но этот прием как правило хорош для фона.

Основную часть персонажей придется резать по контуру, а потом анимировать записью движения.


Стандартизация

Часть действий героев я стандартизировал. К примеру атаки представлены движущимися заглушками, на каждом враге таких заглушек от 2 до 4, но из-за разного строение пришлось делать на каждого монстра отдельный файл анимации, это отобрало много времени.

Очень (!) важно стандартизировать ваших персонажей с самого начала. Если вы хотите сделать всех с разным количеством конечностей и разного размера (как поначалу делал я), то подумайте еще раз. Это будет тяжело и долго. Каждого героя придется анимировать отдельно и вы умрете еще до релиза.

В целом это все мои маленькие наставления тем, кто желает попробовать делать коллаж. Если вы хотите знать что-то еще, то можно задать вопрос в комментариях.

Атаки - заглушки героини

Все что я сделал можно найти на издательской (я издаю свои игры сам) страничке в стиме.

А вот текущий, еще не вышедший проект (Vasilis). Можете добавить его в виш лист, в конце марта - начале апреля выйдет демка, а сам релиз запланирован на середину апреля.

Всем спасибо!

#геймдизайн #gamedev #marginalact

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Marginal act", "author_type": "self", "tags": [], "comments": 30, "likes": 63, "favorites": 88, "is_advertisement": false, "subsite_label": "gamedev", "id": 38358, "is_wide": false, "is_ugc": true, "date": "Sun, 17 Mar 2019 18:21:06 +0300" }
{ "id": 38358, "author_id": 72776, "diff_limit": 1000, "urls": {"diff":"\/comments\/38358\/get","add":"\/comments\/38358\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38358"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

30 комментариев 30 комм.

Популярные

По порядку

Написать комментарий...
14

Если у вас горят глаза - их нужно потушить. Можно с перцем и луком. А если уж взял в руки лук, то трудно удержаться от колчана и стрел. Хотя стрела вещь опасная, не зря говорят - не стой под стрелой крана. Крана с горячей водой, ну и раковина там конечно есть. Раковина моллюска, хотя я не уверен, наверное это наутилус. Да, точно Наутилус Помпилиус, у меня есть их последний альбом. А в альбоме марки. Немецкие. И еще пенсы и франки. А рядом с франками всегда жили готы, читайте историю средних веков. Которые подкрашивали глаза тушью. В общем, тушите глаза.

P.S.
Стиль интересный.

Ответить
2

Тушеные глаза - всенепременнейшее блюдо на наших митапах. Бывалоча, закончит приглашенный высоский гость речь, как полагается - немного истории успеха, выводы из ошибки выжевшего, пара советов капитнских, потом отобъет хлесткими репликами вопросы наивных инди, и топ-топ со сцены. А там его уже встречают с тарелочкой, где на салфетке с эмблемой ивента - розетка для канапе, а в ней тушеный глазик. И гость его, как водится, берет чистую зубочистку, прикусывает её легонько примерно посередине, и в глазик её - тык, и в рот. Смачно надкусывает, делает одобрительный жест, и идет к себе на место, на сцене нового выступающего объявляют, а администратор отправляет помощника на кухню - готовить глазки и для него. Как мы делаем их, я позже расскажу, надо проверить, доварилось ли варенье клюквенно-кровяное. Нет лучшего корма для жертвы перед релизом - сочной выходит, глаза горят. Ну всё, не смею отвлекать, до встречи

Ответить
0

Я это уже скидывал к посту, причем 2 раза, но говорят, что бог троицу любит.
https://www.youtube.com/watch?v=XKrk1Wlm_mk

Ответить
10

Твоё?

Ответить
1

Нет, не мое)

Ответить
6

Паук-свинья сильно конечно)

Ответить
0

Блин присмотрелся, а там и вовсе не паук, насекомое какое-то странное - Наркомания вообщем)

Ответить
1

Богомол же

Ответить
6

ИМХО, можно пробовать пробить эксклюзивность в Эпике.

Ответить
2

Кажется я видел пикчу с превью в стиме... Я был немного в шоке. Интересный стиль)

Ответить
2

Стиль нравится, сам люблю коллажи делать, в том числе работал с классической живописью одно время, так что однозначно апвоут за игру и статью (кстати, брал материал из того же источника :> ). Единственное, что мне кажется немного вырвиглазным - это интерфейс и шрифты. С этим в будущем еще нужно будет поработать. А так, вы молодец)

Ответить
2

Свин-паук напомнил одну криповую настолку из детства "Тайна Луны"

Ответить
1

Представил, какое бы инди мог сегодня делать Босх... Ох)

Ответить
1

Иероним Босх был очень не плохим художником и кстати рисовал весьма реалистично, и если бы он делал игры, то они бы выглядели бы не так. Скорее всего у него было бы качество как у Vanillaware. А вот темы... Хотя он был продуктом своего времени, может родись он в XXI веке он бы рисовал бы махо-сёдзе, или, прости Господи, супер героев?

Ответить
1

Конечно не так, просто его стиль весьма узнаваем. В контексте игр это был бы очень оригинальный визуальный опыт. Множество из его картин были написаны по заказу церкви. Так что не думаю, что он бы гнушался заказов от marvel.

Ответить
1

согласен со всем

Ответить
1

Теперь не усну.

Ответить
1

Избавляйтесь от сотых (и, желательно, десятых) долей в игровых параметрах. Игроку неудобно такое считать.

Ответить
1

Наверное все же не костевая, а скелетная анимация?
Ну и лично мне больно уже просто смотреть на такой арт, не то что играть в такое )

Ответить
0

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

Ответить
1

Желаю успехов с выходом на рынок, думаю у игры есть явно своя ниша, подобная стилистика достаточно редкая шутка.

Сразу вспоминаются игры 2000-х на флеше. Вот там треша хватало.

Ответить
0

Первое, что пришло в голову от превью - "КАКОГО ХУЯ?!". А так удачи, продолжайте.

Ответить
0

Иди в мои закладки

Ответить
0

Ред.
Хорошо дублируешь, дтф!

Ответить
0

Офигенно! Вы псих )

Ответить
0

Видел гифки на пикабу вроде. Сейчас еще более наркоманская дичь)

Ответить
0

В аниме студио про можно делать костную анимацию ( и не только с плавными, но и с резкими движениями), а на готовой менять картинки - части тела. Получатся одинаковые анимации у разных персонажей. Я так в своем проекте делаю. Только на выходе PNG по кадрам, хз удобно ли это в юнити.

Ответить
0

Vasilis выглядит здорово!

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Гейб Ньюэлл наконец-то анонсировал то,
чего все так долго ждали
Подписаться на push-уведомления