51

Дизайн игровых интерфейсов. Брент Фокс. О чём книга?

Данная статья — это краткий обзор книги Game interface design от автора Брента Фокса. Для меня эта книга была интересна с точки зрения программиста, занимающегося разработкой игр в качестве хобби в одиночку. Здесь я опишу, насколько полезной она оказалась для меня и моего хобби.

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

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


Актуальность


Издана книга в 2004 году. Поэтому присутствуют явно устаревшие описания и рекомендации. Например, разрешение ПК 1024x768 называется «очень высоким разрешением». Также для создания интерактивных макетов интерфейса автор предлагает использовать Flash. Хоть Flash уже перестал быть популярной технологией, возможно, для быстрого создания макетов это всё ещё хорошее решение.

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

A Brief History of Adobe Flash [1]


Основные идеи и советы в книге всё же выглядят такими же актуальными и материалы можно считать полезными. Было приятно встретить ныне малопопулярный скрупулезный подход минимизации графических данных, чтобы игра влезала на DVD (или даже на CD) диск, а не весила под 60 ГБ.


Из-за дальности лет книгу нельзя назвать Must Have. Тем не менее она может быть полезной, для меня — была.

Целевая аудитория


Книга в основном ориентирована на начинающих геймдизайнеров — разработчиков интерфейсов, работающий в команде с программистами, художниками, руководством и заказчиками/издателями. Для опытных дизайнеров, наверное, будет малополезна (в том числе судя по отзывам в интернет-магазинах). Основной платформой разработки рассматриваются консоли, и затем ПК. Смартфоны (и тем более VR) не рассматриваются, т.к. до начала их взрывной популярности с выходом iPhone ещё оставалось 3 года.


Для минимальных инди-команд советы тоже окажутся тоже очень интересными. Написана книга легко и увлекательно. Читал я её на английском языке и заковыристых неуместных фраз не обнаружил — всё просто и по делу. На прочтение и конспектирование ушло 16 часов. Последние две главы описывают основы работы в Photoshope и Macromedia Flash, но их можно и пропустить.


Законспектированные идеи из книги


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


14. Если у вас супер крутая и креативная идея по игровому интерфейсу, то стоит дотошно её рассмотреть (сюда входят и способы управления в игре). Возможно, её уже пытались реализовать, но нашлись очень веские причины от неё отказаться. И не факт, что теперь удастся решить их (да и вообще, стоит ли оно того?). Новый интерфейс и управление может стать фишкой игры, но может и сделать её неудобной и непонятной.


18. Незамыленный взгляд. Для того, чтобы по-новому взглянуть на свою работу, нужно изменить способ его «получения». Например: на другом устройстве; заменить тексты прямоугольниками; изменить масштаб; перевернуть; отойти от стола подальше или сбоку.


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

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

Когнитивные искажения в пользовательских интерфейсах. [2] Эта статья раскрывает тему подробнее, хотя больше ориентирована на веб-дизайнеров.


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


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

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

Вертикальные и горизонтальные линии наоборот придают устойчивость и стабильность картинке.


32. Пересечение объектов. Объекты должны либо впритык примыкать, либо заметно пересекаться.

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

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


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


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


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


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


Как и с любой графикой, с иконками нужно опасаться проблем с копирайтом. Поэтому надёжнее делать свои версии иконок «по примеру» другой игры. Но и с этим могут быть проблемы.

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

Например, использование красного креста на белом фоне в аптечках (и других элементах) запрещено и Вас вполне могут «вежливо засудить». Это периодические делает организация «Красный крест», подробнее в статье «Неожиданная реакция: «Красный крест» требует убрать свою символику из игры Prison Architect» [3]


55. Динамические элементы в HUD (внутриигровой, «всегда» активный интерфейс). Нужно анализировать необходимость показа всей информации в HUD — действительно ли она всегда должна быть видна и доступна, может быть только в определенном состоянии? Например, в стратегиях часто прячут полоски здоровья у полностью здоровых персонажей, и показывают их только в случае их ранений.


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


