Example of using palette swapping on a spritesheet in Phaser 3.
This initial idea came from this article:
http://laxvikinggames.blogspot.com/2015/01/build-dynamic-texture-atlas-in-phaser.html
The palette swapping in this example is achieved by taking an image that contains palette data then going through a spritesheet and switching the matching pixels from the original palette to the new palette.
Our "palette data" image is a small image consisting of each unique color we want to replace and their replacements. Each color is a single pixel, and each row represents an individual palette.
We then define a config containing the relevant information for creating the necessary spritesheets and animations after the palette swapping is performed.
var animConfig = {
paletteKey: 'link-palette', // Palette file we're referencing.
paletteNames: ['green', 'red', 'blue', 'purple'], // Names for each palette to build out the names for the atlas.
spriteSheet: { // Spritesheet we're manipulating.
key: 'link',
frameWidth: 32, // NOTE: Potential drawback. All frames are the same size.
frameHeight: 32
},
animations: [ // Animation data.
{key: 'walk-down', frameRate: 15, startFrame: 0, endFrame: 9},
{key: 'walk-left', frameRate: 15, startFrame: 10, endFrame: 19},
{key: 'walk-up', frameRate: 15, startFrame: 20, endFrame: 29}
]
};Once the spritesheets and animations have been built, we can then use them in our game as we need!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent