При создании карточный игры, не важно, печатной или цифровой, каждый разработчик задумывается не только о принципе работы его карт, но и об оформлении. На первый взгляд может показаться, что «Карта — она и в цифре карта, и на бумаге карта». Однако оформление этих карт отличается.
Я имею большой опыт игры в цифровые карточные игры (Gwent, Legends of Runeterra, PvZ: Heroes, Card Thief и др.), чуть меньший в настольные (Unmatched, UNO, Дурак, Red 7).
Cоздал две настольные и одну цифровую карточные игры. Мои работы: DANGER ZONE 2.0, SWINGBALL, Gunt.
В процессе работы над этими играми так и не нашёл концентрированного гайда по этой теме. Не о том «Как создать настольную игру», не «Как сделать карточную игру» — а работа над оформлением карты.
Есть ролики, где об этом достаточно рассказывается, но:
В них есть вода в виде личной истории создания игры, которая больше интересна зрителям канала, чем гейм‑дизайнерам;
Упоминается больше производственная часть разработки (подготовка к печати, «как сделать ККИ на Unity»), нежели дизайнерская.
И главное, нигде не видел ролик о разнице разработки цифровой карточной игры и печатной, на что стоит обращать внимание в каждой из отраслей.
В целом, в русскоязычном сегменте мало информации о разработке карточных игр. Либо она разрозненная, либо расплывчатая, или много воды.
В этой статье мы разберём как оформлять карты в целом; И отдельно посмотрим как оформлять цифровые карты, и как оформлять печатные.
Начнём с общих..
Правил дизайна,
.которые нужно учитывать при прочтении всех следующих пунктов:
Объекты должны быть контрастны относительно друг друга.
Не слишком яркие, иначе глаза будут уставать.
Не слишком однотонные, иначе информация не будет считываться.
Для простоты можете перейти на Adobe Color, Специальные возможности и проверить контрастность там.
Должно быть свободное пространство между объектами.
Текст, еле помещающийся на карте; одна иконка впритык к другой — очень удешевляют дизайн вашей карты.
Цвета должны сочетаться между собой.
На том же Adobe Color или Coolors можете подобрать цветовую палитру под свои нужды. Может быть полезно как для дизайна всей карточной игры, так и для отдельных карт, типов, классов или фракций
Gwent и её цветовые схемы для каждой фракции
![](https://habrastorage.org/getpro/habr/upload_files/234/b56/849/234b5684929785f0413cb3e1dc1cda98.png)
После получения минимальной базы перейдём к..
Плану действий
и советам по оформлению карт:
Какая информация должна быть на карте?
Соберите список из всего содержательного, что должно быть на вашей карте.
К примеру:
«На моей карте должны быть указаны:
![](https://habrastorage.org/getpro/habr/upload_files/a8c/ba9/57b/a8cba957b00f38a0096d1bc283d8532c.png)
Название,
Изображение,
Свойства карты,
Урон,
Дальность,
Тип,
Редкость.»
Как должны выглядеть эти элементы на вашей карте?
Блок текста /
Эмблема /
Символ в тексте, набор символов /
может Цвет рамки /
или Маленький кружок в углу.
Помните:
Человеку легче воспринимать визуальную информацию, чем письменную.
По возможности избегайте оформления текстом. Или замените часть текста на символы.
Ещё:
Чем чаще игрок пользуется той или иной информацией, тем лучше она должна быть видна на карте.
Присмотритесь к картам Unmatched (либо Red 7, если на вашей карте не много элементов).
Самые важные элементы находятся в левой части карта и занимают много места. Менее важные стоят либо справа (Усиление в кружке справа), либо ещё расписано мелким шрифтом самым нижнем углу карты (Принадлежность к персонажу; Кол‑во карт в колоде)
Размер и форма карты
Эти две темы часто переплетаются друг с другом, поэтому обсудим в одном пункте.
Несколько правил для правильного выбора:
(печат.) Если игрок будет держать карту в руке, важно учитывать «удобно ли её держать?».
Большие карты тяжело держать в руке в большом количестве (7–10).
Поэтому карты должны быть не такими большими, чтобы удобно лежали в руке; но максимально большими, чтобы как можно легче считывались изображения и текст;
При уменьшении размера карты не забывайте о правиле дизайна — свободное пространство между объектами.
(печат.) Никто не будет подстраиваться под нестандартный размер ваших карт:(
Чтобы сохранить долговечность карт игрок наверняка захочет купить к ним протекторы.
Есть стандартные размеры карт: 41×63 мм, 44×68, 56×87, 59×92, 63,5×89 и так далее.
Под них протекторы можно найти в магазинах. Под нестандартные — скорее всего, нет.
Не доставляйте сложности вашему игроку дольше играть в вашу игру‑ делайте карты стандартного размера.
(печат.) Сглаженные углы
Если оставить углы прямыми, игрок будет о них резаться, что сильно испортит экспириенс от продукта.
(цифр.) «ПКМ — Подробнее»
В цифровой игре менее нужную информацию вы можете скрыть в отдельное окно, которое будет открываться после определённого действия игрока.
К примеру, в Gwent: The Witcher Card Game на карте изначально располагается только— изображение карты, очки карты, число брони, если броня есть, и разного рода эффекты. (Если брони нет, не показывается значение 0 — иконки просто нет. Оптимизация!)
После наведения курсора на карту, справа появляется окошко, на котором указано — название, класс карты и способность.
А при нажатии ПКМ на весь экран показывается карта и справа окно сведений.
В правом нижнем углу карты появляется число Провизии (сила карты, учитывается при сборе колоды, в бою за ненадобностью не отображается);
в новом окне помимо параметров из маленького окошка появляется сеттинговое описание персонажа, а справа — справка с объяснением всех ключевых слов, упомянутых в способности карты.Таким образом удаётся и указать всю необходимую информацию, и не перегружать интерфейс карты и игры в целом.
В печатной версии такое провернуть либо не удастся,
Пример — MTG, где всё указано на самой карте либо придётся указывать способности карт в правилах игры.
Red 7, UNO, и другие Или, если это сеттинговое описание и прочая необязательная информация, сделать альманах либо артбук.
![Plants vs. Zombies Plants vs. Zombies](https://habrastorage.org/getpro/habr/upload_files/b00/7fd/0f7/b007fd0f78e7e58c81253ee6b76f5eab.png)
Расположение элементов, поиск и анализ референсов
Теперь, когда вы поняли как примерно должна выглядеть ваша карта, можно поискать игры с похожим количеством элементов и подметить для себя удачные решения каждой из них, которые могут пригодиться вам для своей карточной игры.
Всматриваемся в каждый элемент на карте выбранной игры, задаём себе вопросы:
Почему дизайнер поставил этот объект именно сюда?
Какие плюсы это даёт;Какие у этого есть минусы?
Или они могут быть в вашей игре из‑за разных правил или стиля самой игры;Где ещё можно было бы поставить этот элемент, чтобы он также хорошо смотрелся?
Для избежания плагиата.Или даже лучше?
В вашей игре другой набор элементов, может быть другая форма / вы можете изменить её для того чтобы — какой-то элемент стоял лучше, чем если без изменений перенести его с референса.
![](https://habrastorage.org/getpro/habr/upload_files/621/8a2/7e9/6218a27e94538c3369eb11d61418fa6c.png)
Например, для своей DANGER ZONE 2.0 я опирался на дизайн карт Gwent, MTG, Inscryption, Unmatched и Трон Кубов;
Для SWINGBALL: UNO, Red 7 и кастомные Покер‑колоды;
А для Gunt — UNO, Red 7 и Гвинт.
![](https://habrastorage.org/getpro/habr/upload_files/d3d/78d/1da/d3d78d1da4cb15716f63c367b6b7000e.png)
У печатных карт в руке не видно элементы в правом нижнем углу, т.к. эту часть занимает большой палец.
Располагайте там только неважную информацию, к которой игрок будет редко ссылаться (Описание карты в MTG)
10% людей на земле — левши. Поэтому в левый нижний угол тоже ставить элементы нежелательно, хоть и менее критично. Идеальным вариантом будет размещать в нижней части карты только редко используемую информацию — всё остальное в середину или наверх.
В руке у большинства карт виден только левый верхний угол, т.к. карты накладываются друг на друга.
Поэтому числовые значения, тип / класс карты и прочие сведения, на которые игрок смотрит в первую очередь, располагайте там (UNO, Дурак, Red 7, Gwent)
Первый окончательный вариант
После того как вы определились с первым финальным вариантом, нужно сделать:
А) Черновой вариант карандашами на бумаге (плохо сработает для цифровой игры, т.к. не получится «разворачивать информацию» при выполнении некоего действия)
B) Cхематичный концепт на компьютере (Adobe Illustrator, да хоть Paint) и напечатать карты на принтере.
C) Cхематичный концепт в Miro и протестировать его там.
(Для печатной игры учитывайте правила удобства в уме (размер карт, правый нижний угол) т.к. здесь вы не сможете проверить эти качества)
Удобно тестировать игру с другим человеком на расстоянии
Экономия денег и времени на производстве карт
Отличный вариант для будущих создателей цифровой игры, если вы пока не умеете программировать / работать в движке.
D) Прототип на движке (Unity, Unreal Engine, Game Maker и др.)
Возможность «разворачивать» сведения карты, изменять размер, создавать новые окна;
Изменять элементы на карте после внешних воздействий (Получение урона, наложение эффекта, изменение статуса и пр.
Цикл тестов и корректировок
Тестируйте
Лучше с другом — желательно, внимательным к деталям, с конструктивной критикой; в идеале, с базой знаний о дизайне и/или гейм‑дизайне.Подмечайте недочёты
Сверяете с пунктами, описанными выше — учтено ли <это правило> в дизайне моей карты? Обязательно после партии спрашивайте у тестировщика(ков) что им особенно понравилось или наоборот не понравилось:Как по внешнему виду, красиво ли выглядит;
Так и функционально, удобно ли находить нужную информацию.
После указания проблемы спросите, есть ли идеи для её решения. Даже если у вас уже есть варианты — если прибавить к ним идеи тестировщиков и выбирать из общей выборки лучший вариант — сможете применить лучшее решение.
Благодаря этому дизайн ваших карт станет ещё удобнее и красивее, чем у тех, кто не умеет работать в команде.
Пробуйте все примечательные варианты — до тех пор, пока не найдёте хороший / отличный / или идеальный.
Насколько близко к идеалу
Зависит от того:
Насколько высокую вы ставите цель — амбиции, уровень перфекционизма;
Ресурсов — свободного времени на продумывание
И инструментов — навыков, опыта.
Если цель столь высока, что вам не хватает навыков, можно:
Потратить ресурс, время на освоение навыка / подключить более опытного, чтобы достичь вашей цели. Нужно ли или лучше снизить цель — зависит от того, какой результат хотите получить от проекта, от дизайна карт в частности.Если дошли до этого этапа, перепробовали все имеющиеся, а проблема не решилась — повторяете цикл.
В таком случае рекомендуется найти другого тестировщика, который сможет дать свежий взгляд на проблему.Пробуйте тестировать одновременно с несколькими тестировщиками — тогда мысли каждого тестирующего будут помогать другим развить свои собственные.
Так шансы найти наилучшее решение сильно возрастают:)
Итог
Мы поэтапно разобрали что нужно сделать для создания красивого, а главное, удобного дизайна карт. Вы получили перечень советов: от общей теории дизайна до оформления самих карт. Также были приведены отдельные правила и рекомендации для печатных и цифровых продуктов по отдельности, благодаря чему после реализации игры в одном издании, сможете реализовать её же в другой.
Теперь у вас есть чёткий пайплайн, по которому вы можете двигаться на пути к созданию своей карточной игры и избежать негативных отзывов от ваших игроков, которые получают те, кто этих знаний не имеет.