Skip to content

How to add your own dice to the extension

Tobias Løfgren edited this page May 7, 2020 · 9 revisions

This document is currently a draft!

You can skip most of there steps if you're already familiar with GitHub. I encourage you to set everything up yourself, but if you end up creating some cool dice, but can't figure out how to do the stuff with the code, let me know and we will figure something out.

1. Clone the repository

Download the code as a .zip file or clone it with git. I recommend the GitHub Desktop client.

2. Install the dependencies

You will need Node.js and NPM (comes bundled with Node.js), as well as Python 2.7.

After installing Node.js and Python, open up a command line and navigate to the folder you cloned the repository into. Then run the command npm install to install everything needed to build the project. It may take a while for the command to finish. It's okay if some warnings appear, as long as there are no errors.

3. Build the extension

You can now try to build the Chrome extension to make sure everything works. Use the command npm run build and wait for it to finish. If no errors show up and it looks something like the screenshot below, but with a lot more green text, then everything worked.

4. Install the extension in Chrome

Go to the url [chrome://extensions/](chrome://extensions/) and enable Developer mode in the top right corner. Then click the "Load Unpacked" button in the top left corner and select the build folder inside roll20-fancy-dice. You now have the development version of the extension installed and create a new build of the extension you can click the "Reload extension" button and then refresh Roll20 to use your new version.

4. Add a new dice from a template

5.a Modify the dice with Blender

5.b Modify the dice with Photoshop

6. Update the extension

7. Submit a Pull Request

Clone this wiki locally