Использование программы DeCard для создания пнп на примере игры PaxRenaissance

[pAnAp]

Для создания пнп можно использовать разные инструментарии. На форуме есть программа DeCard от Dimon_II, к которой нет толком документации, но которая может быть очень полезна(оптимизирует время на создание пнп, если нету больших требований к оформлению). Ей можно и сложное оформление реализовывать (пример пнп gloomhaven), но тогда без “супер быстро”.

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

Почему PaxRenaissance?
1) есть не очень активный собственный интерес (вдруг найду с кем в неё сыграть?);
2) игра нишевая, официальной локализации не предвидится;
3) на форуме есть тема по игре, но пнп создать пока так и не удалось;
4) DeCard очень хорош, когда есть арт и текст, и нужно его соединить;
5) прошли сборы на второе издание игры.

Большая благодарность всем участникам форума кто работал над материалами PaxRenaissance  (сканировал, обрабатывал графику, переводил текст и др)!


Дано:
1) арт не финальный (есть нефинальный арт от второго издания). Хочется свежее оформление.
2) баланс шлифуется (будут изменения на картах, "живые правила")
3) исторические справки “не причёсаны” (вдруг кто “причешет”).
т.е. возможны изменения во всех трёх направлениях.

Цель:
-Сделать пнп колод карт, но так, что бы можно было максимально просто вносить изменения “арта”, “баланса”, “исторических правок (текста)”;
-На каждом шаге иметь “готовую колоду” (например для ттс, или черновой пнп);
-иметь возможность довести шаблон до финального пнп;
-постараться затратить минимум времени (если получится);
-заполнить пробел "нету никакой документации по decard".

ПС: тема не преследует цели никого убедить, что “нужно делать decard’ом”, идея показать “как можно сделать decard’ом при таких условиях” и восполнить недостаток документации на конкретном примере.

пример оформления карт, слева направо: первое издание, начальный арт второго, изменённый арт второго

[Dimon_II]

Если не баловаться с градиентами и векторным клипартом - все картинки можно извлечь из PDF официального PNP.

Карта составлена из:
1. Подложки
2. Заголовка
3. Картинки
4. Художественного  текста
5. Двух областей с игровой иконографикой

Для west и east расположение этих элементов меняется зеркально

[pAnAp]

Кратко про структуру проекта-шаблона для программы декард:

данные делятся на 3 части:
1) файл с текстом "таблица"  (представлен в виде электронной таблицы, каждая строка описывает карту)



2) файл клипарта "клипарт" (описывает повторяющиеся элементы: пиктограмки, иконки и тд). Этот файл может быть общим для нескольких типов карт одной игры. Файл содержит векторные иконки или писание внешних растровых картинок(к файлу прибавляется папка с картинками).



3) файл разметки, "шаблон". Описывает, как соединять арт и текст. По простому, он описывает слои, на каждом слое может находиться картинка (задний фон, иконка и тд) и текстовые блоки. Но каждый слой описывает один блок. Слои рисуются друг за другом.


на диске они выглядят так:




Такое разделение даёт большую гибкость:
-выделение файла с текстом даёт возможность получить пнп на другом языке “с минимальными усилиями”. Провели локализацию в табличке, “скормили” декарду, получили пнп на другом языке.


-возможность получить ре-дизайн отредактировав клипарт и разметку. Например, на карантине мне потребовались карты персонажей, а доступа к типографии не было. Подредактировав шаблоны я получил “ЧБ редизайн”:


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

[Dimon_II]

Недавно добавлен функционал, позволяющий собрать отдельные картинки (карты) для печати в PDF или несколько PNG размером в лист.
Видео

[pAnAp]

Шаг 0 – Подготовительный этап:

есть послойный пдф файл с англискийми картами

с помощью программы  master pdf editor извлечём картинки-ресурсы (текстуры, рамки, иконки и тд):



этой же программой сделаем картинки карт целиком:



для “правильного” пнп мы бы использовали исключительно ресурсы (расположили задний фон-текстуру, поверх положили бы изображения картин, рамки и конки, а затем текст), но нам хочется на каждом шаге иметь завершённую колоду, хоть и не идеальную.

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

Мы должны сообщить декарду, что нужно считывать картинку карты из определённой папки, и нужно придумать соглашения для имён файлов. Для карт мрачной гавани я использовал “инвентарные номера”, у карт в PaxRenaissance они тоже есть (нижний правый угол). Можно было придумать просто номера, или по заголовку/названию карты, в этом примере я использую инвентарную надпись:

 

переименуем карты в новые имена и поместим в папку с проектом игры:



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



сохраним в папку проекта


текущее содержимое папки проекта (папка с английскими картами и таблица со списком имён карт)


осталось создать шаблон в котором укажем разметку стартового шаблона. Разметка пока будет состоять из одного слоя – английской карты подложки:


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



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



-устанавливаем параметры сетки и отступы
-сохраняем шаблон под именем   WestCards.svg
-и зугрузим его.



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


