All of this talk of color palettes is great, but how do we actually implement them in MakeCode Arcade? Currently, all games use a default palette and there isn't a direct way in the Blocks interface to change this.
If you create a sprite and open the sprite editor, you'll see the familiar set of colors that can be chosen.
The Developer Documentation on Art and Images for MakeCode Arcade goes into greater detail on color usage. It says:
Images in arcade are stored using 4 bits per color. The color
0is reserved for transparency so, at any one time, you have the remaining 15 colors available to work with. The image color values are really indices that map to 16 entries of the current palette of RGB colors. The default palette for the MakeCode UI is here:#000000 // transparency #ffffff #ff2121 #ff93c4 #ff8135 #fff609 #249ca3 #78dc52 #003fad #87f2ff #8e2ec4 #a4839f #5c406c #e5cdc4 #91463d #000000
Hex Values
What the heck are those things, they don't look like colors? Well,to the computer they do! Those are hexadecimal numbers that represent individual colors. #ffffff is white, #ff2121 is a deep red, and so on. But how do we get these values? Luckily, most any image creation software will tell you your colors in many formats, such as RGB (red, green, blue), CMYK (cyan, magenta, yellow, black), and even hexadecimal.
The color palette resources on the previous page will also give you hex values, and often can import a chosen palette as a hex list.
Here's the Steam Lords palette by Slynyrd on Lospec:
This is a gorgeous piece of example art Slynyrd included with the palette:
If you download the HEX File link, you'll get this:
213b25 3a604a 4f7754 a19f7c 77744f 775c4f 603b3a 3b2137 170e19 2f213b 433a60 4f5277 65738c 7c94a1 a0b9ba c0d1cc
We can edit the HEX file in a text editor to add some formatting that we'll use in MakeCode Arcade. We need to create a new first entry that's a throw-away, since MakeCode Arcade will use it as the transparency slot. I just added a 000000 as line one.
Next, we need to loose one entry to keep the list to 16 total, I decided to get rid of the last entry from the list, which was a light gray-blue.
Then, I added the formatting that makes this a list we can use in the code.
Your file should look like this:
"palette" : [ "#000000", "#213b25", "#3a604a", "#4f7754", "#a19f7c", "#77744f", "#775c4f", "#603b3a", "#3b2137", "#170e19", "#2f213b", "#433a60", "#4f5277", "#65738c", "#7c94a1", "#a0b9ba" ]
Save that list somewhere handy, we'll need to copy and paste it in a moment.
Edit MCA Palette
If you're in Blocks mode currently, click the JavaScript button at the top of the interface.
This switches over to the code editor mode. To see what files are in use, and edit them, click the Explorer button under the simulator.
Next, click on the pxt.json file entry in the list under Explorer. This is where setting for the game are stored and edited.
Next, click the Edit Settings As text button.
Here we'll see some details about the game file. This is where we can add our new palette!
Add a comma and a newline after the last line of text, but before the closed curly brace, as shown, and then paste your formatted palette hex code list.
We need to refresh the game now, by clicking on the main.ts file in the Explorer list. Here, you can click on the artist palette icon to open the sprite editor and you'll see your new, custom palette appear on the left of the editor! Also, notice how those colors appear in your zombie hamburger. Yikes!
Perhaps this house from the image gallery looks a bit nicer with our new Steam Lords palette!
Now, you can head back to the Blocks editor if you like and continue making your game with your custom color palette!
Page last edited March 08, 2024
Text editor powered by tinymce.
