Custom Dice Images

Written by Mike Moede

December 17, 2020

Vorpal board allows you to create dice with custom images to allow for maximum flexibility in creating a more realistic dice rolling experience. To allow for images to work best in rolls and throughout the application we’ve chosen to use vector graphics to improve overall performance. Most people are only familiar with raster style graphics types such as png or jpeg so this blog is to educate users about how to deal with common quirks and problems they have when making the transition to scalable vector graphics (svg) image format.

Online Vector Image Libraries

For starters, there are some very good resources online that have pre-built icons that can be downloaded and used in Vorpal Board. This is by far the easiest way to get images quickly. When using these, it is important to download the SVG image and not the PNG image.

Game-Icons

Game-icons.net is an online repository providing heaps of cool game related graphics. They are provided provided under the terms of the Creative Commons 3.0 BY license. You can also edit them online.

TIP: before downloading images from game-icons, change the background to None for best results.

Noun Project

The Noun Project proclaims to be the most comprehensive icon collection in the world. Their community of designers from 120+ countries is building the most diverse and extensive collection of iconography ever created. Their terms of use are stated here.

Converting from PNG to SVG

If you already have PNG images you want to use in our software, many tools such as Adobe will embed the png inside the svg rather than converting it. That will lead to a poor result in terms of quality, performance, and size. If you absolutely need to use a pre-existing png, it is preferable to instead convert the image into an SVG which will create an approximation of the original, but in vector format. Keep in mind these conversions are not identical and can be tricky to configure, so this is probably the least-desirable path to get an svg image.

Inkscape

Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (SVG) format. Other formats can be imported and exported. This is the tool the Vorpal team uses whenever we have to convert raster to vector images.

There are lots of examples online on how to use inkscape to convert images to SVG such as this one logosbynick.com/inkscape-convert-png-to-svg

Online converters

There are also tools online that can “automatically” convert images to PNG’s. These work in most cases, but results can vary considerably. Here are some examples:

Other Considerations / FAQ

  1. While it is preferable NOT to embed image elements in SVG’s as mentioned above, if you have to do so make sure the tag is “image” and not “img” otherwise you can run into issues in certain browsers. (stackoverflow.com/questions/10737166/chrome-not-rendering-svg-referenced-via-img-tag)
  2. Sizes for images are limited to 3mb, but should typically be below 1mb. If you are above 1mb, check if you are embedding images directly and consider following some of the techniques to convert your png instead which are described above.
  3. When creating images in inkscape, try to minimize the empty space around the actual image and keep the document height and width to approximately the same size for best results.

Card Indexing

Learn how to use the card indexing sheets to track physical cards as they are scanned in. This allows you to easily play games that require stealing or trading of cards. If you need more card index sheets, you can download them here: Card...

read more

Dice Builder Overview

Learn how to build and roll custom 3D dice using the dice builder and your Vorpal Board account. You can customize dice color and faces using a combination of text and SVG images. Once created, search for dice in the dice drawer by title...

read more

Vorpal Board Player Overview

Learn the basic functionality available in this Vorpal Board Player Overview video. Share this video with new players before their first game on the platform. We cover connecting to a game, changing your name & color, rolling dice, and...

read more

Create and Save Sets

Learn how to create and save sets using the Vorpal Board smartphone app. Get your games going quicker than ever by saving sets for easy reuse of components. Be sure to check out all the How-To video posts here or conveniently...

read more

Save Your Game

Learn how save your current game using the Vorpal Board mobile app on Android or iOS. You can save as many games as you need to easily pick up where you left off. Saved games can be given a name and can be managed using the mobile app. Be...

read more

Scan Components

Learn the different ways to scan components into a Vorpal Board session in this video overview. We show two different methods of scanning and direct importing. Bring in any physical or digital component that you need for your games for...

read more

Connect and Stream Your Tabletop

Learn how to use your Android or iOS device to a connect and stream your tabletop to a Vorpal Board game session. Remote players will be able to see an interact with everything that you see locally. It's as if they're sitting at the table....

read more

Login and Create a Room

Learn how to login and create a room using your Vorpal Board account. Once connected, you will see how to invite remote players to join your game session. Get game night back quickly and easy using Vorpal Board. Be sure to check out all...

read more

Arm and Box Setup

James covers the basics in this arm and box setup video. This includes an overview of how to setup the Vorpal component scanning box and adjust the phone mounting arm. See how to correctly slot together the box parts for a snug fit....

read more