Об авторе


Брент Фокс. На момент написания книги проработал в игровой индустрии 7 лет в должностях проект-менеджера и арт-директора (тогда ему было 34 года). Работал/управлял командами до 27 человек, а также работал с очень бюджетными играми. Разрабатывал игры на самых разных консолях. Работал в студиях: Bla-Dam Studios, Furious Games. [4]

Дизайн игровых интерфейсов. Брент Фокс. О чём книга? Gamedev, Компьютерные игры, Интерфейс, Инди-Разработка, Flash, Coolai, Рецензия, Гифка, Длиннопост

Сейчас автор книги работает арт-директором в Wahoo Studios [5]. В основном разрабатывают игры на консоли по контракту с Microsoft и Electronic Arts.


Заключение


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

Ссылки на источники и дополнительную литературу


1. A Brief History of Adobe Flash

2. Когнитивные искажения в пользовательских интерфейсах

3. Неожиданная реакция: «Красный крест» требует убрать свою символику из игры Prison Architect

4. Game interface design — Brent Fox на Амазоне

5. Wahoo Studios — Games

Найдены дубликаты

+3

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

+1

Не... UI/UX меняется каждый год практически, и книга 15 летней давности уже вряд ли расскажет что-то адекватное. Какие-то общие вещи - возможно, но лучше найти что-то современное.

-1
Ощущение будто бы я эту статью уже читал и картинки видел в одном же наборе
раскрыть ветку 1
0

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

Похожие посты
168

Demon Blast - 2.5D шутер для ПК и мобилок. Как я не смог бросить проект.

Приветствую! В скором времени будет завершена работа над демо-версией моей игры, с которой можно как ходить по шоукейсам-конференциям, так и искать издателя. Проект - 2.5D-шутер для ПК и мобилок. Почти каждый, кто его видел, спрашивает, вдохновлялся ли я Doom'ом. Скажу сразу - нет, источником вдохновения стал Blood, немного Wolfenstein и технические ограничения. Ведь эта почти 3-хмерная игра сделана на 2д движке.

Demon Blast - 2.5D шутер для ПК и мобилок. Как я не смог бросить проект. Flash, Starling, Gamedev, Длиннопост, Гифка, Видео

С чего все началось. В 2012 году, когда флэш еще был жив, я в какой-то момент заметил, что в Адоб Флэше 2д-контейнерам можно задавать позицию в 3д пространстве - самое простое подобие 3д, без корректного порядка отрисовки объектов, для самых простых псевдо-3д эффектов. К чему могла привести эта информация, попав ко мне, пропитанному воспоминаниями о Blood? Конечно же, я должен был попытаться сделать какое-то подобие 3д пространства. В итоге получилось что-то такое, плохо написанное, еле дышащее, но демонстрирующее идею.

Demon Blast - 2.5D шутер для ПК и мобилок. Как я не смог бросить проект. Flash, Starling, Gamedev, Длиннопост, Гифка, Видео

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


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


Работая по вечерам, за пару недель накидал код, нарисовал графику - и получилось что-то такое (уже лучше, чем попытка 2012 года)

Отправил это видео как заявку на участие в шоукейсе Старкона 2015-го года. И внезапно прошел. Каким-то образом удалось найти среди знакомых художников желающих помочь облагородить арт игры к выставке. В итоге за считанные дни игра преобразилась до такого состояния:

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

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

Demon Blast - 2.5D шутер для ПК и мобилок. Как я не смог бросить проект. Flash, Starling, Gamedev, Длиннопост, Гифка, Видео

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

