Как создать игру hearthstone

Обновлено: 02.07.2024

Давно мечтали о своей ККИ, убийце MTG и Hearthstone? Как известно, долгий путь начинается с первого шага, и в случае карточных игр таковым может стать бумажный прототип.

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

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

У программы я могу отметить следующие плюсы: интеграция с Google Docs, простота внесения изменений, наличие своего-вроде-как языка, куча классных фичей; а также следующие минусы: присутствие багов, сложности при работе с кириллицей и программист-стайл интерфейс.

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

Что в документе для нас важно, так это названия столбцов. Ну, для примера, пусть будут такие:

NAME — название карты (например, «Лютный укус»)
EFFECT — текст действия карты («Нанести 300 урона»)
MANA — мана-стоимость («3»)
TYPE — тип карты («Заклинание»)
IMAGE — изображение для карты («Bite.jpg»)
FLAVOUR — нарративный текст («Лютоволк жрет мою лютню!», - Ю.А. Лютик)
QUANTITY — сколько карт нам понадобится для распечатки

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

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

Центральное окно занимает редактор скриптов. В нем мы и будем работать, отвлекаясь лишь на визуальное оформление карт.

Итак, приступим к написанию скрипта! Начинаем со следующего заклинания:

LINKMULTI указывает на столбец, который используется для умножения количества карточек в результирующем наборе карт. То есть, если мы хотим в итоге распечатать 2 такие-то карточки, то в этом столбце в Spreadsheets поставим число 2. В нашем случае столбец называется QUANTITY, на него и ссылаемся.

Поставив курсор на директиву (например, на LINKMULTI) и нажав F1 можно прочитать справку внутри софта.

Чтобы наш результат не исчез, сохраняемся ("Save") и запоминаем, куда сложили текстовый файл со скриптом: потом сюда же будем складировать изображения.

LINK = 1QqtBHpPZ81HvIidBqXvxtBB_nT4Kuqk8wkGOHfhMcdY

Далее вносим ссылку на наш Google Spreadsheet. Данный буквенный код можно найти в адресной строке вашего документа ("https://docs.google.com/spreadsheets/d/ВОТ_ТУТ"). Альтернативно можно указать и локальную xlsx таблицу, тогда значение было бы чем-то вроде C:\MyFolder\MyProt.xlsx.

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

Настройки директивы PAGE звучат довольно интересно: размеры в сантиметрах, ориентация и дополнительные качества (в данном случае, центрирование по горизонтали и вертикали).

BORDER — настройки границы карты: тип (ROUNDED, RECTANGLE, MARK, NONE) , цвет и толщина. У меня NONE, но решил привести здесь на тот случай, если у вас-таки будет не NONE.

GAP — расстояние между карточками.

Следующий блок мы сделаем автоматом, нажав на кнопку Visual Editor.

После этого нам понадобятся кнопки Image, HTMLFont и HTMLText, что в левой части нового неистового экрана. Первым делом вставим фон, нажав на Image. В правой части окна появилась строка Image. Щелкаем по ней правой кнопкой и указываем в поле "Image file" локацию нашей подложки (среди прилагаемых изображений она называется "BG.jpg").

Остается добавить изображения и всяческие текстовые поля для конкретных карточек. Для начала разберемся с тектовыми данными. Вообще синтаксис, по-видимому, как-то связан с HTML, поскольку есть говорящие об этом кнопочки. Для текстовых полей нам понадобится сначала HTMLFont.

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

Затем выбираем HTMLText. Давайте-ка заведём название карточки из прототипа. Чтобы появилась связь с таблицей, в настройках HTMLText в поле "text" нужно указать название столбца в квадратных скобках (т.е. [NAME]). Также указываем ссылку на наш шрифт в поле "htmlfont".

Обязательно нужно отметить флаг Explorer render, иначе не видать вам кириллицы. Флажок Transparent убирает фон. Также обратите внимание на формат в поле "range".

