Как оформлять карты в цифровых и печатных карточных играх?

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

Я имею большой опыт игры в цифровые карточные игры (Gwent, Legends of Runeterra, PvZ: Heroes, Card Thief и др.), чуть меньший в настольные (Unmatched, UNO, Дурак, Red 7).
Cоздал две настольные и одну цифровую карточные игры. С моими работами можете ознакомиться ниже: DANGER ZONE 2.0, SWINGBALL, Gunt.

В процессе работы над этими играми так и не нашёл концентрированного гайда по этой теме. Не о том «Как создать настольную игру», не «Как сделать карточную игру» — а именно работа над оформлением карты.

Есть ролики, где об этом достаточно рассказывается, но:

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

2. Упоминается больше производственная часть разработки (подготовка к печати, «как сделать ККИ на Unity»), нежели дизайнерская.

И самое главное: нигде не видел роликов о разнице разработки цифровой карточной игры и печатной, и на что стоит обращать внимание в каждой из отраслей.

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

В этой статье мы разберём как оформлять карты в целом; И отдельно посмотрим как оформлять цифровые карты, и как оформлять печатные.

Начнём с общих..

Правил дизайна,

…которые нужно учитывать при прочтении всех следующих пунктов:

• Объекты должны быть контрастны относительно друг друга.

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

Не слишком однотонные, иначе информация не будет считываться.

Для простоты можете перейти на Adobe Color, Специальные возможности и проверить контрастность там.

• Должно быть свободное пространство между объектами.

Текст, еле помещающийся на карте; одна иконка впритык к другой — очень удешевляют дизайн вашей карты.

• Цвета должны сочетаться между собой.

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

Gwent и её цветовые схемы для каждой фракции

После получения минимальной базы перейдём к..

Плану действий

..и советам по оформлению карт:

1. Какая информация должна быть на карте?

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

«На моей карте должны быть указаны:

• Название,

• Изображение,

• Свойства карты,

• Урон,

• Дальность,

• Тип,

• Редкость.»

2. Как должны выглядеть эти элементы на вашей карте?

• Блок текста /

• Эмблема /

• Символ в тексте, набор символов /

• может Цвет рамки /

• или Маленький кружок в углу.

Помните:
Человеку легче воспринимать визуальную информацию, чем письменную.
По возможности избегайте оформления текстом. Или замените часть текста на символы.

Ещё правило:

• Чем чаще игрок пользуется той или иной информацией, тем лучше она должна быть видна на карте.
  Присмотритесь к картам Unmatched (либо Red 7, если на вашей карте не много элементов).

  

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

3. Размер и форма карты

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

• (печат.) Если игрок будет держать карту в руке, важно учитывать удобство при удержании.

Большие карты тяжело держать в руке в большом количестве (7-10).

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

• Можете воспользоваться одним из стандартных размеров карт: 41х63 мм, 44х68, 56х87, 59х92 или 63,5х89. Или взять размер с карты уже знакомой вам игры.

• (печат.) Сглаженные углы

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

• (цифр.) «ПКМ — Подробнее»

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

  К примеру, в Gwent: The Witcher Card Game на карте изначально располагается только

  — изображение карты, очки карты и, при наличии, число брони и разного рода эффекты.

  

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

  

  А при нажатии ПКМ на весь экран показывается карта и справа окно сведений — На карте появляется число Провизии (сила карты, учитывается при сборе колоды, за ненадобностью не отображается в бою), в новом окне помимо параметров из маленького окошка появляется сеттинговое описание персонажа на карте, а справа появляется справка с объяснением всех ключевых слов, упомянутых в способности карты.

  

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

• В печатной версии такое провернуть либо не удастся,

  

  ..либо придётся указывать способности карт в правилах игры.

  

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

4. Расположение элементов, поиск и анализ референсов

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

Всматриваемся в каждый элемент на карте выбранной игры и отвечаем себе на вопросы:

• Почему дизайнер поставил этот объект именно сюда? какие плюсы это даёт;

• Какие у этого есть минусы или могут быть в вашей игре? из-за разных правил или стиля самой игры;

• Где ещё можно было бы поставить этот элемент, и чтобы он также хорошо смотрелся? для избежания плагиата.

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

Располагайте там только неважную информацию, к которой игрок будет редко ссылаться (Описание карты в MTG)

• 10% людей на земле — левши. Поэтому в левый нижний угол тоже ставить элементы нежелательно, хоть и менее критично. Идеальным вариантом

• В руке у большинства карт виден только левый верхний угол, т.к. карты накладываются друг на друга.
  Поэтому числовые значения, тип / класс карты и прочие сведения, на которые игрок смотрит в первую очередь, располагайте там (UNO, Дурак, Red 7, Gwent)

Первый окончательный вариант

После того как вы определились с первым финальным вариантом, нужно сделать:

1. Черновой вариант карандашами на бумаге (плохо сработает для цифровой игры, т.к. не получится «разворачивать информацию» при выполнении некоего действия)

2. Сделать схематичный концепт на компьютере (Adobe Illustrator, да хоть Paint) и напечатать карты на принтере.

3. Сделать схематичный концепт в Miro и протестировать его там.
   (Для печатной игры учитывайте правила удобства в уме (размер карт, правый нижний угол) т.к. здесь вы не сможете проверить эти качества)

• Удобно тестировать игру с другим человеком на расстоянии

• Экономия денег и времени на производстве карт

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

4. Прототип на движке (Unity, Unreal Engine, Game Maker и др.)

• Возможность «разворачивать» сведения карты, изменять размер, создавать новые окна;

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

6. Цикл тестов и корректировок

• Тестируете
  Лучше с другом — желательно, внимательным к деталям, с конструктивной критикой; в идеале, с базой знаний о дизайне и/или гейм-дизайне.

• Подмечаете недочёты
  Сверяете с пунктами, описанными выше — учтено ли <это правило> в дизайне моей карты? Обязательно после партии спрашивайте у тестировщика(ков) что им особенно понравилось или наоборот не понравилось:

  • Как по внешнему виду, красиво ли выглядит;

  • Так и функционально, удобно ли находить нужную информацию.

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

• Пробуете примечательные варианты — до тех пор, пока не найдёте хороший / отличный / или идеальный.
  Зависит от ваших амбиций, перфекционизма, и свободного времени в купе с навыками / опытом.

• Если дошли до этого этапа, перепробовали все имеющиеся, а проблема не решилась — повторяете цикл.

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

  • Пробуйте тестировать одновременно с несколькими тестировщиками — тогда мысли каждого тестирующего будут помогать другим развить свои собственные.
    Так шансы найти наилучшее решение сильно возрастают 🙂

Итог

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

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