The Palette Builder
Note: The sprites used on this page were made by the incredibly talented and very cool @shmegleskimo. Go give him a follow!
The Palette Builder is the tool with which one creates the palette files to feed to chameleon_set().
Upon opening the Palette Builder, you will be greeted with the following interface:
Each part of this interface will be discussed as follows:
These buttons save palette data to and load palette data from JSON text files. It is important to note that saving is distinct from exporting; saving allows you to reopen and easily edit a palette again, while exporting bakes the palette into a format for Chameleon to utilize at runtime.
These buttons allow you to add and remove sprites from the current session. Newly added sprites will have their colors indexed and added to the current palette, and will be viewable in the Sprite Viewer. Removing sprites from the Sprite Viewer will not remove their colors from the current palette.
These buttons allow you to swap between loaded sprites for previewing palette changes. Alternatively, you may use the left and right arrow keys to perform the same actions.
This button takes the current palette and exports it as a Chameleon-usable image. This should be loaded into your project as a sprite and fed to chameleon_set() to recolor your sprites at runtime.
This slider allows you to preview different mix (blend) values with the current palette. It will not affect saved or exported data, and is purely for previewing purposes.
This slider allows you to compress the exported palette sprite, reducing its filesize. This should not be touched unless you have a decent idea of how Chameleon works under the hood (wiki page coming soon)! It essentially sacrifices accuracy for texture size. This is fine in many circumstances, especially with low color counts, but can behave somewhat unexpectedly at various values. It is recommended that all compression should result in powers of two for performance and accuracy reasons.
Please don't make me hide this behind an "advanced" button or similar. Any usage of it is at your own risk, and I do not advise going above 50% without a firm understanding of what you're doing.
After adding a sprite, more UI elements will become visible (namely the Sprite Viewer, Palette, and Color Picker).
These three elements will be discussed as follows:
This panel displays the sprites you have loaded, recolored with your customized palette. Controls are as follows:
- The Next/Prev buttons and right/left arrow keys allow you to switch between your various loaded sprites.
- Holding and dragging left click allows you to pan the currently displayed sprite.
- The mousewheel will change the scale of the currently displayed sprite.
- The middle mouse button will reset the scale and position of the currently displayed sprite.
Additionally, the Mix Slider will determine the blending strength of the palette preview.
This palette ramp displays all the original palette colors in the left column and your edited ones in the right column. Controls are as follows:
- Left click will change the currently selected color.
- The scroll wheel will shift the Palette up and down, allowing you to work with palettes larger than you have screen space for.
- Middle click will reset the color currently under the mouse.
- Shift + left click will swap the currently selected color with the color under the mouse. This is useful for organizing your palette by color groups.
The Color Picker allows you to edit the currently selected color. Click within the bar on the right to change the hue of the color, and click within the larger square on the left to change the saturation and value of the color. The hex color code above the Color Picker can be clicked and typed within, allowing you to copy in colors from other sources.
Because Chameleon ignores the blue value of a color when keying for space and performance reasons, occasionally you will encounter two colors that "collide;" they share red and green values, but have different blue values. While they are technically distinct colors, Chameleon will see them as the same. Thankfully, such collisions are relatively rare in pixel art and the Palette Editor will warn you when it encounters them by drawing an orange line between them:
If you encounter a blue collision, you will need to either accept that both colors will be treated as the same by Chameleon or adjust one of the colors externally and then resume creating the palette.