Показываю, как работаю над ошибками (G)UI

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

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

Но был и конструктив. Большая часть такого фидбека мне и так была понятна. Мои мокапы из прошлого поста - не финал. Я об этом честно написал. И собирался работать над ними дальше. Финала не существует. Любой интерфейс всегда можно улучшить:

Я делаю проект соло в рамках конкурса (4 недели) - у меня жётский дедлайн. Интерфейс - это одна из многих задач. Поэтому пока что я решаю задачу минимум. Если проект соберёт фанбазу - буду решать задачу максимум.

Пост получился длинным, сделал вам навигацию по нему:

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

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

Отказался от монохрома. Сделал интерфейс тёмно-синим с белыми активными элементами. И с зелёными кнопками-подсказками. Ниже будут ещё цвета для выколотых кейсов.

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

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

Моя идея разделить инвентарь на три раздела (просмотр, земля, крафт) не нашла любви в комментариях. Вы мне рассказывали, что это будет неудобно. И оказались правы. Вот концепт:

А вот реализация

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

Заливки. Не люблю рамки - они создают визуальный шум. Я решил выделить сам инвентарь и панель предмета. Залил их тёмно-синим. Это сразу убрало тот шум, из-за которого я изначально делил инвентарь и землю. Инверсия человечка лично у меня укрепляет чувство инвентаря. Типа рентген, залезли внутрь и копошимся там. Это чувствуется в прототипе.

Выделение. Использовал белый цвет для выделения и акцентов. Выбранный предмет выделен белым цветом и рамкой. При этом белый цвет используется в панели с информацией. Все белые элементы интерфейса должны считываться вместе в виде: "У человечка есть предмет, который...". Проследите как это работает в следующем разделе про панель предметов.

Смена раздела. Убрал крутилку внизу и оставил только подсказки по переключению между инвентарём и крафтом.

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

Рисовал сразу крупный. Ячейка 200х200 пикселей. В игре рисую текст в масштабе. Использую, в основном 15% и 20%. В паре мест 12% и 18%.

У меня в игре три вида предметов: еда, снаряжение и материалы. Для каждого - свой вид панели. Рассмотрим каждый вид предметов.

Материалы.

Здесь ничего не поменялось. Кроме заливок и подсказок. Подсказки переделаны, о чём я расскажу в следующем разделе поста.

Еда.

Причесал отображение статов. Я не люблю цифры. А до 7 элементов человек в состоянии сосчитать на глаз. Если не уложусь в 7-8 единиц статов - буду делать цифры, если статы будут больше.

С понятностью могут быть проблемы. То что еда даёт бонус здоровья - это и так ясно. Даже моя жена, далёкая от игр сходу подумала именно так, когда я ей показал этот экран. А вот с регенерацией не очень понятно. Она не поняла что следики обозначают шаг игры. Поэтому не смогла считать реген в виде 1 здоровья за 8 шагов игры. Не думаю, что цифры помогут. Попробую сделать на этом акцент в начале игры, когда буду рассказывать, что игра пошаговая.

У еды есть подсказка, что её можно съесть. Но на экране выше её нету, т.к. у игрока уже есть активная еда. Вот тут нужно мне доработать, и написать, что еду ПОКА нельзя съесть, т.к. уже есть та, которая переваривается. Я же говорю, что всегда есть что улучшить.

Активная еда.

Этого не было в мокапах. Вырожденный случай, но нужный. Даю игроку посмотреть, что даёт съеденная еда. И сколько ещё будет длиться, если ему нужна такая инфа. Чтобы игрок отличал её от не съеденной еды - помечаю, что еда переваривается. Насколько нужно здесь показывать общее время действия еды - не знаю. Не смог придумать кейс, когда это нужно.

Снаряжение.

Здесь я тоже показываю предел для урона, который наносит оружие. Два значения для урона? Зачем? Это будет раскрываться в боевой системе. Оружие может иметь два вида атаки, между которыми игрок переключается в бою. У атак может быть разный вид урона и разная область действия. В примере выше показано, что ножом можно резать или колоть.

Внизу блока есть шкала с молоточком. Это прочность предмета. Мне кажется не очень понятным. Пока не нашёл другого образа-иконки для прочности. С учётом доисторического сеттинга. Образы современного мира использовать лучше, т.к. говоришь на одного языке с игроком. С другой стороны, это вредит нарративу. Разрешить этот парадокс непросто.

Обращаю внимание, что название предмета в две строки. Если нужно будет - оно будет и в три. Панель тянется по вертикали.

Игрок может брать оружие в руку или убирать. Это сразу отображается на человечке. Отображать дополнительно выбранное оружие смысла нет. И так всё понятно. Если вам было не понятно - дайте знать в комментариях =)