в свойствах слоя поменяем:
-id (имя слоя)
-href (адрес картинки на диске, запись [1] означает "прочитай из первого столбца таблицы")

другие свойства можно оставить как есть
x/y - координата верхнего левого угла
width/height -ширина/высота

теперь можно нажать preview и посмотреть, как стала выглядеть карта.
если всё сделано верно, должны получить такое(отобразится первая карта):


что бы отобразить другую карту из списка, выберете её на нижней панели и нажать preview(на картинке 4ая карта)



пока на этом остановимся и посмотрим, как генерировать результирующие карты

сохраним шаблон (file->save template) и перейдём обратно на вкладку project

для генерации результирующих карт нужно нажать process
в папке проекта, в подпапке result появятся "сгенерированные карты"



чтобы не прописывать на первой вкладке настройки проекта (папка проекта, файл шаблона, таблицу и др) можно сохранить настройки проекта, а в следующий раз их загрузить.
project -> save -> WestCards.XML



пока толку от такого проекта мало. по сути мы получили те же карты(из папки cards\west) без всяких изменений. но на следующем шаге мы начнём вносить изменения!

[Dimon_II]

Рекомендация - давать объектам осмысленное название (атрибут id). Редактор Inkscape (кстати - недавно зарелизился версией 1.0) принудительно обзывает все объекты, а используемая в Decard библиотека рендеринга требует хотя бы один отображаемый именованный объект, иначе выдается ошибка.

Список объектов ("слоев" в терминах выше сделанного описания) древовидный, и для удобства их можно группировать, например - выделив подложку и заголовок в отдельные группы.

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

[pAnAp]

Шаг 1. Внесение первичной локализации

Продолжим вносить изменения в проект.

Сейчас карта выглядит так:

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

Для добавления текста локализации, нам нужно накрыть английский текст “заплатками”.

Для заголовка в качестве заплатки возьмём картинку рамки из папки-ресурсов (шаг 0, экспорт всех картинок из pdf).


Но картинка рамки имеет немного другие пропорции, чем на картах. В декарде в настройки не выведено поле для режима “не сохранять пропорции”, поэтому в любом графическом редакторе подправим картинку под нужный нам размер: 438х60 (важны пропорции, просто изменять размер  декард умеет)
Сохраним рамку в папку проекта Img\West\Caption.png

Открываем декард, загружаем настройки проекта, сохранённого на прошлом шаге (project → load → WestCards.XML)
(должны загрузиться сохранённые настройки)



Переходим на вторую вкладку и добавляем новый слой картинку (template →add → picture) и редактируем свойства слоя:
- название слоя
-адрес картинки на диске
-размеры изображения и координата левого верхнего угла (для подбора используем preview: нажимаем, смотрим результат, корректируем, нажимаем preview заново)




Для “заплатки” исторической справки используем блок прямоугольник (template →add → rectangle) и редактируем свойства слоя:
-название слоя
-цвет и наличие рамки
-размеры прямоугольника и координата левого верхнего угла
с подборам цвета сгенерированные карты выглядят вот так(цвет можно взять пипеткой в графическом редакторе):




можно представить работу декарда, как конвейер по нанесению заплаток на наши карты=)



Видны проблемные места (не всё закрывает на 10ой карте и почти на всех заползает на боковые элементы). Пока оставляем “как есть”, побыстрее получить результат, а “причёсывать” потом.



Теперь нужно поверх заплаток поместить текст “название карты”  и “историческая справка”. В теме игры перевод выполнен zloib, FirR, i112358, за что им большое спасибо!


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




Сохраняем файл в папку проекта и выполняем content→ file → reload table, теперь в проекте видно новые столбцы текста.



Добавим текстовый слой для заголовка (template → add → text) и отредактируем свойства:
-id: название блока
-text: текстовая строка ([2] → читать текст из второго столбца таблицы, можно указать дополнительный модификатор [Z], который сообщает декарду “следить за блоком и автоматически уменьшать размер шрифта в случае, если текст не помещается в отведённые границы”)
-text-anchor : выравнивание текста по горизонтали
- х коорината, если выравнивание по горизонтали выбрано по центру, то х указывает на центр блока, иначе на левую сторону
-у координата указывает “на центр блока по высоте с учётом размера шрифта”
- тип, размер и цвет шрифта


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




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



По аналогии добавим текстовый блок для исторической справки (размер блока возмём равным “заплатке” HistoryBack)





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



Можно экспортировать в текстуру для ТТС или в PDF для черновой печати.
для получения текстуры достаточно указать количество карт (project→page setup→cards)
для пдф можно посмотреть видео из этого поста



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

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