Далее добавляем еще один Image и указываем в поле "image file" [IMAGE]. Чтобы программа подтянула изображения по ссылкам из таблицы, необходимо, чтобы файлы изображений лежали рядом с текстовым файлом прототипа. Ну, то есть там, где мы его сохранили в самом начале.

Чтобы читалась прозрачность у .jpg, нужно указать флаг "Transp.". Флаг "Proport." устанавливаю для того, чтобы картинка не искажалась при масштабировании.

Остается дело за малым: нужно завести оставшиеся текстовые поля. Мы уже умеем заводить текст, поэтому достаточно это сделать по аналогии с заголовком карты и настроить шрифты по своему вкусу.

Весь код из этой статьи целиком (с ним получится результат, как тот, что выше):

Теперь осталось собрать карты в печатном виде. Для этого нужно последовательно нажать кнопки в левой части экрана: "Validate deck", "Build deck", "PDF". Вуаля!

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

В итоге у нас получилась симпатичная PDFка. Теперь вы можете легко менять свой spreadsheet и пересобирать новые PDF по нажатию трех кнопок! Прототип можно распечатать и получить приятный результат:

Бонусный факт: получившуюся PDF легко использовать в Tabletop Simulator (там буквально можно «нарезать» PDF) для игры с другом в ваш новый прототип по интернету! Тогда и принтер можно не терзать.

Возможно, для пяти карт такая подготовка и скриптование кажутся излишними, но если ваш прототип вырастет до объема в, скажем, 7 карт, то сами понимаете.

Все ссылки в одном месте:

Минутка рекламы

Изначально nanDECK я изучал для прототипирования игры, которую разрабатываю. Кстати, мы сейчас ищем 3д-аниматора, если вы такой, то пишите! Ну и конечно, вступайте в группу в ВК, подписывайтесь на твиттер, спасибо за внимание.

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

Возможно задам тупой вопрос, но я в принципе тупой так что не всё ок. Посмотрел я на эти танцы с бубном чтобы сделать простую PDF c 9 картами, и всё никак не пойму, а почему нельзя воспользоваться фотошопом, например? Редактируется текст там точно так же быстро как и в табличке.

Как автор карточной игры могу сказать - таблички необходимы.

Обычно любая колода для адекватной рандомизации должна содержать 20-30 карт. Если вам нужно пару колод - уже 40-60 карт. Эвенты? Еще одна колода.

Все верно, в данном случае можно и не копировать в табличке: есть специальный множитель (QUANTITY)

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

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

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

Дружище, это реально лучшая статья на этом сайте за очень долгое время (я даж ещё до конца не прочитал - потому что параллельно делаю, чтобы вникнуть, но уже могу это сказать). Вы большой молодец. Никакого пердежа в лужу, только по делу, причём полезная штука. Тут же можно не ток ККИ прототипировать, и настолку какую-нить и т.д. Можно и боёвку пошаговую в стиле jrpg с таким инструментарием запрототипировать.
Просто космос.
Удивлён, что за сутки всего 45 ЛюКенгов.
Я это даже себе на стену в вк сохраню.
Очень круто!
Зарегался на сайте где-то 1,5 года назад, чтобы пошутить в комментах про Джилленхола, и с тех пор думал, что площадка плюс-минус бесполезная. За всё время наткнулся на 5-6 реально крутых материалов (включая ваш).
Ради таких постов, даже если их будет появляться по одному на 3-4 месяца, реально стоит скроллить ленту каждое утро!
Ещё раз спасибо! ред.

Спасибо, приятно слышать! Рад, что статья понравилась)

А текст можно писать только прямой или можно закруглить немного дугой?

Гляну, спасибо. А pdf, при сохранении, получается одной картинкой а4 на листе, или слоями сохраняет, позволяя в случае чего быстренько отредактировать текст в pdf файле соответствующим советом без повторной компиляции в этой среде?

Не, каждая карточка сохраняется как изображение - ни слоёв, ни текста.

В PDF у меня не получилось отредактировать, но может при наличии нужного пдфного софта это и возможно