В концепте это был отдельный режим инвентаря. В реализации я сделал работу с землёй сразу же в инвентаре.

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

Перенёс подсказку. Теперь не под предметом, а общая на весь инвентарь внизу. Текст меняется - зависит от области, в которой игрок работает курсором.

Лут на земле. Рисую мешочек под ногами игрока. Показываю, что на земле что-то есть. Мешочек видно вне инвентаря - так игрок узнаёт, в какой клетке игры лежит лут. Мне не нравится образ мешочка. Он слишком мелкий для накинутых предметов. Например, для копья. И располагается в самом низу клетки. Некрасиво будет, когда несколько мешочков рядом. Буду искать новый образ для лута на земле.

В прошлом посте я указывал, что плохо проработал эту механику. Это мой первый опыт реализации крафта в игре. Поэтому я собираю все подводные грабли. Референсы, которые я знаю, используют мышку в качестве инпута. А у меня только клава/геймпад. Это очень сильное ограничение для создания удобного крафта.

Я много думал и выбирал между двумя вариантами:

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

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

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

Есть гибридный вариант. Я такое видел в игре Megaman Zero 4. Игрок пробует смешивать запчасти сам. Но есть готовые рецепты, которые ему дают персонажи. И есть правила рецептур, о которых можно найти инфу в диалогах. На практике всё равно получается как и в предыдущем варианте. WTF момент "как я должен был до этого догадаться?" и гринд запчастей.

Это были мысли в слух. Оправдание почему я сделал в прошлом посте плохо. Посмотрим на этот позор:

Отказался от названий в рецептах. В этом нету смысла, т.к. оно дублирует название в панели описания предмета. Лучше проработать иконки.

Перенёс состав рецепта. Решил не делать отдельную панель с составом рецепта и добавить состав в список вместо названий. Вряд ли рецепты будут использовать более 4 предметов. Сразу в составе рецепта я помечаю недостающие ингредиенты. Это автоматически в левой панели показывает ,какие рецепты я могу сделать сейчас. Рецепты сортируются по количеству недостающих ингредиентов. То есть выше я буду видеть те, для которых мне не хватает чуть-чуть. Ниже - для которых у меня ничего нет. Насколько полезным окажется - надо смотреть в игре.

Панель предмета рецепта. Она без заливки. Это намеренно, т.к. этого предмета нет у игрока, он должен отличаться от тех, что у него уже есть. Если игрок может создать предмет прямо сейчас - появляется стрелка от этой панели в инвентарь. Должно трактоваться игроком: "Сделать и положить в инвентарь".

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

Но всё равно, пока что крафт - это слабая часть. Есть над чем работать:

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

Вы писали мне в комментариях сделать UI в цветах. Это я и сам понимал, что скорее всего придётся. Но подбор цветов - сложная вещь. Сделать так, чтобы это не было карнавалом. Учитывать, что каждый цвет несёт в себе смысл и функцию.

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

Когда начинаешь реализовывать что либо - всплывают проблемы, неучтённые случаи, какие-то идеи и т.д. У меня было такое в этом проекте. Делюсь списком. Часть я разрешил, часть оставил на потом.

Работа с ячейками. Моя первая головная боль. Игрок может смотреть предметы в инвентаре, на земле, и даже съеденную еду. Но у этого всего разная размерность. Пришлось подумать, пробовать разные варианты чтобы организовать беспроблемное перемещение курсора.

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

Неактуальные пПодсказки. Мелочь, но просто пропустить. Программируешь сразу набор кейсов. Всплывают случаи, когда игра подсказывает съесть предмет, который те не можешь съесть, потому что уже есть активная еда. Или скрафтить рецепт, который ты не можешь скрафтить, т.к. не хватает материалов. Это нужно отлавливать и исправлять. Придумывать как сказать игроку, что "пока что это действие недоступно". И дать понять, в каких случаях действие станет доступным.

Жидкости. Это отдельная механика в игре. Игрок не может носить жидкости. Только пить или использовать в рецептах. И всё по факту получения этой жидкости. Мне ещё предстоит придумать, как показать игроку, что у него исчезла половина инвентаря.

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

Анимации. Пока что я использовал тряску экрана. Самый дешёвый способ обозначить действие. Но нагляднее будут именно анимации. Чтобы предметы прям перелетали из ячейки в ячейку. Пока что самая удовлетворительноая анимация - это взаимодействие с оружием. Игрок сразу видит, какой это даёт эффект. В случае сброса/подбора и крафта сейчас это считывается плохо. Игрок понимает, что что-то произошло. Но что именно - не всегда может уловить.

Всегда есть к чему стремиться. Даже если мне кажется ,что я сделал всё идеально. Завтра или через неделю я посмотрю и увижу кучу недочётов. Это нормально. Нужно пробовать и становиться лучше.

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

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

Спасибо за внимание!