Tabletop simulator руководство

Сначала нужно поставить на свой компьютер бесплатную систему Steam, которая предназначена для запуска самых разных игр, платных и бесплатных, и зарегистрироваться в системе. Пароль следует выбирать сложный – с цифрами, и с прописными-заглавными буквами.

После этого придётся один раз потратиться – на саму программу. Купить её можно здесь. Оплата возможна самыми разными способами, в том числе и смской со своего телефона.

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

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

Найдя нужную игру, открываем её страницу и нажимаем на кнопку «Подписаться» – игра будет автоматически загружена и добавлена в вашу программу при очередном её запуске, а также будет автоматически обновляться, если автор модуля сделал новую версию:

Для запуска игрового стола сначала запускаем сам Steam. В нижней части экрана появится его значок, и, выбрав пункт «настройки», сразу же снимаем галочку для загрузки Steam при каждом запуске системы. Затем в меню выбираем Tabletop Simulator:

При первом запуске стола вам будет предложено пройти обучение – вас научат перемещать все игровые элементы, а также изменять угол обзора самого игрового стола. Это можно сделать и позже, выбрав в меню Tutorial, а для начала личной игры (не по сети) нужно выбрать Singleplayer:

Откроется меню выбора вшитых в программу классических игр – шашки, шахматы, нарды, маджонг и прочее. А чтобы запустить модуль игры, который вы отметили на официальном сайте, нажмите на кнопку Workshop:

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

Выбираем игру и она запускается – самая свежая версия, созданная автором модуля. Кнопки управления в игровом столе несложны и, если подзабыли их, их всегда можно проверить, нажав на Esc и выбрав в меню их схему:

Полная схема управления выглядит следующим образом:

При всей кажущейся её сложности, на практике большинство действий с компонентами игры можно выполнять, используя мышку (обе кнопки и колёсико), и лишь иногда используя клавиатуру (чаще всего Alt для близкого просмотра карт, и знаменитые клавиши A-W-S-D для перемещения камеры).

Игры, для которых в столе имеются модули, я заношу в регулярно обновляемое оглавление своего списка игр. Сейчас в нём отмечено 585 игр, у которых есть TTS-модуль – у таких игр между количеством игроков и их жанром написано слово стол:

12 Days (2011) 12 праздничных дней 3-5 стол для вечеринок 15 мин

А в самом списке на BGG у подобной игры есть соответствующий значок и ссылка на её модуль:

Правообладатели иногда удаляют модули на официальном сайте, и после этого их через ссылки скачать невозможно, но в сети есть самодельные сборники всех модулей игр, которые выкладывались на сайте. Комплект по состоянию на 23.09.2015 можно взять здесь (а это – список находящихся в нём игр). Скачанный модуль необходимо скопировать в папку с другими модулями – …Мои документыMy GamesTabletop SimulatorModsWorkshop – расположение файлов настраивается в программе. В этом случае игра будет доступна из обычного меню, но модуль обновляться не будет.

С загружённой на стол игрой вы можете делать что угодно, как и с обычной игрой – программа не следит за исполнением каких-либо правил. Таким образом, вы можете настраивать её на свой вкус, изменяя любые её элементы (например, делая русскую версию или вариант с домашними правилами, которые подразумевают специальную раскладку компонентов игры) и сохраняя результат либо в файле сохранения (он будет доступен только вам), либо отправляя его на публикацию на официальный сайт (пункт Workshop Upload в меню), чтобы ваш вариант игры стал доступен для скачивания всем любителям настольных игр. Но это – тема для отдельной статьи.

Вы когда-нибудь думали о создании игры, в которую можно будет играть с друзьями в Tabletop Simulator (TTS)? Или, может быть, вы разработчик настольных игр, который хочет создавать прототипы игр и тестировать их в режиме онлайн.

Лучшего времени для Воспользуйтесь преимуществами универсальной игровой среды TTS. Сегодня мы научим вас, как это сделать.

Что такое настольный симулятор?

Для тех, кто не знает, Tabletop Simulator (TTS) предоставляет трехмерную среду для игры в настольные игры, локально или онлайн. Это отличный способ играть в настольные игры онлайн с друзьями.

Игры, в которые можно играть на TTS, включают все, от покера, шашек, Dungeons & Dragons, мини-гольфа и даже до новейших настольных игр. Любая игра, в которую вы хотите поиграть, обычно доступна в виде DLC или в мастерской сообщества.

Зачем использовать настольный симулятор?

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

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

Кроме того, вы можете легко транслировать свой игровой процесс в прямом эфире и демонстрировать его в социальных сетях и на потоковых платформах.

Что вам понадобится для начала работы

Перед тем, как начать, вам понадобится следующее:

• Учетная запись пользователя Steam
• Tabletop Simulator, установленный на вашем ПК
• Изображения вашей доски и карточек в формате JPG

Загрузить: Tabletop Simulator в Steam (19,99 долларов США)

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

Создание досок и ковриков

