Using BitmapData.threshold()

Since one of my objectives is to be able to publish this yet unnamed game to the web, one of my main concerns is keeping the total download size low, relying on as little static art as possible.

One cool thing I’ve always wanted to try out is palette swapping: basically you take the same bitmap and you replace color values to change the way it looks. Most widely known for its ability to recycle the same beat’em up enemy in several levels by changing pixel colors without requiring a whole new bitmap being stored on the ROM.

In my case, I use it for far more utilitarian goals: to signal player ownership of a given vehicle.

Thanks to openFl’s near perfect port of the flash API, BitmapData.threshold() is available. You give that method a source bitmap, a threshold color, a replacement color and an operation (==, <=, etc) and all pixels that match the condition will see their color set to the replacement color.

I added the color swap method right into my asset manager class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public function getColoredTank(p_color1:UInt, p_color2:UInt):BitmapData
{
var coloredTank:BitmapData = baseTank.clone();

//apply first color, replacing Magenta (0xFFFF00FF)
coloredTank.threshold(
    coloredTank,
    coloredTank.rect,
    coloredTank.rect.topLeft,
    "==", 0xFFFF00FF, p_color1);

//apply second color, replacing Yellow (0xFFFFFF00)
coloredTank.threshold(
   coloredTank,
   coloredTank.rect,
   coloredTank.rect.topLeft,
   "==", 0xFFFFFF00, p_color2);

return coloredTank;
}

This allows me to turn this:

TEST

Into these:

Workspace 1_004

Both tanks in the bottom image share the same source bitmap.

Since I’ve had some fun playing with this, I decided to see about allowing players to set their own color preferences for their vehicles, which might be a nice touch in multiplayer.