Changing the Default Palette
This tutorial is on Changing the Palette in Quorum StudioChanging 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 itch.io. 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": "https://bakudas.itch.io/generic-rpg-pack",
"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:
- Name: The name to show in the Palette
- Source: Where the file was downloaded from
- License: The copyright license the file is under
- File: Where in the Quorum Studio folder the corresponding image file is
- Width: How wide the tiles are for the grid
- Height: How high the tiles are for the grid
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:
- 0: A marker saying which tile it is. In this case, there is only one tile, so it is marked as 0. This number is used internally by the system but is not shown to a user. When there is more than one image, this counter would increase for each image.
- x: The x coordinate of this part of the image in the Palette.
- y: While in Quorum, y coordinates start with 0,0 at the bottom left, the y coordinate in this particular image system starts from the top left down. This is confusing compared to how things are normally done in Quorum itself and is a quirk in the design of this file format.
- Category: This is a subcategory for this part of the Palette. Using this is not required.
- Name: The name that should show up in the Palette for this item.
- Description: A description of the item that is not shown visually, but is available for accessibility purposes.
- Physics enabled: This states whether or not physics should be enabled by default inside of the system for this kind of tile. This is convenient if you are expecting all tiles of a given type to always be inaccessible to a player or something similar. If physics is not enabled, do not include this line.
- Responsiveness: This states how responsiveness should be set by default for this kind of tile. If physics is not enabled, do not include this line.
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.
End of Lesson
You have reached the end of the lesson for Scene Editing. To view more tutorials, press the button below or you can go back to the previous lesson pages.