В последующие 2 года я продолжал какие-то эксперименты с другими прототипами и игрушками. И где-то в этот момент я познакомился с игрой Wolfenstein: New Order. В перерывах между основными миссиями там можно было найти пасхалку и поиграть в уровень оригинального пиксельного Вульфинштейна. До этого я старый Вульфинштейн не видел. И вот что меня удивило - этот уровень был на удивление примитивным, но в него все еще было интересно играть. И функционала в нем было гораздо меньше, чем в моей игре. Я понял, что при всех ограничениях и недостатках я все еще могу сделать из своего шутера интересную игру. Ну, или хотя бы попытаться.

В прошлом году я с новой силой взялся за работу - заказал побольше красивого арта, собрал еще 13 уровней, написал новый функционал. Из нового функционала добавились : двери, открываемые ключами, которые надо искать; секретные области на уровне, которые смогут найти только самые упорные; сражения с боссами; система диалогов с NPC; возможность изучать окружающие предметы; телепорты + еще уйма разных мелочей.

Эти 30 секунд фрапса не показывают все изменения, произошедшие в игре, но дают примерное представление о ее состоянии на данный момент:

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

Показать полностью 1 3
183

Android 2.5d Платформер. Немножко кастомизации.

242 дня назад я закидывал видос с самым начальным концептом платформера которых хотел делать. Спустя почти год. Уже почти все готово.
В течении 200 дней я столкнулся с кучей проблем. Производительность слабых смартфонов заставила ужаться в плане амбиций, я стараюсь сделать игру максимально оптимизированной т.к. сам не люблю когда игры не только толмозят, а когда они греют смартфон.
На данный момент как результат, бюджетный смартфон за 8к не греется :)

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

Вот собственно 5 наборов по 7 элементов в каждом.

Android 2.5d Платформер. Немножко кастомизации. Indie, Игры, Инди, Платформер, Android, Кастомизация, Интерфейс, Gamedev, Длиннопост

А вот меню кастомизации.

Android 2.5d Платформер. Немножко кастомизации. Indie, Игры, Инди, Платформер, Android, Кастомизация, Интерфейс, Gamedev, Длиннопост

И меню выбора - покупки элементов, а также улучшения.
Каждый элемент дает те или иные параметры используемые в геймплее. Всего как видите их восемь, а удача влияет не только на шанс лута но и на вероятность заточки.
Заточка за COIN монеты, которые можно выбить на уровнях или получить за просмотр рекламы.
Последние 2 шлема дают преимущества в борьбе с INVISIBLE врагами и тайниками.

Android 2.5d Платформер. Немножко кастомизации. Indie, Игры, Инди, Платформер, Android, Кастомизация, Интерфейс, Gamedev, Длиннопост

Сам интерфейс я перерисовывал раз 10, как и перерисовывал персонажа, текстуры итд. На данный момент результат для меня приемлемый. Сделаю еще 1 пост про геймплей и буду запускать закрытую альфу для пользователей Пикабу.
Если есть вопросы с удовольствием отвечу в комментариях.
Жду вашей оценки. Спасибо :)

Показать полностью 1
211

Работаю над интерфейсом в режиме полетов в космосе. Названия объектов, состояние, радар

Сейчас работаю над интерфейсом в космосе и радаром (мини-картой). Отображение оборудования/корабельных систем еще не запилил. Пока что реализован радар и отображение "на дисплее" информации об объектах - названии, скорости, целостности структуры и щитов.

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

Работаю над интерфейсом в режиме полетов в космосе. Названия объектов, состояние, радар Хобби, Программирование, Gamedev, C++, Звездные ангелы, Интерфейс, Длиннопост

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

Работаю над интерфейсом в режиме полетов в космосе. Названия объектов, состояние, радар Хобби, Программирование, Gamedev, C++, Звездные ангелы, Интерфейс, Длиннопост
Работаю над интерфейсом в режиме полетов в космосе. Названия объектов, состояние, радар Хобби, Программирование, Gamedev, C++, Звездные ангелы, Интерфейс, Длиннопост

Как-то так. Не очень быстро (из-за нехватки времени), но работа над проектом движется.

Показать полностью 2
Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: