Changing the Palette

Quorum Studio allows adding images to the Palette, to set some default properties on them, and to give them names and descriptions. Effectively, these are special image sheets, loaded by Quorum's Scene Editor when Quorum Studio Loads. There are defaults available, but the project may require different graphics. To do this, files must be added to tell Quorum Studio what to display, and how to label it.

For every item in the Palette, other than the primitives loaded in by default, there are two files. In the install folder for Quorum Studio, there is a folder labeled Resources. In that folder there is a folder labeled Tilesets. This is where 2D images for the Palette are saved in paired files. Each pair has a PNG and a JSON file. The PNG holds a set of images. The JSON file is a text file that tells Quorum Studio which part of the image to display, and how to label it for screen readers.

There are many tilesets available for free online. The default assets in Quorum Studio were referenced and used from User-created tilesets can be added, as well.

Once a graphic is chosen and saved to the Tilesets folder, the JSON file is written and saved there, too. Here is an example of one of these files from the system for the character part of the Palette:

    "Name": "Characters 2D",
    "Source": "",
    "License": "CC0",
    "File": "Resources/Tilesets/Characters.png",
    "Width": 24,
    "Height": 24,
    "Tiles": {
            "0": {
                "X": 0,
                "Y": 0,
                "Category": "Boy",
                "Name": "1: Boy",
                "Description": "A boy standing in place",
                "Physics Enabled": true,
                "Responsiveness": 2

This is a regular JavaScript Object Notation (JSON) file which states:

For each tile, there is additional information for the system, which tells Quorum Studio how many tiles there are and what each piece of that image is. For each tile, specify:

When more images are used from the same PNG file, repeat the portion from the image number down for the next image. Unlike in the Scene Editor, the coordinates for the images are based on a set grid. The size of the grid is declared in the Width and Height part of the file. So the next image to the right in the file mentioned above would have:

"X": 1
"Y": 0

The image below the original one would have:

"X": 0
"Y": 1

Not all properties available in scenes are available in tileset files, and specific will evolve over time based on user feedback.

Next Tutorial

In the next tutorial, we will discuss Layers, which describes how to use layers.