Обычно, шаблон для нормального пнп потребует 10 и более слоёв, но полезными бывают и простые шаблоны:
-фишки монстров из мрачной гавани. 227 фишек, 34 видов картинок, на каждой фишке с двух сторон стоит номер (всего нужно 454 картинки). в таблице 2 столбца "имя картинки" и "номер на фишке", 3 слоя в шаблоне: картинка-подложка, кружек для числа, и само число. Гибкость же позволила сгенерировать вариант с крутилками и без крутилок затрачивая минимум усилий.
Так что даже простой декард-шаблон может принести пользу в проекте. И сохраняется гибкость, если завтра появился другой арт монстров, или шрифт для числа или захотелось номер вынести на верх фигурки, или "плохо видно и нужен вариант с крупным числом". для получения новых 454 картинок понадобится буквально 5 минут.

[Dimon_II]

Проект Pax Renaissance хорош тем, что исходные материалы (официальный pnp) доступен в виде PDF с текстом (не просто сканы или цифровые картинки). Оттуда можно взять готовые иконки.
А еще можно автоматически очистить карты от текста, сохранив всё остальное оформление. И не надо зарисовывать оригинальный текст

Remove all text from PDF file
Уточнение - чтоб не ухудшалось качество картинок, в командную строку надо добавить опцию:
-dPDFSETTINGS=/prepress

Ghostscript, если он не установлен, бесплатно может быть скачан с официального сайта.

Пример командной строки и результата (сама программа может называться gswin64.exe, gswin32.exe  gs в зависимости от версии и ОС):
gswin64.exe -o RESULT.pdf -sDEVICE=pdfwrite -dFILTERTEXT -dPDFSETTINGS=/prepress  "PR2_West Cards Merge 20-04-21.pdf"

[pAnAp]

продолжим работу с учётом совета из прошлого поста.

А еще можно автоматически очистить карты от текста, сохранив всё остальное оформление. И не надо зарисовывать оригинальный текст

почищенные карты сохраним в папку: Cards/WestClear/
теперь в проекте:
Cards/WestClear/  - карты без тексты
Cards/West/  - карты с английским текстом

на прошлом шаге нам удалось грубо нанести "заплатки с текстом" на английские карты.

для черновых карт вполне сносно. можно ли сделать лучше без особых усилий?
видно 2 проблемы:
1) фон заплатки состоит из одного цвета, а сама карта содержала текстуру. цвет хорошо подобран и в глаза не бросается, но границу можно заметить
2) размер заплатки не ко всем картам подходит. если сделать его больше, то он будет закрывать часть изображений на одних, если оставить как есть, то на некоторых картах торчит английский текст.

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

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

у слоя back нужно исправить свойстdо href
было: Cards\West\[1].png
стало: Cards\WestClear\[1].png
(сменили подложку)

слой заплатку HistoryBack можно удалить или установить свойство visibility в hidden
(спрятали заплатку)

получим вот такую карту:

1) текст исторической справки стал на фоне текстуры
2) нет английского текст вокруг него

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



получаем следующий результат:


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

пока оставим правую часть на английском (колода на каждом этапе должна быть полноценной).

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

в декарде есть такие возможности. для этого придётся воспользоваться "локальным клипартом" (defs)

defs
Тег defs служит библиотекой элементов и эффектов, которые будут использоваться позже. Содержимое тега не отображается.

содержимое клипарта описывается в той же области, что и слои-объекты, но содержимое клипарта не рисуется на карту.

есть два способа отсечь лишнее (не считая прозрачного PNG): объекты маска и обрезка.
1) Маска может состоять из нескольких частей - геометрических элементов и картинок. Яркость картинки работает как прозрачность маски, т-е возможна частичная прозрачность. Обычно используется картинка.

2) clipPath - один или несколько геометрических объектов (цвет не важен), работающих как трафарет

воспользуемся clipPath, для этого нам нужно:
-добавить описание библиотеки элементов клипарт
-добавить в неё объект clipPath
-добавить прямоугольник-контур обрезки в наш clipPath

сначала добавим слой с английской картой(id=RightSideEng) и прямоугольник(id=forCrop), который будет контуром обрезки (пока он будет просто рисоваться чёрным, подберём нужные параметры наглядо)


-добавить описание библиотеки элементов клипарт :
add -> defs  , зададим имя(id) clipart

-добавить в неё объект clipPath
add->clipPath, зададим имя(id) RightSideCrop

-переместим кнопками up/down наш прямоугольник(id=forCrop) внутрь clipPath, должно получиться вот такая конфигурация:


теперь осталось указать, чтобы у английской картой(id=RightSideEng) производилась обрезка:
-в свойствах нужно выбрать отображать "все свойства" и в появившемся свойстве "clippath" прописать имя нашего трафарета url(#RightSideCrop)


"визуализация"


получаем вот такие карты:

1) убраны артефакты заплаток с прошлого шага
2) добавлен перевод текста свитков
3) сохранена функциональность правой части карты, пусть и на английском

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

для исправления этой ситуации нам нужно самим отрисовывать свиток, а не пытаться "попасть" в нарисованный.


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

к сожалению перевод есть только для карт базового паксренессанса (для западного ранка есть перевод 55 карт), во втором издании включены карты всех дополнений и нужен перевод ещё 40 =(

декард можно взять тут