Создание интерфейса для игры. Что такое интерфейс в игре

Примечание для тех, кто интересуется UI/UX дизайном.

Лучший пользовательский интерфейс в играх

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

UX — это так называемый «пользовательский опыт», который неотделим от пользовательского интерфейса. Одно без другого — полуфабрикат. Эти определения не являются исчерпывающими, но вы здесь для вдохновения, а не для того, чтобы выслушать скучный урок! Итак, без лишних слов, вот десять отличных примеров игрового дизайна, которые вас вдохновят!

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

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

Tomb Raider

Расхитительница гробниц

Tomb Raider — еще один хороший пример игры, в которой пользовательский интерфейс остается ненавязчивым, пока он вам не понадобится. Но даже когда он появляется, он не отвлекает вас.

Посмотрите это видео и посмотрите, как выглядит полное отсутствие 2D-текста на HUD. А когда игрока просят нажать кнопку для выполнения действия, это выглядит гармонично. Подумайте, какие должны быть подсказки в вашей условной игре, чтобы они не мешали нырять?

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

Описание проблемы

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

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

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

READ  Когда и во сколько бывают счастливые часы в Варфейс. Когда счастливые часы в варфейсе 2020

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

Работа с референсами

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

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

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

Ссылки на Play Маркет. Вы можете перетаскивать холст, удерживая пробел, масштабировать колесиком мыши, удерживая Ctrl.

Изучив референсы, можно переходить к пользовательскому скрипту.

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

Типы интерфейсов

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

Рассмотрим основные типы интерфейсов более подробно.

Графический интерфейс

GUI (графический пользовательский интерфейс) или графический пользовательский интерфейс. Это система взаимодействия, предоставляющая пользователям доступ к системным объектам и средствам управления путем отображения информации — через графику на мониторе.

Чаще всего окна используются для вывода на экран команд и результатов их выполнения. Элементы управления программой визуально отображаются в Windows в виде:

  • иконки
  • иконки
  • кнопки
  • меню
  • списки
  • поля ввода и многое другое

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

READ  Настольные игры для двоих. Во что поиграть маленькой компанией. Какие игры можно играть дома 2 человека

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

Сегодня мы совершим экскурсию по истории развития графического пользовательского интерфейса (GUI) в игре World of Tanks. Игра прошла долгий путь к успеху, и ее графический интерфейс несколько раз менялся и полностью переделывался…

GUI в игре World of Tanks. Часть первая: эволюция интерфейсов игры

изображение

Сегодня мы совершим экскурсию по истории развития графического пользовательского интерфейса (GUI) в игре World of Tanks.

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

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

Первые шаги: использование инструментов BigWorld

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

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

Как это работало с точки зрения технической реализации:

  • структура и визуальная часть GUI описаны декларативно в XML;
  • общая компоновка для широкого вида: стили самого вида и набора основных блоков, его составляющих, описанных в XML;
  • каждый из блоков описывается в отдельном XML с указанием используемых стилей и компонентов. Для компонентов заданы соответствующие настройки (название, сообщения локализации, ссылки на стили);
  • стили описаны в отдельных XML-файлах, в которых заданы размеры, положения, используемые текстуры, шрифты, цвета, z-порядок и черт знает что еще;
  • при запуске клиента все эти XML-файлы загружались в Python и анализировались, после чего начинался процесс создания интерфейсов, их инициализация и подключение к игровой логике.

hangar.xml — описание блоков UI в ангаре:

account.xml — описание блока с информацией об учетной записи:

READ  20 самых интересных игр для компании. Во что можно поиграть в 4

styles/common.xml — описание стилей для общих компонентов:

styles/hangar.xml — описание стилей компонентов в ангаре:

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

  • работа с многоуровневым XML сложна для понимания и приводит к большому количеству ошибок, которые сложно локализовать и исправить (например, орфографические ошибки в именовании компонентов и путей текстур, нарушение структуры XML-документа);
  • отсутствие визуальной среды разработки. Единственный способ получить наглядный результат — запустить игровой клиент и воссоздать необходимое окружение для отображения нужного интерфейса. Было просто нереально представить, каково это было бы, глядя на XML;
  • низкая производительность при обработке пользовательского ввода (особенно это было заметно в чате);
  • небольшой набор готовых компонентов и сложность добавления новых компонентов;
  • высокая вовлеченность программистов в процесс создания и модификации (даже минимальной) графического интерфейса;
  • отсутствие инструмента для создания анимации.

изображение

Создание пользовательских интерфейсов — одно из самых важных действий в разработке игр. Евгений Лазебный, дизайнер, разработчик и директор Tapteek, рассказал об этом процессе на основе своего опыта и дал несколько практических советов.

UI Design

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

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

Затем из этой библиотеки я создаю отдельный артборд для экспорта в Unity в виде атласа спрайтов.

Для лучшей оптимизации размер артборда нужно установить 512×512, 1024×1204 или 2048×2048. Если элементов слишком много, лучше использовать больше маленьких артбордов, чем один большой. Это значительно уменьшит окончательный размер в Unity.

В копилке Plarium Krasnodar накопилось много интересных материалов и мы хотим поделиться, как нам кажется, яркими примерами нарративного дизайна, связанного с пользовательским дизайном…

Вместо заключения

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

Если вы сталкивались с подобными примерами взаимодействия интерфейса и истории, делитесь комментариями, будем рады их обсудить 🙂

Оцените статью