Gamedev Владимир Семыкин
10 774

Высокая эстетика: советы начинающим 2D-художникам

Пять шагов для создания выдающегося визуального облика игры.

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

Художественная часть любой игры должна не просто притягивать внимание пользователей, её задача — гармонично сочетаться с геймплеем и быть функциональной. Чтобы добиться этого, нужно выстроить определённый алгоритм действий, который в итоге приведёт к достижению некоторой художественной ценности 2D-игры.

Инди-разработчик и автор YouTube-канала Томас Браш рассказал про несколько решений, которые помогут добиться хороших результатов при создании визуального облика игры. В своём видео он кратко проанализировал Hollow Knight и применил полученные выводы в собственной работе над Once Upon a Coma. Мы выбрали из его рассказа главное.

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

Для начала достаточно простых фигур, обозначающих пол и потолок

После этого важно обозначить осязаемые элементы, на которых персонаж может стоять или опираться на них. Это нужно для того, чтобы отделить эти элементы от всех остальных визуальных элементов. Например, это можно сделать с помощью добавления какого-либо акцента.

Дублирование формы и добавление неяркой тени создало необходимый визуальный акцент

В Hollow Knight этот момент проработан очень хорошо. В этой игре всегда можно понять, на какие элементы можно прыгнуть, а какие — лишь часть фона.

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

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

Следующий этап — добавление контраста между фоном и передним планом. Для этого в первую очередь нужно использовать цвет

Если фон преимущественно синеватого цвета, то передний план, например, лучше сделать оранжевым

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

Чтобы ещё больше отделить фон от переднего плана, можно использовать элементы с градиентом. Это создаст дополнительную область разделения.

Благодаря тому, что тёмные кусты различаются по тону, создаётся иллюзия воздушной перспективы, что добавляет глубину изображению

Чтобы усилить глубину сцены, можно добавить несколько участков разного тона на траве, чтобы изобразить освещение и тени.

Следующий этап — добавление слоёв. В эпоху flash-игр существовало ограничение на использование большого количества планов. Но сейчас таких проблем больше не существует, поэтому в игру можно добавлять столько слоёв, сколько потребуется для создания глубины.

В Hollow Knight также можно увидеть множество слоёв, которые в совокупности добавляют глубину игровому миру.

Создаётся ощущение, что здесь используется бесконечное количество слоёв, которые постепенно скрываются в тумане

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

Последний этап — детализация. Здесь важно не просто набросать множество деталей, а сделать так, чтобы их наличие было оправданным. Они помогают игроку определять масштабы окружения и примерно рассчитывать расстояние до предметов на фоне. Например, люди примерно могут представить размеры деревьев и цветов, поэтому от их размера и можно отталкиваться. Соответственно, при размещении деталей на фоне, необходимо учитывать линейную и воздушную перспективу.

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

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

#art #основы

{ "author_name": "Владимир Семыкин", "author_type": "editor", "tags": ["\u043e\u0441\u043d\u043e\u0432\u044b","art"], "comments": 14, "likes": 124, "favorites": 230, "is_advertisement": false, "subsite_label": "gamedev", "id": 41932, "is_wide": false, "is_ugc": false, "date": "Wed, 06 Mar 2019 11:38:09 +0300" }
{ "id": 41932, "author_id": 94357, "diff_limit": 1000, "urls": {"diff":"\/comments\/41932\/get","add":"\/comments\/41932\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/41932"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954, "last_count_and_date": null }

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

Популярные

По порядку

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

вроде получилось

Ответить
12

Не верится, но ведь все так и было.

Ответить
10

Да, однозначно неплохой результат вышел, дельные советы.

Ответить
9

Секрет мастерства прост. Но секрет есть секрет.

Ответить
6

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

Ответить
4

Как_нарисовать_сову.jpg

Ответить
3

Чего все недовольны? Хорошие советы-то

Половина художников в инди этими простыми правилами пренебрегает

Ответить
1

Нужно....просто хорошо рисовать! Вот и весь секрет!

Ответить
–2

То есть из статьи - делайте все так, как требует минимально хороший геймдизайн. В этом что ли секрет успех „gorgeous art“? Что то сомневаюсь

Ответить
1

Я, конечно, буду капитаном, но это не столько мануал по созданию gorgeous art, сколько нативная реклама Once Upon a Coma

Ответить
0

Если интересует полнота действий, то он ведет стримы(Они есть на ютубусе)...
Статья из разряда - риусем сову :)

Ответить
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-уведомления