https://github.com/colbydude/phaser-3-palette-swapping-example

Example of using palette swapping on a spritesheet in Phaser 3.
https://github.com/colbydude/phaser-3-palette-swapping-example

html5-game-development palette-swapping phaser phaser3 phaser3-example phaserjs

Last synced: about 18 hours ago
JSON representation

Example of using palette swapping on a spritesheet in Phaser 3.

• Host: GitHub
• URL: https://github.com/colbydude/phaser-3-palette-swapping-example
• Owner: Colbydude
• Created: 2018-03-22T23:06:02.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-05-30T06:58:34.000Z (4 months ago)
• Last Synced: 2024-09-23T17:32:00.050Z (1 day ago)
• Topics: html5-game-development, palette-swapping, phaser, phaser3, phaser3-example, phaserjs
• Language: JavaScript
• Size: 16.6 KB
• Stars: 41
• Watchers: 5
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Phaser 3 Palette Swapping Example

Example of using palette swapping on a spritesheet in Phaser 3.

## How It Works

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.

```js

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!