Как я HUD 1-го Ведьмака редизайнил

Мини рассказ о мытарствах и проблемах. В 23 году при очередном перепрохождении серии «Ведьмака» я загорелся шизо-идеей заредизайнить полностью интерфейс первой части. Идея воссоздать интерфейс игры меня так заворожила, что я, пребывая в забытье, проигнорировал объём предстоящей задачи.

Подписывайтесь на мою телегу!

И логично решил начать с самого "простого", а именно с HUD (Head-Up Display). В первую очередь я посчитал все имеющиеся на экране элементы интерфейса. Их, к счастью, оказалось не так много, не смотря на то что при первом впечатлении худ первой части кажется несколько громоздким из-за множества декоративных элементов.

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

Все элементы были отрисованы в векторном формате в Illustrator, а затем экспортированы напрямую в Photoshop как смарт-объекты с учётом их позиции. В итоге у меня получился макет в 4K разрешении в Photoshop, где каждый элемент был представлен в виде смарт-объекта, содержащего векторный смарт-объект. Это позволило мне удобно редактировать их в отдельных окнах, не нарушая структуру слоёв и сохраняя обратимость изменений.

Теперь я понимаю, что следовало действовать иначе и ориентироваться на разрешения Full HD, чтобы все элементы пользовательского интерфейса масштабировались без искажений. Особенно трудно было работать с элементами обводки и толщиной линий. При работе с разрешением 4K любые изменения толщины кажутся избыточно чёткими, и при более низких разрешениях они будут выглядеть иначе.

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

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

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

Вообще, тема игровых интерфейсов — это производственная тайна. Вы не найдете в интернете никаких гайдов и курсов на эту тему. Я пытался. Разве что по мобилкам казуальным. Когда будете играть в следующий раз во что-то с интересным интерфейсом, советую остановиться и присмотреться к ним. Они же жутко сложные в реализации. Как был сделан интерфейс новой PoE? А как в РДР2 добились такого натурального и динамичного эффекта текстур UI? Как был реализован интерфейс Kingdom Come: Deliverance?

Из-за недоступности какой-либо информации по реализации сложно организованных с точки зрения кол-ва и качества эффектов, текстур, анимаций и пр. игровых интерфейсов, такому простому чуваку-самоучке, как я, приходится устраивать подобие обратного инжиниринга: по сути, выдумывать, как был реализован тот или иной элемент. И всё упирается в то, насколько развита наблюдательность. Хватит ли у меня усидчивости докопаться до сути и угадать с последовательностью действий, чтобы добиться надлежащего результата? Это вгоняет в уныние.

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

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

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

У многих олдовых игр диалоговое меню находилось просто внизу одной большой плашкой с невыразительным списком опций. Помимо того, что это просто нерациональное использование места на экране, это еще и неинформативно для игрока. Хотя в первом «Ведьмаке» и были иконки для некоторых действий (кости, сон, хранилище и пр.). Новое меню в том числе заимствует характерные округлые элементы. Все ради консистентности.

С помощью какой-то древней программы (название я не сохранил, сори) мне удалось вытащить из игры все ассеты интерфейса и конвертировать их в пнг. Они оказались очень шакального разрешения. Исключением были иконки бафов, у них было самое высокое разрешение почему-то. Там же лежали и части ассетов UI из Neverwinter Nights, к моему удивлению. Немудрено, игры-то на одном и том же движке.

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

Однако меня беспокоило отсутствие чёткого видения проекта. Перед тем как взяться за столь масштабную задачу, следовало потратить достаточное кол-во времени на создание эскизов. Мне предстояло ответить на множество вопросов: каким я вижу обновлённый дизайн? Какой стиль должен стать основой? Какие новые правила я должен выработать, чтобы результат получился цельным?

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

Я изначально не планировал встраивать свой вариант интерфейса каким-либо образом в игру. Первая часть была сделана на сильно модифицированной версии движка Aurora Engine и работать с ним не было никакого смысла из-за его костыльности и недружелюбности. Это было бы просто невозможно. Популярные моды на интерфейс, кстати, никак не меняют саму структуру UI, в них просто перерисованы ассеты.

Вместе с ассетами интерфейса я вытащил и все карты первого «Ведьмака», там не было ничего интересного, но когда я соединил их вместе, оказалось, что вся карта толком не стыкуется и в ней много дыр и неиспользованного (непроработанного) пространства, которое пришлось бы мне придумывать с нуля.

К слову о карте. В 22 году это я был тем энтузиастом, что отобразил на карте все перемещения Геральта. Хотелось её как-то использовать в дизайне обновленной карты первой части (Плашка coming soon стоит там по этой причине), но идея заглохла ввиду недостатка информации по вышеописанной причине. А карту можете глянуть на моём Behance.

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

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

Одним из пунктов на год является воссоздание экрана интерфейса Kingdom Come Deliverance 2 и опыт работы с редизайном ui первого Ведьмака очень мне поможет. Я постараюсь документировать на этот раз в подробностях весь процесс (Насколько это возможно), поэтому если хотите видеть всё это в риал тайме, то подписывайтесь на мой канал в телеге, который я активно веду.

Донат для поддержки моего творчества (Как раз коплю на XPPen Artist Pro 16) присылать сюда. Буду признателен за любую сумму.

По заказам, предложениям и вопросам писать сюда (Либо на почту: [email protected])