История интерфейса Hearthstone: лекция дизайнера Blizzard

На DFT.RU опубликована интересная статья про разработку интерфейса карточной игры Hearthstone. Несмотря на то, что к играм из картона она имеет крайне опосредованное отношение, рекомендую её всем прочитать, потому что статья – классная. И, заодно, она объясняет почему iOS до 7 версии была лучше. 

Меня зовут Дерек Сакамото и я — старший дизайнер интерфейса Hearthstone. Последние 12 лет провёл в Blizzard и разрабатывал интерфейс World of Warcraft, начиная с оригинальной версии и заканчивая дополнением Wrath of the Lich King.

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

Найти свой путь

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

Для начала я покажу вам, как делать не надо. То есть, продемонстрирую первые версии интерфейса Hearthstone. Познакомьтесь с Warcraft Legends.

Эта версия называлась Fire and Ice, и именно благодаря ней нам разрешили начать полноценную работу над проектом. В то время единственными доступными классами были Маг и Разбойник, и мы, вроде бы, работали над Чернокнижником. Чуть позже стало очевидно, что мы идём совсем не в том направлении.

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

Это реальный скриншот прототипа, разработанного на Flash. На нём мы сделали целую игру, в которой, правда, был только одиночный режим. Идею и сюжет практически в одиночку разработал ведущий дизайнер игры Бен Броуд.

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

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

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

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

И так появилась концепция шкатулки.

Ящик открывался, появлялась карта мира. Затем игрок выбирал персонажа

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

Благодаря ей появился весь остальной интерфейс.

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

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

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

Ну, только если сервера вдруг не переполнятся. Тогда на двери будет висеть табличка.

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

Автор очень хорошо понял нашу идею, довёл её до совершенства, создав настолько атмосферное изображение. Оно передаёт ощущение от игры в Hearthstone в мире World of Warcraft.

Идея таверны, где собираются любители поиграть, была настолько сильна, что вдохновила множество организаторов соревнований по Hearthstone, в том числе и Blizzard.

Вот так, к примеру, выглядит сцена, на которой проходит финал.

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

Мои слова порождают вполне резонный вопрос. Да, ориентир это круто и всё такое, но как его найти? Что нужно для этого сделать? Честно говоря, я не знаю. Но я могу рассказать, что лично мы для этого сделали.

Мы начинали с очень плоского скучного интерфейса

Потом решили, что игра должна быть трёхмерной

Итак, поиск ориентира:

— Помните, что путь к желанному не бывает быстрым и простым. Если только вам не повезло, или если вы не гений. К нам это не относится.

— Ориентир важно найти как можно раньше. Потому что тогда всё станет проще.

— С ним ваш проект станет лучше, цельнее.

— Если вы действительно хотите, чтобы ваша игра стала чем-то особенным, то ориентир необходим.

Давайте сделаем игру, которую будто бы можно потрогать

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

И предметы в ней сразу обрели ценность.

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

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

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

Поиск оппонента

Магазин

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

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

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

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

А этот торт – настоящее произведение искусства

И это тоже прекрасно. Я бы точно от такого не отказался

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

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

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

Другой недостаток нашего подхода — ресурсоёмкость. Разработать настолько выверенный и продуманный интерфейс непросто. Я потратил два года жизни на продумывание интерфейса конструктора колод.

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

Впрочем, работа стоила того: в Hearthstone интерфейс — это едва ли не самое главное. В ней нет огромного виртуального мира, монстров, которые бегают туда-сюда. Есть только доска и ящик. Так что нет ничего странного в том, чтобы потратить кучу ресурсов на интерфейс.

Но были и проблемы.

Может, вы дадите нам одну кнопку, чтобы нам не приходилось переключать экраны семь раз, чтобы изменить одну единственную карту в колоде?

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

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

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

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

Интерфейс занимает достойное место

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

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

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

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

Ещё один пример. Мы разработали доску и поняли, что на ней помещается всего по семь существ с каждой стороны. Хм, подумали мы, всегда можно просто уменьшать их во время призыва новых. Но ведь в реальности такого бы не могло произойти, в этом случае элементы игрового поля перестали бы казаться «осязаемыми» и реалистичными. Кроме того, лимит на семь существ – интересная игровая механика.

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

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

Ещё более древняя идея. Механика «цепи» позволяла противнику ответить на ваши действия во время вашего хода. А вы могли ответить своей картой на его противодействие. Но если зайти слишком глубоко и далеко, экран сильно засоряется и выглядит некрасиво. Да и с точки зрения дизайна это была не такая уж и крутая механика, поэтому мы от неё избавились.

В общем, дизайн интерфейса — это часть общего процесса разработки.

И вот он я, одинокий гений. Рядом остальная команда. Столько нас было в 2012 году.

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

Теперь нас ещё больше

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

Затем продолжаем испытывать разные варианты дизайна в 2D, пока не найдём то, что нужно.

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

Ближе к концу в дело вступают программисты и вместе с 3D-художниками занимаются реализацией наших планов и набросков.

Вот так всё и делается. А теперь давайте подведём небольшой итог:

— Попытайтесь отыскать ориентир. Само его наличие очень поможет проекту и позволит в долгосрочной перспективе сэкономить кучу ресурсов.

— «Осязаемый» интерфейс — это круто в подходящем контексте.

— Если к дизайну интерфейса относиться так же серьёзно, как к другим сторонам разработки, то вам это только пойдёт на пользу. Я могу это гарантировать.