Заинтересовался бы, будь возможность проводить анализ карт.

Владимир, ну зачем такое развернутое и подробное руководство? Сейчас народ понабежит и наделает своих ККИ, Gabe Newell тогда вообще не дождется успеха Artifact!

Ага, наступит нашествие российский ККИ)

Хороший материал. Вот просто хороший материал.

"руководство на английском" (с).
Лол. Если решил сразу прогнутся под западный рынок, то почему ты принес свою рекламу сюда на русском?!

Головоломка №2 – расы

Начните новую игру против Хозяина таверны и пораньте свою Изеру «Лунным затмением». После этого перед вами появится поле с различными существами. Внимание: у каждого игрока будут разные существа, но путь решения головоломки одинаковый.

Перед вами поле, забитое существами с разными расами, а в руке 10 заклинаний под каждую расу. Заклинания можно использовать неоднократно.

Расы соответствуют номеру, с которым карта лежит в руке, слева направо:

1 – демоны
2 – механизмы
3 – элементали
4 – звери
5 – пираты
6 – драконы
7 – свинобразы
8 – тотемы
9 – все (существа с меткой «Все», то есть, слияния)
0 – мурлоки

Решение первой фазы головоломки

1. Посмотрите, к какой расе принадлежат существа слева и справа от существа «?» в нижней части стола.

На моем скриншоте: слева свинобраз, справа тотем.

2. Найдите в верхней части идентичных существ.

На моем скриншоте: 1 и 6.

3. Сложите расы существ по их номерам (вверху список) от левого до правого включительно .

На моем скриншоте: от 1 до 6 находятся свинобраз (7) + мурлок (0) + демон (1) + пират (5) + пират (5) + тотем (8) = 26.

Из получившегося у вас числа возьмите только последнюю цифру – она и будет расой вашего существа «?». У меня получилось 6, поэтому мой «?» – дракон.

4. Найдите в руке заклинание, соответствующее расе этого существа, и примените на него. Внешне существо изменится.

5. Снова посмотрите на существ в верхней части. Чтобы вычислить здоровье вашего «?», нужно сложить все здоровье существ в определенном промежутке (от 1 до 6 у меня, у вас могут быть другие значения).

6. Из получившегося числа возьмите три цифры и запомните их, а потом примените в обратном порядке . Например, если у вас получилось 765, то вы должны запомнить 567. Примените заклинания рас на существо «?» в этом порядке – то есть, для цифры 5 «пиратов», для цифры 6 «драконов», для цифры 7 «свинобразов» . В моем случае это «все», «драконы», «все», у вас будут свои значения.

7. Таким же методом посчитайте атаку вашего существа «?». Сложите все цифры атаки существ из верхней части экрана в вашем промежутке, возьмите три последних цифры и «переверните» их.

Значит, нужно применять заклинания в порядке 5 – 1 – 9, что соответствует «пиратам», «демонам» и «всему».

8. Если вы посчитали все правильно, то по бокам от вашего существа появятся «Разрушитель времени» и «Буканьер».

Не волнуйтесь, если существо снова будет обозначено как «?». Это значит, что вы вошли во вторую фазу головоломки.

Головоломка №1 – порталы

После взаимодействия «Оракула Элуны» и «Лунного огня» перед вами появится два портала.

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

Порталы с 1 здоровья нельзя пройти. Ваша задача – сделать так, чтобы у всех порталов осталось 1 здоровья (порталы с 5 здоровья нужно пройти минимум 4 раза). Пользователи реддита поделились полной картой приключения, смотрите снизу вверх.

А если вам привычнее читать текстом, то вот полное прохождение головоломки порталов в 46 этапов:

После прохождения откроется подсказка к второму этапу головоломки – «Лунное затмение» ударит по Изере.

Как я сделал свой Hearthstone с флеймстрайками и фаерболами

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

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

