All examples · Sprites and 2D

Palette swap

What this example shows

To just show a drawn picture, use useLoadTexture: that is the normal way, and the first gammix here is shown like that. useLoadPixels loads the same file as pixels, to process it in code: the game reads or changes the drawing before showing it.

createPixelTexture(gammix, paint) takes the loaded picture and a function that changes it, and hands back a texture at once that fills in when the file has arrived. The function works on a copy, so the drawing, shared by every scene that loads it, is never changed. In art.ts:

  • recolor swaps the body and hat colours with swapColors: a palette swap, the way the consoles of the era made enemies and second players from one drawing.
  • silhouette turns every drawn pixel white with mapPixels: the flash of a hit.
  • outline colours every empty pixel next to a drawn one.

Click to make the outlined gammix flash. The PNG is decoded in plain JavaScript, with no canvas, so this works the same on the native runtime.

Starting