Когда вы проектируете свои доски и другие 2D-объекты, убедитесь, что разрешение достаточно высокое, чтобы вы могли правильно подобрать размер без потери качества.. TTS автоматически изменит его размер при импорте, и вы сможете изменить его размер точно так, как вам нравится.

По теме: Лучшие бесплатные браузерные альтернативы Adobe Illustrator

Создание карт

Карты в TTS имеют три аспекта: лицевую сторону карты, рубашку карты, и скрытая карта (как карта будет выглядеть для других в руке игрока). У вас должен быть дизайн для каждого из них, хотя у вас есть возможность просто сделать скрытую карту обратной стороной карты.

Создание и расположение лицевых сторон карт

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

Чтобы создать колоду, скопируйте и вставьте каждый рисунок на карточный лист размером 7×10. Использование шаблона, подобного приведенному ниже, поможет вам начать работу.

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

Однако вам не обязательно использовать этот шаблон. Лист карточки может быть любого размера, и TTS автоматически разрежет его на сетку 7×10.

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

Если вы не знаете, где находятся ваши локальные файлы, вы можете найти их в своей библиотеке Steam, открыв меню Свойства для TTS. Выберите вкладку Локальные файлы и нажмите Обзор .

Рубашки карт

Если вам нужен только один дизайн для спинки всей колоды, то все, что вам нужно, – это одно изображение дизайна в формате JPG; карточный лист не понадобится.

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

Скрытые карты

В слоте 70 листа карты, помеченном «Скрытая карта» другим игрокам »на шаблоне разместите любой рисунок, который вы хотите, чтобы его видели противники, когда карты из этой колоды находятся в руке игрока. Это традиционно сплошной черный или белый цвет или дизайн задней части колоды..

По теме: Настольные игры, в которые вы должны играть, на основе ваших любимых видеоигр

Импорт элементов

Теперь, когда вы создали свои доски и колоды, вы готовы начать импорт.

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

Запустите TTS и нажмите Создать , а затем выберите Одиночная игра , чтобы создать среду. Удалите все элементы, созданные TTS, и выберите стол, на котором вы хотите играть в свою игру.

Когда среда готова, нажмите кнопку Objects в верхнем меню, а затем выберите категорию Custom .

Доски и коврики игрока

Выберите Board в меню Custom и щелкните в любом месте на столе, на котором должна появиться доска. Щелкните правой кнопкой мыши в любом месте, чтобы открыть диалоговое окно импорта платы.

Перейдите к своему изображению доски, и TTS будет спросите, хотите ли вы загрузить его в свою учетную запись Steam Cloud или сохранить локальный файл. Загрузите файлы в облако, если вы планируете когда-либо играть в свою игру онлайн или на другом устройстве.

При желании вы можете загрузить свои изображения на другой хост, например Dropbox, Photobucket или Imgur, и вставить сюда URL-адрес. Однако внешние хосты менее надежны и не рекомендуются.

Когда вы загружаете его в Steam Cloud, TTS попросит вас дать ему имя файла. После завершения загрузки нажмите Импорт .

После импортирования доски вы можете теперь уменьшить или увеличить ее с помощью – и + на клавиатуре. Чтобы зафиксировать его на месте, чтобы случайно не переместить во время игры, щелкните правой кнопкой мыши доску и в разделе Переключатели нажмите Заблокировать .

Колоды карт

В меню Пользовательский объект нажмите Колода . Щелкните в любом месте стола, где должна появиться колода, а затем щелкните правой кнопкой мыши, чтобы начать импорт.

Настройте параметры следующим образом:

• Тип: измените это, если вы имеете в виду конкретную форму, отличную от обычной прямоугольной карточки с закругленными углами.
• Лицо: нажмите кнопку Обзор локальных файлов и найдите свою карточку лица. Опять же, мы рекомендуем опцию Steam Cloud поверх локальных файлов или внешних хостов..
• Уникальные рубашки: отметьте этот параметр, если ваша колода будет иметь несколько дизайнов рубашек, а затем загрузите лист оборотных карт в рубашку ящик. Если вы используете единый дизайн для всей колоды, просто загрузите вместо него свой дизайн задней части.
• Ширина и высота: отрегулируйте это, если вы использовали другое соотношение, чем стандартная прямоугольная карточка, 10×7.
• Число: убедитесь, что оно соответствует количеству карточек, которые вы импортируете.
• Вбок: изменяет ориентацию функции Alt Zoom в TTS. Не устанавливайте этот флажок, если не хотите, чтобы карточка отображалась боком.
• Задняя сторона скрыта: установите этот флажок, если хотите, чтобы скрытые изображения ваших карточек были просто рубашками карт.

Если настройки верны, нажмите Импорт . Ваша колода появится на столе, и вы сможете начать тасовать и сдавать карты.

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

Импорт других игровых элементов

Импорт другие 2D-объекты аналогичны процессу импорта досок. Не забывайте, что в TTS есть много общих игровых элементов, таких как игральные кости и фигурки, готовые к использованию в меню Objects .