Также мне было важно реализовать идею смены здоровья и силы атаки у существ. Записывать всё на отдельном листочке мне очень не хотелось и это точно бы похоронило весь интерес. Эту проблему я решил достаточно просто — я сделал все карты по принципу карманных календарей. Слегка высветлив область атаки/здоровья, я мог видеть базовые навыки, но, в то же время, мог указывать и свои значения на картах. Следом я сделал ламинацию — и теперь могу легко изменять атаку и здоровье при помощи маркеров.

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

В типографии пришлось заказывать по 9 или 18 экземпляров карт, именно столько помещалось на листе. Это значительно удешевляет производство, а значит я смогу в будущем подарить настольные колоды своим друзьям. Самая дорогая карта (хотя стоимость всех карт была одинакова) — это Ониксия. Ведь, по сути, это не одна карта, а целых 7 (при учете выхода карты на пустой стол).

Следующим этапом мне надо было придумать реализацию положительных и отрицательных эффектов, и тут на помощь пришли классические жетоны. Я решил не делать скучные надписи, а просто подобрал картинки к каждому свойству (надеюсь, вы сможете угадать, что они обозначают). Также в форме жетонов, но меньшего размера я сделал кристаллы маны (заменяется чем угодно, хоть монетками, но хотелось эстетики).Еще в игру пришлось внедрить кости. Те же чародейские стрелы стреляют по случайным целям. В определении этой случайности нам помогают кости на 4,6,8.

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

Решение второй фазы головоломки

Самое сложное позади, теперь можно просто скопировать порядок, в котором вы будете применять заклинания расы на свое существо «?». Считать ничего не нужно, у всех эти значения одинаковые.

2 9 1 3 9 9 7 (механизмы, все, демоны, элементали, все, все, свинобразы)
7 6 0 5 2 1 8 (свинобразы, драконы, мурлоки, пираты, механизмы, демоны, тотемы)
2 3 7 2 3 5 8 (механизмы, элементали, свинобразы, механизмы, элементали, пираты, тотемы)
6 1 9 0 8 4 9 (драконы, демоны, все, мурлоки, тотемы, звери, все)
8 7 4 7 7 8 7 (тотемы, свинобразы, звери, свинобразы, свинобразы, тотемы, свинобразы)

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

Вот и все, что нужно знать о том, как решить головоломки и получить секретную рубашку «Сплоченных Штормградом».

Как получить секретную рубашку и ачивку «. » в Hearthstone? Новая головоломка в «Сплоченные Штормградом»

Blizzard Entertainment

Все решения – здесь.

С недавних пор в Hearthstone появляются головоломки – вы могли заметить странную ачивку «. » без описания в списке достижений. За выполнение головоломки дополнения «Сплоченные Штормградом» вы получите симпатичную рубашку Элуны. Разгадку нашла команда WoW Secret Finding.

Как получить эту секретную рубашку? Для решения обеих головоломок потребуется 440 пыли. Создайте колоду, в которой будет хотя бы один «Оракул Элуны», «Лунный огонь» (карта из вольного), «Лунное затмение» и Изера Дремлющая. Она пригодится для решения обеих головоломок. Можете создать свою колоду или воспользоваться кодом ниже.

Код колоды: AAEBAeSiBAKoigS0igQO0wOJ4AO24QPJ9QOJnwSmnwSunwTZnwTanwTbnwTcnwShoAS4oATeoAQA

После этого зайдите в меню PvE, выберите тренировку против Хозяина таверны, выберите нормальную сложность и класс, против которого будете играть.

Для открытия первой головоломки нужно за один ход сыграть только «Оракула Элуны» и ударить ее «Лунным огнем».
Во второй головоломке нужно поставить Изеру, а потом ударить по ней «Лунным затмением» – не обязательно делать это за один ход, главное, чтобы Изера выжила.

Как создавался интерфейс карточной игры Hearthstone: лекция дизайнера Blizzard

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

Редакция DTF публикует перевод лекции.

Меня зовут Дерек Сакамото и я — старший дизайнер интерфейса 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, пока не найдём то, что нужно.

Читайте также: