38 Creating Games
96LawDawg edited this page 2026-02-04 21:00:55 -06:00

Creating games with VirtualTabletop involves both creation of a user interface with provided widgets as well as programming those widgets by writing JSON.

You should become familiar with section 2, Developer Documentation, to understand the programming capabilities provided by the system.

In addition, there are a number of Tutorials that explain system programming concepts through extended examples. We also have a YouTube channel (https://www.youtube.com/@VirtualTabletop) with information on how to use VTT to create games.

Finally, there are a large number of publicly available games that can be loaded, examined, and played from the VirtualTabletop Public Library (see also Games).

If you want to contribute to the games in the public library or to the tutorials, look at the Public Library Guidelines.

I want to make my own game. What resources are available to help me?

Start by:

  • Reviewing games in the public library and looking at their JSON.
  • Reading the other wiki pages devoted to explaining how the code and how the JSON works.
  • Look at the tutorials (and the JSON in them) available as individual files in the public library or conveniently placed in one room at https://virtualtabletop.io/Tutorials#tutorials. If you click on this link, it will automatically display all the available tutorials when you click on the Game Shelf because the link has #tutorials at the end of the URL. Without that at the end, the Game Shelf would default to opening games and not tutorials. This room may be used by multiple people at the same time, so please be considerate if changing to a different tutorial while someone else is in the room. Also, please do not add any games or tutorials to the Game Shelf in that room.
Do I have to know how to program?

No. Virtualtabletop.io runs mostly on JavaScript, CSS, and some HTML. But games are all built in JavaScript Object Notation (JSON). While it doesn't hurt to have some knowledge of how computers work, if you can follow the examples in the resources listed in the answer to the previous question, you can adapt the JSON to suit your needs. To highly customize the appearance of a game, it is helpful to understand the capabilities of CSS.

What if I need more help?

Post your questions in the #help channel on our Discord server. If you have not yet joined the server, see the link in Guidelines for Use and Privacy Policy or on the About page on VirtualTabletop.

I'm ready to get started. What should I do?

Make sure you know how to open, play, save, update, download, and remove games. See the explanations in the Playing Games topic.

If you want to start with a pre-existing game, then just load that game up.

If you want to start with an empty room, just open a new default URL and instead of loading a game from the public library or a file, just click on the Active Game button and you will be presented with an empty room. If the room already has existing content in it, go to in Edit Mode (ctrl-J or press the Edit Mode button). The button on the far left of the top toolbar (the plus sign on a page) will erase everything in the room.

How do I add items to my room?

To add new items to the room, click on the blue and white Edit Mode menu button on the left hand side (or press Ctrl-J). Then click on the blue and white plus button at the top of the screen. From there, you can add several types of widgets (we refer to anything in the room as a widget, although some have special names and properties). Most of the items are self-explanatory and you can add any of them by just clicking on the representative image.

On the far right, you will see a column labeled "Custom." Click the "Upload Board" button to load a file that will default to a full-screen background image (with a negative layer number so it will be "below" other objects in the room). Click on the "Upload Token" button to upload any image you want to use in the room. Click on the "Add Basic Widget" button to create a small square widget in the upper-left corner of the room that can serve many different purposes.

If you see an image in another game you want, you don't have to upload it again. You just need the file location/URL. For example, to use one of the red marbles from Chinese Checkers, you could put "image": "/assets/1885401927_2961" in your JSON. If you want to download a copy of the image to edit or save for other purposes, just include that information in the URL like this: https://virtualtabletop.io/assets/1885401927_2961.

How do I edit the JSON?

This is discussed in some detail on the Editing JSON page.

How do I upload and edit cards?

If you want to make a brand new deck from nothing (it isn't that hard once you get used to it), look at our Step By Step Example.

If you have a deck from PCIO, you can import the PCIO file into virtualtabletop.io and edit it from there.

The JSON Editor also has a lot of nice tools discussed in Cards and Decks.

You can also import a deck in CSV format.

Any additional tips from the pros?

Save often! Create a new variant after making significant changes. That way you have something to go back to if everything gets messed up. Also, download a personal copy of the .vtt file just as often.

If you need help and post a question in Discord, share a link to a room, but not the room you are actually working in. Have a spare, second room available for people to come in and tinker with your problem.

Also, when asking for help in Discord, it's okay to ask "can I do x?" But it is better to explain what you are trying to accomplish and then ask about how to do something. The more experienced room creators may have an alternative solution that you weren't thinking about and explaining the background will help with that thought process.

Can I make a game for the public library?

Yes! Read the Public Library Guidelines. Post any questions or links to games you want comments about in the #public-library channel on Discord.

My game isn't for the public library but I still want to share it. How can I do that?

Post the room or .vtt file in the #sharing-games channel on Discord. Also see Sharing-Games.

I was creating a game in a PR-test room that was closed. Can I recover it?

If the PR was merged your room should still be available at the same link listed in the PR. For example: https://test.virtualtabletop.io/PR-2457/pr-test. To search for old pull requests go to the "Pull Requests" tab and remove the "is:open" tag from the search bar.