Если у вас есть пользовательские 3D-элементы, которые вы хотите использовать, следуйте руководству TTS по импорту 3D-моделей.

Сохранение всей игры

После расположив компоненты в состоянии начальной настройки, нажмите кнопку Игры в верхнем меню.

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

Максимальное использование пользовательских настольных игр

Создавать собственные игры и играть в них в Tabletop Simulator просто, если вы знаете, как это делать. Пригласите своих друзей или поищите готовых и желающих плейтестеров в сообществе TTS. Теперь вы можете показать свою игру другим!

Tabletop Simulator is a powerful ‘sandbox’ program that makes it surprisingly easy to show off your game in a virtual space. It came out in 2015 following a successful Kickstarter, and has become the most popular way to play games virtually. There is a learning curve, but by the time you’ve reached the end of this piece, you will have created your own game (or big parts of it!) in the program.

A quick note: this is a living blog post. It will be edited, updated, and sections might move or be deleted to make it easier to follow. Last updated on 7 May 2020.

First things first, of course — this is a $20 program you’ll need to buy (though it does go on a sale. Head to the Steam page to buy it.  Once you’ve purchased it, download and install it like any other program.

The two big buttons there in the center are where you’ll make your first big choice: Join someone else’s game or Create something of your own. We’re here to create, so click ‘Create, then click ‘Multiplayer’ (not shown above). To exit the program, look for the bottom icon between Join and Create, which has given more than a few people issues for being hard to spot.

To create a game, you’re going to first create a server. This server name and password can be used by someone to log in and collaborate with you. Set the ‘Max Players’ to the maximum player count of your game. Note you can always hover over the (?) to get some help understanding what’s going on.

Click on ‘Games in the upper center, then create a new folder to help things organized…

…or not. It’s up to you.

Next, create a new file in your folder of choice:

Give this file a name as you like. Once you’re done, select it to let the fun begin:

OK, there’s a lot to take in here — and to be sure, yours may look different. The table and background seem to be chosen at random from the available selection.

Start with the list of actions available along the left side of the screen. The vast majority of the time, you’re going to want to use the uppermost tool — the Grab tool. This is what lets you pick up, move around, and otherwise manipulate objects on the table. Other actions let you make lines, write text, and so on. Play with this a little, but don’t worry about it too much right now.

Let’s change the table by going to Objects > Tables, then look at the selection:

I’m told that the ‘None’ option is there to disable the default table and import your own with custom artwork / a custom surface (thanks Eldin!). For now, click on the Rectangle.

The rectangle is my personal favorite – beyond being the sort of table I’d love to have in my own place, it feels like there’s more table space.

Now that we’ve sorted the table, it’s time to play around with components. Don’t worry about creating your game just yet. Let’s just play for a minute.

Go to Objects > Components, then behold the lineup:

For right now, click ‘Blocks’.

Click any of these to spawn that thing in the middle of the table. Bear in mind you can change the colors and sizes later on. For now, just spawn one of each:

Perfectly balanced, as all things should be. Take a few minutes to click, drag, manipulate, rotate, flick, fling. Pretty much all objects can be copied and pasted if you decide you want more than one of something.

Next, change the background if you want by going to Objects > Backgrounds:

This is just an aesthetic thing, but it’s a nice touch.

I personally prefer the ‘Museum’ setting since it’s basically just a blur in the background. The others just feel busy and potentially distracting. Bear this in mind if you use a custom picture as well.

Whatever you choose, it’s safe to assume your game has some cards. Create cards in Tabletop Simulator by clicking Objects > Components > Cards:

Clicking ‘Standard’ will spawn a standard-issue deck of 52 cards — again, start with these. We’re just playing around here.

Hover over a stack of cards to see how many remain in the deck. Type a number to automatically draw that many cards into your hand. While you may not need to draw more than 9 cards into your hand, you can do it if you type the numbers fast enough! You can also….

• rotate the deck or a card (hover over the deck or card, then click Q or E)
• drag the top card away from the pile (click and drag quickly) away from the pile
• move the pile around (click, hold, then drag)
• group cards together (select a group of cards, then hit G)
• flip a card (F)
• see a larger version of the card (hover over the card or object, then hold ‘Alt’)
• shuffle the deck (R)
• scale the cards to look larger or smaller on the table (+ or -)

Oh, go on. You know you want to. It’s good practice to get comfortable with the basics.

While you’re here and messing around, right-click on a card for the context menu. It’s a little different depending on the piece, but just be aware that every element can be manipulated individually for now. I’ll point out the Color Tint option is almost always around and ready to change the color of just about anything.

Next, let’s talk dice – Objects > Components > Dice lets you choose between metal and plastic. I’ll go with plastic since there are more options:

Click the type you want and it spawns in the middle of the table. Note the D6’s in black, red, green, and blue are just starting points — like almost everything else you can change the colors to what you want.

Select an area to roll them all (hit R). You can also type a number when hovering over a die to have that number come to the top.

OK, so I got a little silly with the sizes here, mainly to emphasize how extreme the differences can be. That white D6 showing a 1 is the same size as the dice in the picture above this one.

One fun little Easter Egg: the RPG minis are animated, whether they’re just holding still or being clicked on to attack.

Alright, that’s enough playing around…

Let’s make some stuff. Come back to Objects > Components > Cards, then click ‘Custom Deck’:

This screen will appear:

Most of this is self-explanatory:

• Face is the front of the card, Back is the back of the card.
• You probably want all cards in a deck to have the same back. If you want each card to have a unique back, click the Unique Backs box.
• Width, Height, and Number refer to the image you uploaded in the Face, and this comes back to one big assumption Tabletop Simulator doesn’t tell you about: making a custom deck means you’ll want an image that has your cards laid out right next to each other, without any border, and all the same size. The program will then split that image into smaller, equal-sized pieces for the card fronts — up to 10 cards wide (10 columns) and 7 cards high (7 rows), for a total of up to 70 cards. It’ll then add the back image to each of them.

Click the folder to bring up a file explorer. I personally find it helpful to group all of the assets / pictures into a single folder and giving each file a name I can work with.

Loading from your local disk means you won’t have to wait for the program to upload files to the Steam Cloud. This is fine for prototyping, but as the box says, you’ll want to ensure they’re on the Cloud before showing the game to other people. There’s an option to upload everything to the cloud in one fell swoop in Modding > Cloud Manager later on.

OK, you got me. One of my not-so-cleverly named files was called ‘Slide1’. Here, Tabletop Simulator wants to know where you want to save this file. If you created folders earlier, you can select one from the drop-down menu.

Moment of truth time: both the Face and Back fields should have a URL in it. This image has 24 cards in it — 8 wide and 3 height. Click ‘Import’ and give the program a minute to chew on everything.

Success! The deck of 24 cards is created. I have more cards that’ll go into this deck, so I’ll import each image of cards, then put one deck on top of the other to combine them.

Say I just wanted a single card…

Like a reference card, for example. The deck tool above needs a minimum width of 1 and height of 2, and maybe it’s just easier to create a single card by itself. Head to Objects > Components > Cards > Custom Card, and remember once it’s created you can always copy and paste to make more:

One face file (of one card) and one back file is all you need. Check the sideways box if you want a landscape-oriented  card.

Success! The reference card on the left is in. Use + and – (but strangely, not the + and – on a numerical keypad) to make it scale bigger or smaller as you like.

Next up: more custom stuff

As you might expect, you can import images, then stick them onto various-sized things. Head to Objects > Components > Custom:

I’m not going to go into each of these individually, and stuff that would render in 3D is going to require other programs to create them (one process I’ve read involves using Inkspace to create the 2D version, then using a tool like Blender to extrude a 3D shape and rotating it to have the correct side up). Just know that there’s plenty of room to grow.

Worth noting: (thanks Eldin!) tiles come in a few pre-defined shapes. They’re a lot faster than tokens, which can be used to make custom-shaped tokens (think die-cut tokens).

What’s this ‘Saved Objects’?

Objects > Saved Objects is basically your personal database of things you’ve created, saved from elsewhere, etc. It’s how you’ll import stuff from elsewhere into your game. Here’s a quick look at my saved objects as of publication:

These won’t be in your own Saved Objects folder until you, y’know, save them for yourself. You could make them if you wanted, but what’s going to be easier is to steal borrow from other games or mods. I’ll come back to this in a minute.

Other cool stuff

Head to Objects > Components > Tools:

Some of these are bells and whistles, but things like the bag help keep the table looking clean, and the infinite bag is perfect for drawing chits or markers without needing a huge pile somewhere. Literally a bag of holding – awesome.

Save your game

Tabletop Simulator is auto-saving behind the scenes, but you’ll want to save that progress somewhere.

That first file is the Auto Save – it’s saving your progress as you go. You’ll want to save into a different file, though. Just right of that Auto Save is my file #5. Click the ellipsis, then click ‘Overwrite’ to save the current game into this file. Be sure you’re overwriting the correct file, of course.

Locking things down – or flipping the table

Have a look at Options > Permissions:

You can peer through the rest of the Options on your own, and they’re mostly self-explanatory. I want to point out permissions as a way of controlling what your players can do in the game.

As elsewhere, hover over the question mark to see exactly what’s going on here. By default, players can interact with all the buttons and elements, and you’d be correct in assuming most players will behave themselves. There’s sometimes that one person who sees the ‘Flip’ button and goes ‘hey, what’s this button do…’

In case the screenshot doesn’t show it clearly, the table gets flipped and all the objects / components get flung into an eternal abyss of nothingness. Pretty cool…. but also pretty disruptive. You might want to disable that.

Making meeples

You would think that a program so dedicated to tabletop games would have meeples built in… but you’d be wrong. Even as the Objects menu uses a meeple icon, as of publication, the humble meeple remains something that needs a few more steps to put in your game.

• Step 1: Go to the Meeple-o-Rama mod at https://steamcommunity.com/sharedfiles/filedetails/?id=644617425 or the CGS – Prototyping Kit at https://steamcommunity.com/sharedfiles/filedetails/?id=2039502775. There are certainly plenty of other kits like this one — whichever one you go with, follow the instructions below for each one.
• Step 2: Click ‘Subscribe’ (the green button below the picture). If you don’t see it, you may need to be logged in or open a Steam account.
• Step 3: Open Tabletop Simulator.
• Step 4: Hit Create and open the Meeple-o-Rama ‘game’ or the CGS Prototyping Kit. It will load just like a game on TTS.
• Step 5: You should see over 100 common meeples, pieces, and so on. (The CGS Prototyping Kit puts them all into a bag of holding — draw stuff out of the bag or draw stuff into your hand – your call.) While custom meeples will have to be designed (and I’m sure there are some folks here that can do that), these are free to grab and use. Find a meeple or piece you want, then right-click on it and click ‘Save Object’. It’ll ask where you want to save it – the root folder is fine for now.
• Step 6: Go back to the main menu.
• Step 7: Hit Create again, then go to your own game file.
• Step 8: Look under Components > Saved Objects for the thing(s) you saved earlier.

Summary

There’s plenty more going on, but that’s enough for now. You should now have the skills to import your cards, create objects, and move them around to a layout that works for you. This may be all you need — start your server, load your game, then pass on the server name and credentials for your playtesters to join.

There are two frontiers that may or may not ever be needed: 3D objects and scripting. If you’re creating minis and already have the files, Google is your friend on this one. As scripting goes, it can help to automate dealing cards or create some more complex setups. My games don’t really have a ton of stuff in them, so I haven’t needed scripting yet. Possibly the best resource to use if you’re curious is Learning Lua – A beginner’s guide to scripting, a post in the Steam Community written by MrStump. There is also an official Discord server for Tabletop Simulator to check out.

Over to you

Comments are open.

Время на прочтение
11 мин

Количество просмотров 2.4K

Я занимался созданием стола для карточной игры в Tabletop Simulator (TTS) и ощутил нехватку удобного инструмента для управления колодами. Из того что можно найти на youtube есть два способа: первый — это вручную в любом графическом редакторе сеткой расставлять карточки; второй — приложение, которое находится в папке с игрой, которое делает то же самое, только чуть удобнее. Оно позволяет мышкой расставить карточки по слотам с номерами. Неудобно в этом способе все. При импорте такой колоды в игру вам нужно вручную вводить имена и описания для карт, а если вы ошиблись, то делать импорт повторно и вводить данные снова. Так же если у вас карт больше, чем может вместить одна колода (69 карт на страницу), то нужно вручную размещать на нескольких страницах и отдельно импортировать их. Это приложение работает только под Windows, хотя сам TTS спокойно работает как на Linux, так и на MacOS. В этой статье речь пойдет о приложении, которое я долгое время разрабатываю и вот, наконец-то, я решил его представить на публике.

Что такое колода в TTS и как ее добавить

Для начала, вкратце, как добавляются колоды вручную и какие есть ограничения.
Для того чтобы добавить колоду в игру, нам нужна картинка, на которой сеткой расположены карты с ограничением в 10 карт по ширине и в 7 карт по высоте. Еще есть ограничения по минимальной ширине и высоте в 2 карты.

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

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

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

Как я и говорил, при импорте мы можем указать лишь картинки. Это означает, что у нас нет возможности указать какие-либо текстовые данные для карт при формировании колоды сторонним приложением. А нас интересует наименование карты, описание и переменные lua, которые можно задать для каждого объекта в TTS, чтобы писать скрипты для стола и автоматизировать некоторые действия в игре, например, когда мы помещаем монстра в активный слот, счетчик жизней в слоте автоматически выставлялся в то значение, каким запасом обладает именно этот монстр.

DeckBuilder. Мое представление удобного инструмента

Техническое описание проекта

Т.к. я хотел добиться максимальной кроссплатформенности и иметь на выходе один бинарный файл, бэкэнд было принято писать на golang. А чтобы универсально отображать графический интерфейс, было принято делать его обычным web’ом, использовать можно было любой фреймворк, но из-за опыта разработки был выбран Vue 3.

На go поднимается http сервер, где на каждый API зарегистрировано действие над данными. Найти API можно по адресу http://localhost:5000/docs. Там отображается swagger со всеми API. Web интерфейс собирается в dist директорию, а затем эта директория эмбеддится в бинарный файл и статически обслуживается тем же самым http сервером. В итоге на выходе мы имеем один единственный бинарный файл.

Хранить файлы я хотел в максимально удобном для чтения формате, чтобы всегда можно было зайти самому и посмотреть все что там есть, поэтому я все храню в папках и файлах. Каждая сущность — это папка, внутри которой есть файл .info.json, хранящий информацию об объекте, такую как: id, name, description, createdAt, updatedAt. Внутри сущности может быть другая сущность, которая так же является папкой, а внутри могут быть файлы и другие папки и т.д.

Какие логически сущности используются в DeckBuilder

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

Главная верхняя сущность — это игра (Game).

Игра содержит коллекции (Collection), в которые попадают такие сущности как базовая игра, дополнение 1, дополнение 2 и т.д.

Каждая коллекция содержит список колод (Deck). Тут, соответственно, лежат колоды, например, монстры, награды и т.д.

А уже внутри колоды лежат сами карты (Card). Если у прошлых сущностей из основных атрибутов было только название и описание, то у карт есть еще их количество и переменные с указанием значений, например, уровень здоровья монстра или же его сила атаки.

Как это выглядит и как это работает внутри

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

go

func openBrowser(url string) {
	var cmd string
	var args []string

	switch runtime.GOOS {
	case "windows":
		cmd = "cmd"
		args = []string{"/c", "start"}
	case "darwin":
		cmd = "open"
	default: // "linux", "freebsd", "openbsd", "netbsd"
		cmd = "xdg-open"
	}
	args = append(args, url)
	err := exec.Command(cmd, args...).Start()
	if err != nil {
		logger.Error.Fatal("Can't run browser")
	}
}

Сам интерфейс выглядит минималистично.

Слева вверху находится наименование приложения, справа — группа кнопок управления. Их назначения слева направо: создание игры, импорт игры, сортировка объектов на странице. Посмотрим процесс создания на примере игры Four Souls т.к. у них есть официальный сайт со списком всех карт и, надеюсь, у них не возникнет вопросов к статье

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

Создадим игру, нажав на кнопку в правом верхнем углу.

В первом поле мы указываем название игры, во втором — ссылку на картинку (в будущем будет реализована поддержка загрузка файла картинки с диска), в третьем — описание для игры. Предпросмотр реализован следующим образом: в элемент img подставляется ссылка из второго поля. Однако, после создания игры, на бэке происходит скачивание изображения в файл .img.bin и после этого для отрисовки не требуется обращения в интернет. Все загруженные изображения можно получать от веб сервера на localhost:5000. Расширение bin для картинок было выбрано исключительно для удобства обращения к нему из кода. На данный момент поддерживаются форматы png, gif, jpeg.

Для каждого объекта из имени генерируется идентификатор. Вся строка преобразуется к нижнему регистру, все пробелы заменяются на нижнее подчеркивание, из строки удаляются все символы, кроме латиницы, кириллицы, цифр и нижних подчеркиваний. Максимальная длина идентификатора 200 символов, если строка длиннее, то она обрезается. Такое решение было принято, чтобы ни одна файловая система не ругалась на возможные странные названия. Файловая система обеспечивает их уникальность. Да, в теории два разных названия могут считаться одинаковыми, приложение выдаст ошибку и попросит придумать новое название.

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

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

Из меню над игрой мы можем совершить несколько действий:

• Изменить игру

• Экспортировать в zip файл, чтобы можно было удобно поделиться наработками с другим человеком

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

• Запустить сборку (рассмотрим позже)

• Удалить игру

При нажатии левой клавиши мы переходим в список коллекций выбранной игры.

Пока список коллекций пустой. Но мы можем заметить что breadcrumb в левом верхнем углу получил новый элемент «Four Souls v2». Нажимая на них, мы можем перемещаться на уровни выше. В правом верхнем углу у нас недоступна кнопка импорта, т.к. эта опция доступна только для игр.

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

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

Контекстное меню у коллекций содержит два пункта Change и Delete (позже планируется добавить Duplicate для коллекций и колод). А у колод и карт контекстное меню идентично коллекциям.

Перейдем в базовую коллекцию и создадим несколько колод. Процесс идентичный созданию коллекций.

Теперь зайдем в колоду монстров и создадим там несколько карт.

Интерфейс создания карт немного отличается от предыдущих. У нас появилось несколько полей. Первое поле — количество карт в колоде. Если посмотреть обучающие видео, то люди часто копируют одно и то же изображение по сетке, чтобы получить копии карт, что негативно сказывается на конечном размере изображения, которое приходится скачивать всем, кто собирается играть в вашу игру. В данном случае копия карты создается лишь в json файле описания объекта, а на сетке будет одна картинка.

Так же у нас есть возможность динамически создавать произвольное количество переменных lua, в коде будут выглядеть как HP=3, которые потом можно будет получить в самой игре. При помощи кнопки «+» можно добавить еще одно поле, а при помощи «-» удалить выбранное поле.

Создадим карту в колоде Loot, т.к. там есть карты, требующиеся в количестве нескольких штук.

Как видно на изображении выше, если карта не в единичном экземпляре, то ее количество отображается рядом с названием.

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

После этого мы можем открыть окно импорта игры из файла.

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

Как это все загрузить в TTS

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

При завершении кольцо просто пропадает и мы снова можем пользоваться приложением. Разберем действия происходящие в момент сборки файлов.

Проходим по всем картам, которые есть в наших колодах. Если колоды лежат в разных коллекциях, но они идентичные (одинаковое название, одинаковая ссылка на картинку), то мы объединяем эти карты в один список. После того как мы получили разные колоды, проверяем вмещается ли каждая колода на одну сетку. Если карт меньше, то мы ищем оптимальный размер, чтобы влезли все карты и осталось минимальное количество свободного места. Если карты одной колоды не влезли на одну сетку, то разбиваем на несколько.

После того как у нас есть изображения сеток для каждой колоды, нам нужно в понятном для TTS формате описать json файл. Базовый json выглядит следующим образом.

{
	"ObjectStates": [
	]
}

Внутрь мы добавляем объекты. Чтобы удобно было управлять объектами, все колоды я складываю в игровой объект TTS — мешок. Его описание выглядит следующим образом.

{
	"Name": "Bag",
	"Transform": {
		"posX": 0,
		"posY": 0,
		"posZ": 0,
		"scaleX": 1,
		"scaleY": 1,
		"scaleZ": 1
	},
	"Nickname": "",
	"Description": "",
	"ContainedObjects": [
	]
}

• Name — Определяет тип объекта. Так же это может быть Deck, Card

• Transform — Описание трансформации объекта. Его поворот и масштабирование. Обязательное поле, иначе игра не сможет отобразить объект

• Nickname — Имя объекта в игре

• Description — Описание объекта в игре

• ContainedObjects — Список объектов, находящихся внутри мешка

Перед колодой разберем объект карты, т.к. колода включает в себя их список.

{
	"Name": "Card",
	"Nickname": "Isaac",
	"Description": "",
	"CardID": 100,
	"LuaScript": "AT=1nHP=2",
	"Transform": {
		"posX": 0,
		"posY": 0,
		"posZ": 0,
		"scaleX": 1,
		"scaleY": 1,
		"scaleZ": 1
	},
	"CustomDeck": {
		"1": {
			"FaceURL": "grid_image.png",
			"BackURL": "backside_image.png",
			"NumWidth": 2,
			"NumHeight": 2,
			"BackIsHidden": false,
			"UniqueBack": false,
			"Type": 0
		}
	}
}

• Name — Тип объекта

• Nickname — Имя объекта в игре

• Description — Описание объекта в игре

• CardID — Номер карты на сетке. Первая цифра берется из номера CustomDeck, а вторая и третья — это индекс карты на сетке, начиная с нуля

• LuaScript — Хранится скрипт объекта, но нам кроме переменных пока ничего не требуется. Каждая должна быть на новой строке

• Transform — Описание трансформации объекта. Обязательное поле, иначе игра не сможет отобразить объект

• CustomDeck — В данной секции описывается колода, в которой находится карта. Вообще, если эта карта находится в колоде, то можно не указывать эту информацию. Но если карта одна, то она должна быть вне колоды, т.к. колода должна состоять как минимум из 2 карт. В этом случае и потребуется эта информация. Но для простоты заполним ее для всех карт.

Теперь посмотрим на описание колоды.

{
	"Name": "Deck",
	"Transform": {
		"posX": 0,
		"posY": 0,
		"posZ": 0,
		"scaleX": 1,
		"scaleY": 1,
		"scaleZ": 1
	},
	"Nickname": "Character",
	"Description": "",
	"DeckIDs": [
		100,
		101
	],
	"CustomDeck": {
		"1": {
			"FaceURL": "grid_image.png",
			"BackURL": "backside_image.png",
			"NumWidth": 2,
			"NumHeight": 2,
			"BackIsHidden": false,
			"UniqueBack": false,
			"Type": 0
		}
	},
	"ContainedObjects": [
		{
			"Name": "Card",
			"CardID": 100,
			...
		},
		{
			"Name": "Card",
			"CardID": 101,
			...
		}
	]
}

• DeckIDs — Хранится список идентификаторов карт, которые находятся в колоде

• CustomDeck — Хранится список колод в объекте колода. Одна колода соответствует одному изображению сетки. Если одной сетки было недостаточно, то добавляем в этот список «2», «3» и т.д.

• CustomDeck.(FaceURL, BackURL) — Тут может быть как путь до файла на локальном диске, так и URL до расположения в интернете. В случае если мы просто проверяем, то можно хранить файлы на диске для быстроты, чтобы не нужно было ждать загрузки картинок в интернет. Но если мы хотим сохранить карты на столе, чтобы другие могли играть, то мы обязательно должны хранить их в интернете

• CustomDeck.(NumWidth, NumHeight) — Количество карт на сетке по ширине и по высоте

• ContainedObjects — Список карт, которые лежат в колоде

Если все это сложить в мешок, а файлы, допустим, лежат по пути «/home/user/images» в UNIX системе, то выглядит это следующим образом.

Пример json

{
  "ObjectStates": [
    {
      "Name": "Bag",
      "Transform": {
        "posX": 0,
        "posY": 0,
        "posZ": 0,
        "scaleX": 1,
        "scaleY": 1,
        "scaleZ": 1
      },
      "Nickname": "",
      "Description": "",
      "ContainedObjects": [
        {
          "Name": "Deck",
          "Transform": {
            "posX": 0,
            "posY": 0,
            "posZ": 0,
            "scaleX": 1,
            "scaleY": 1,
            "scaleZ": 1
          },
          "Nickname": "Character",
          "Description": "",
          "DeckIDs": [
            100,
            101
          ],
          "CustomDeck": {
            "1": {
              "FaceURL": "file:////home/user/images/grid_image.png",
              "BackURL": "file:////home/user/images/backside_image.png",
              "NumWidth": 2,
              "NumHeight": 2,
              "BackIsHidden": false,
              "UniqueBack": false,
              "Type": 0
            }
          },
          "ContainedObjects": [
            {
              "Name": "Card",
              "Nickname": "Isaac",
              "Description": "",
              "CardID": 100,
              "LuaScript": "AT=1
HP=2",
              "Transform": {
                "posX": 0,
                "posY": 0,
                "posZ": 0,
                "scaleX": 1,
                "scaleY": 1,
                "scaleZ": 1
              },
              "CustomDeck": {
                "1": {
                  "FaceURL": "file:////home/user/images/grid_image.png",
                  "BackURL": "file:////home/user/images/backside_image.png",
                  "NumWidth": 2,
                  "NumHeight": 2,
                  "BackIsHidden": false,
                  "UniqueBack": false,
                  "Type": 0
                }
              }
            },
            {
              "Name": "Card",
              "Nickname": "Maggy",
              "Description": "",
              "CardID": 101,
              "LuaScript": "",
              "Transform": {
                "posX": 0,
                "posY": 0,
                "posZ": 0,
                "scaleX": 1,
                "scaleY": 1,
                "scaleZ": 1
              },
              "CustomDeck": {
                "1": {
                  "FaceURL": "file:////home/user/images/grid_image.png",
                  "BackURL": "file:////home/user/images/backside_image.png",
                  "NumWidth": 2,
                  "NumHeight": 2,
                  "BackIsHidden": false,
                  "UniqueBack": false,
                  "Type": 0
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

Все данные приложения хранятся в папке DeckBuilderData. В Windows и Linux она создается рядом с бинарным файлом, а в MacOS, из-за ограничений, эту папку находится в домашней директории. После завершения генерации в папке приложения можно найти папку result, внутри которой и лежат картинки и json файл результата.

Вообще TTS открывает TCP сокет и слушает команды снаружи, можно было бы сразу отправлять ей этот json, чтобы объект появлялся на столе, но в бете данная функция еще не реализована. Поэтому чтобы проверить, что все это работает придется ручками скопировать получившийся json файл в папку сохранений игры. Для начала нужно найти где игра хранит свои сохранения.

• Windows — %USERPROFILE%DocumentsMy GamesTabletop Simulator

• Linux — .local/share/Tabletop Simulator

• MacOS — ~/Library/Tabletop Simulator

Внутри папки сохранений переходим по пути «Saves/Saved Objects» и кладем наш json файл в указанную директорию. После этого запускаем игру, создаем игру и мы должны видеть пустой стол.

Нажимаем сверху на кнопку Ojbects.

Мы должны увидеть следующее меню. Заходим в Saved Objects.

И тут мы должны увидеть наш json файл. В данном случае он называется decks. Наводим мышкой на decks, нажимаем на точки у этого файла в правом верхнем углу и выбираем Spawn, либо же просто перетаскиваем объект на стол.

На столе должен появиться мешочек, в котором лежат все карты, которые мы описали в графическом интерфейсе.

Заключение

Была проделана большая работа, но еще много чего нужно реализовать, чтобы я мог назвать это финальным релизом. Из глобального осталось только несколько функций. При сборке колоды иметь выбор: хранить ли файлы локально или же загрузить их в интернет хранилище. Автоматически отправлять json файл в TTS, чтобы вручную не перемещать json файл в список сохраненных объектов.

Но даже учитывая эти два недостатка, я считаю, что инструмент гораздо удобнее, чем все то, что я нашел, прежде чем начать писать свое творение. Проблему с картинками временно можно решить вручную. Загрузить их самостоятельно в интернет хранилище, либо в облако Steam через меню игры, а после открыть json файл через блокнот и заменить пути до них на URL. Но все-таки, надеюсь, что в скором времени и этот недостаток будет исправлен.

Думаю, данный инструмент будет вам полезен как для создания собственных карточных игр в TTS, так и для изучения подхода, когда приложение с графическим интерфейсом легко переносится на все платформы.

Ссылки:

https://github.com/HardDie/DeckBuilder — Backend (golang)

https://github.com/lmm1ng/DeckBuilderGUI — Frontend (vue3)

https://foursouls.com/ — Сайт с картами игры Four Souls