Overview

Make your games look amazing with your own custom color palette!

You can use external tools to create sprites for MakeCode Arcade, such as Aseprite, Piskel, and Photoshop, but until now you have probably been working with the default 16 color palette. But no longer! Now, you can create a custom palette to suit your game's design!

How about a stylish monochrome green "Matrix" look? Or moody Steampunk, earthtones? Gritty, yet neon-filled Cyberpunk? Cheery jewel tones? Blues and whites for a winter scene? Any of these are possible!

In this guide, you'll learn a bit of the history behind game color palettes, as well as how to use resources and tools to create and import your own 16 color palette into MakeCode Arcade to include with your game.

Parts

You can do everything in the guide inside the Chrome browser using MakeCode Arcade and its built-in game console simulator, or you may want to pick up a handheld game development system, such as PyGamer or PyBadge/PyBadge LC to play on the go!

Adafruit PyGamer Starter Kit

PRODUCT ID: 4277
Please note: you may get a royal blue or purple case with your starter kit (they're both lovely colors)What fits in your pocket, is fully Open...
OUT OF STOCK

Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino

PRODUCT ID: 4242
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the Adafruit...
$39.95
IN STOCK

Adafruit PyGamer Acrylic Enclosure Kit

PRODUCT ID: 4238
You've got your PyGamer, and you're ready to start jammin' on your favorite arcade games. You gaze adoringly at the charming silkscreen designed by Ada-friend...
$12.50
IN STOCK

Lithium Ion Polymer Battery with Short Cable - 3.7V 350mAh

PRODUCT ID: 4237
Lithium ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery...
$5.95
IN STOCK

Mini Oval Speaker with Short Wires - 8 Ohm 1 Watt

PRODUCT ID: 4227
Hear the good news! This wee speaker is a great addition to any audio project where you need 8 ohm impedance and 1W or less of power. We particularly like...
OUT OF STOCK

Adafruit PyBadge for MakeCode Arcade, CircuitPython or Arduino

PRODUCT ID: 4200
Coming soon! Sign up to be notified when we have these in stockWhat's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's...
$34.95
IN STOCK

Adafruit PyBadge LC - MakeCode Arcade, CircuitPython or Arduino

PRODUCT ID: 3939
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the Adafruit...
$24.95
IN STOCK

Color Palettes

Games made for modern consoles, handhelds, and computers have effectively unlimited color palettes -- 24-bit RGB graphics that offer millions of colors. But limited color palettes have a tremendous charm of their own, and are often necessary to deal with the memory limitations of plucky little handheld systems built with microcontrollers.

MakeCode Arcade games are made with 16-color palettes, and really we've only got 15 colors, since the first slot in the palette index is taken up by the transparent "color"! But fear not, some of your favorite iconic games of yore were made with only 2, 4, 8, or 16 colors, so we can rest assured that these constraints can still produce beautiful artwork!

History

In early systems, limitations on memory and display hardware forced creative use of small palettes. In fact, the arcade version of Mario Bros. introduced Luigi as a palette swapped version of his brother Mario! This meant not having to store an extra sprite in memory, just simply change the color indices.

In many cases, a fixed palette of colors is loaded along with a game level. You can see this in Super Mario Bros. for NES, where a different palette is used for outdoor, underground, dungeon, and underwater levels.

Fixed Palettes

Early consoles and 8-bit home computers often had a fixed palette (unlike MakeCode Arcade, which can use a palette of any 16 colors). This often lead to a recognizable "house style" for each system.

Here are the color palettes for the Apple II, ZX Spectrum, and IBM Color Graphics Adapter, as per the Wikipedia article on 8-bit computer hardware graphics.

This means that all games developed for those systems had to fit their graphics into their associated palettes (save for perceptual tricks such as dithering to create additional looks).

16-color Examples

Let's have a look at a couple of examples here of limited palettes that were chosen to work best with their subjects. The Industrial Pack by OllieBerzs and Dino Characters by Arks are both asset packs from itch.io

Here's what a 16-color palette for the industrial pack looks like (reduced from the original 40 colors):

You can tell that we need a different type of palette for these cute Dinos! Note how they each have shading that necessitates two values per hue, so two greens, two reds, two yellows, and two blues.

Remember our pal Trash Panda? Here's her splash screen in the original MakeCode Arcade palette:

Now here's how she looks with a "Matrix" style monochrome green palette:

Palette Swapping/Color Cycling Wizardry

We mentioned above the use of palette swapping to save memory for storing sprites in the example of Mario and Luigi. Another highly awesome use of this technique is to save frames of animation. Instead of swapping out a large number of sprite bitmaps, the animation of palette index colors can create beautiful, sophisticated effects, such as the work by Mark J. Ferrari (If you'd like to see more in depth on his techniques, please check out this Game Developer's Conference '16 presentation.)

Here's another great example of palette swapping used for a damage hit effect from Shovel Knight. Thanks to Mr. Certainly in the Adafruit Discord server for the suggestions!

Resources

There are many good resources for game color palettes out there. Here are some favorites:

Custom Palettes In MakeCode Arcade

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 0 is 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:

Download: file
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:

Download: file
"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!

This guide was first published on Jun 28, 2019. It was last updated on Jun 28, 2019.