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

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

Я имею большой опыт игры в цифровые карточные игры (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 и её цветовые схемы для каждой фракции

234b5684929785f0413cb3e1dc1cda98.png

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

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

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

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

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

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

a8cba957b00f38a0096d1bc283d8532c.png

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

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

  • Эмблема /

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

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

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

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

Ещё правило:

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

    035abfca51ffd6aca94eb9f55243a038.png


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

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

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

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

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

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

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

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

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

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

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

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

    fff8d02f38612ccd4a7f7105c01e12c1.png

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

    09b4508f5d88bbac718571ab6d028794.png

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

    bef02190e685963652782670acb592db.png

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

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

    Пример — MTG, где всё указано на самой карте

    Пример — MTG, где всё указано на самой карте

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

    Red 7, UNO, и др.

    Red 7, UNO, и др.

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

Plants vs. Zombies

Plants vs. Zombies

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

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

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

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

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

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

6218a27e94538c3369eb11d61418fa6c.png

Например, для своей DANGER ZONE 2.0 я опирался на дизайн карт Gwent, MTG, Inscryption, Unmatched и Трон Кубов;
Для SWINGBALL: UNO, Red 7 и кастомные Покер-колоды;
А для Gunt — UNO, Red 7 и Гвинт.

d3d78d1da4cb15716f63c367b6b7000e.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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

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

© Habrahabr.ru