Поиграв некоторое время в такие игры, как MTG, Hearthstone и Slay the Spire, я захотел создать настольную игру, взяв за основу некоторые идеи, лежащие в основе этих игр. Сборка колоды, в частности, была для меня приятным аспектом.
Сначала я создал прототип с командой пиратов (игроков), сражающихся с монстрами, вдохновленный Slay the Spire. Однако геймплей получился вялым и лишенным удовольствия.
Я решил начать с нуля, сосредоточившись на упрощенном сборщике колод. Я спас некоторые иллюстрации и небольшой движок, использовавшийся для создания самих карт, о чем я объясню далее в этом посте.
Инструменты
Изначально я начал разрабатывать карты с помощью бесплатного инструмента Vectr, считая векторное редактирование оптимальным подходом. Однако вскоре я понял, что ручное изменение цвета и положения многочисленных значков в 30 различных дизайнах карт — кратчайший путь в психушку. Стало ясно, что мне нужна скриптовая система для упрощения процесса.
HTML и JavaScript в помощь
Я начал разрабатывать решение на основе веб-технологий. В конце концов, браузер — это прекрасно работающий движок рендеринга. Вот что я получил из определения JSON:
Описание каждой карты выглядит примерно так:
const cards = [{
'title': 'Useless Totem',
'text': 'Reveal this card: Change its ... per turn.',
'img': 'structures/totem.png',
'type': 'structure',
'victory_points': '2',
'cost': '1',
},
]
Тогда код JavaScript, используемый для генерации HTML, выглядит так:
cards.forEach((c) => {
let icons = ""
if(c['type'] == "structure") {
icons += `<img class="structure-icon-1" src="icons/structure.svg" />
<img class="structure-icon-2" src="icons/structure.svg" />`
}
if(c['victory_points'] != undefined) {
icons += `<span class="hook">${c['victory']}</span>
<img class="hook-icon" src="icons/hook.svg" />`
}
if(c['cost'] != undefined) {
icons += `<span class="cost">${c['cost']}</span>
<img class="cost-icon" src="icons/chest.svg" />`
}
// some more conditionals
var template = `<div class="card" id="card-${j}" title="${c['title']}">
<div class="inner">
<div class="front type-${c['type']}">
<div class="frame"><div></div></div>
<img src="${c['img']}" class="bg" />
<span class="title">${c['title']}</span>
<span class="text">${c['text']}</span>
${icons}
</div>
</div>
</div>`
// add card to the page
}
Вы уловили концепцию, поэтому я избавлю вас от оставшихся деталей. Однако для тех, кто заинтересован в использовании исходного кода для своих собственных проектов, я предоставлю ссылку для доступа к нему.
Рендеринг HTML в изображения
Для печати карт требуются высококачественные изображения с высоким DPI. Но как этого добиться с помощью веб-технологий? Хотя одним из вариантов является увеличение дизайна до нужного размера в пикселях и создание скриншотов, этот подход трудоемок и дает неточные результаты. Чтобы решить эту проблему, я использовал rasterizeHTML, инструмент, который позволяет преобразовывать элемент веб-страницы в изображение.
Игровое тестирование
Качество игры в первую очередь определяется весельем, которое она предлагает, а не внешним видом. Поэтому обширное игровое тестирование имеет решающее значение для обеспечения приятных и сбалансированных карт, а также последовательного взаимодействия. Применяя итеративный подход, я сначала вводил в колоду простые карты, стабилизируя и улучшая их, а затем постепенно добавлял новые, более сложные карты.
Первая версия была разработана для тестирования с использованием стандартной колоды из 52 карт. Каждый номер карты был связан с определенным дизайном, и игроки обращались к экрану компьютера за руководством по игре. Хотя этот подход изначально способствовал быстрой итерации и немедленной корректировке дизайна между играми, в конечном итоге он оказался чрезмерно запутанным и лишенным необходимой гибкости.
Печать первого прототипа
MakePlayingCards — хороший выбор для печати прототипов, предлагающий ряд возможностей. Однако я также хотел изучить европейские принтеры и решил попробовать MB Print. Оба провайдера поставляли высококачественные отпечатки, но MPC выделяется своим широким спектром предложений. Например, MPC может печатать специальные коробки и буклеты, обеспечивая аккуратную упаковку при отправке игры.
Сведение правил
После проведения дополнительного игрового тестирования правила DeckHand были в значительной степени доработаны. Однако, поделившись книгой правил с сообществом Reddit /r/tabletopgamedesign, я получил ценные предложения, которые я включил, чтобы прояснить условия финальной игры.
Правила игры управляются на странице HTML, как и остальные карты.
Еще немного игрового тестирования
Продвигаясь вперед с игроками, мы обнаружили, что печать обновленных дизайнов и вставка их в пластиковые конверты перед оригинальными картами были наиболее эффективным и экономичным способом изменить игру.
В то время как этот метод позволял нам легко вносить незначительные корректировки, используя листы бумаги или вычеркивая слова по мере необходимости, выбор дизайна белого текста на темном фоне создавал проблемы при попытке внести дополнения с помощью пера.
Подробности Упаковки: Коробка
Мне также требовался дизайн коробки с карточками и буклетом с правилами. Для этой задачи я использовал Photopea, впечатляющий и бесплатный онлайн-редактор фотографий, разработанный Иваном Куцкиром. Я не могу рекомендовать это достаточно.
Этот комплект включает в себя набор карточек, буклет и красивую коробку с пиратской тематикой. Все аккуратно упаковано и готово к игре.
Карточные иллюстрации
В очередной раз Фотопеа сыграла немалую роль в этом процессе. Несмотря на то, что я внес довольно много иллюстраций, большая часть тяжелой работы была проделана Midjourney и темным искусством быстрого создания, которому я научился путем проб и ошибок. За последний год Midjourney претерпела заметные изменения, позволив получать высококачественные изображения, которые часто требуют минимальной постобработки. Однако при столкновении со сложными композициями, такими как сцены с участием двух людей, вовлеченных во взаимодействие, инструмент оказывается в значительной степени неспособным.
Одна из проблем, с которыми сталкивается полноценный художественный дизайн, заключается в том, что нижняя часть изображения частично скрыта, что требует композиции, в которой приоритет отдается верхней части художественного произведения. Если вам интересно увидеть больше, я поделился некоторыми иллюстрациями здесь.
Сама игра
С небольшими корректировками и окончательным игровым тестированием DeckHand близится к завершению. Он обеспечивает увлекательные сеансы, которые обычно длятся от 25 до 30 минут для двух игроков. Приготовьтесь составить захватывающую колоду, но остерегайтесь возможности того, что ваш оппонент может значительно опередить вас, или удача может быть просто не в вашу пользу сегодня.
Его компактный размер и простые правила идеально подходят для случайных игр. Если вы хотите выразить заинтересованность в получении печатного листа или покупке копии, просто заполните форму одного поля. Это действие без обязательств поможет мне определить размер тиража.
Посетите веб-сайт, чтобы проявить интерес. Заранее спасибо!
В любом случае, я получил огромное удовольствие, создавая эту игру, и она может стать моим новым любимым хобби.
Дизайнерские размышления и открытия
Позвольте мне углубиться в некоторые особенности дизайна, которые делают DeckHand уникальным опытом:
- В то время как игроки могут пытаться следить за победными очками, истинный победитель часто появляется неожиданно, добавляя элемент интриги в каждую игру.
- Благодаря разнообразию выбора карт и легкому взаимодействию с игроками DeckHand предлагает динамичную среду, побуждающую игроков возвращаться снова и снова.
- DeckHand приветствует удачу, что делает ее непринужденной и приятной для всех.
- DeckHand по духу чем-то напоминает Cube Draft. Тем не менее, его компактный размер, доступность и более простая механика делают его доступным для новичков в этом жанре.
- Конечная игра может не иметь разнообразия, поскольку основное внимание уделяется приобретению карт для получения победных очков, даже если они могут не увидеть игры — проблема, распространенная во многих форматах построения колоды.
Создатель карточных игр
Как и было обещано, вот код, который, я думаю, будет вам полезен. Пусть это будет скелет вашей следующей карточной игры:
Если вы хотите сначала увидеть работающую версию: Шаблон создания карточной игры
Если вам интересно и вы хотите узнать больше:
DeckHand — пиратская игра для создания колод
