Hello, and welcome to a new feature in KiwiJS v1.2.0! Today we’re going to take a look at the new Color object, a unified color paradigm for KiwiJS games. This object is very simple, but has a panoply of ways in which it can be used.

Introduction to Color

Create a Color object as follows:

You may alter a Color object after creating it as follows:

You may access colors on the object as follows:

However, this is just the tip of the iceberg. There are many more ways to phrase data for color.

Note: Native Normalized Color

The Color object uses normalized color internally. It has four channels (red, green, blue, and alpha) in the range 0 (black) to 1 (maximum brightness). We use normalized color because it is most mathematically convenient. It is used in WebGL for this reason, and we like to maintain this compatibility.

We recommend that you work with normalized color whenever practical.

Advanced Color

There are a very large number of color formats in use today. The Color object can cope with a good number of them. In this section we’ll show you as many formats as we could fit in there.

Important note: No matter what format you put in, you can always get it out in any other format. Color objects are converters as well as storers.

RGBA Formats

These formats record color as four channels: red, green, blue, and alpha (transparency). In the wild, these may be treated as normalized channels (0-1), or as 8-bit channels (0-255).

You can access these channels in these ways:

• color.r, .g, .b, .a: Normalized color (0-1).
• color.red, .green, .blue, .alpha: Normalized color (0-1).
• color.rNorm, .gNorm, .bNorm, .aNorm: Normalized color (0-1).
• color.r255, .g255, .b255, .a255: 8-bit color (0-255).

You can set the channels in exactly the same way.

However, the channels color.r and color.red (etc) are “smart” setters. If you pass a number between 1 and 255, they will parse it as an 8-bit number instead. This should rarely be ambiguous. Only when an 8-bit number is precisely 1 will you encounter problems. In this case, we recommend that you work universally with normalized channels, or use .r255 and .rNorm to avoid ambiguity.

RGBA Set

When you create or set a Color, you may pass it parameters. By default, these are interpreted as RGBA channels using “smart” setters. For example, color.set(1,0,0) (without an alpha channel) will create solid red, and color.set( 127, 127, 127, 127 ) will create transparent gray.

Note that the channels are parsed separately, so you could recreate transparent gray as color.set( 127, 0.5, 0.5, 127 ). This is confusing. Why would you do that?

HSVA/HSLA Formats

These formats record color in a different way. They store hue, saturation, and either value (or brightness) or lightness, along with an alpha term. HSV and HSL are not the same thing. We recommend you read up on the formats, for example on Wikipedia.

As with RGBA, we recommend the use of normalized values. Values above 1 are parsed differently. Hue is always parsed in the range 0-360; saturation, value, and lightness are always parsed in the range 0-100; and alpha is always parsed in the range 0-255. It’s a little confusing, but it’s standard.

You can call the following methods to set HSVA or HSLA colors:

• color.parseHsv( h, s, v, a ): Set color in HSV format, either normalized or not. Alpha parameter is optional.
• color.parseHsl( h, s, l, a ): Set color in HSL format, either normalized or not. Alpha parameter is optional.

You can call the following methods to get HSVA or HSLA colors. Both methods return an object with normalized values.

• color.getHsva(): Returns object { h, s, v, a }
• color.getHsla(): Returns object { h, s, l, a }

HSVA/HSLA Set

When you create or set a Color, you may pass it parameters. Append the string "hsv" or "hsl" (lowercase verbatim) as the last parameter, and the color will interpret the values accordingly.

For example, color.set( 0, 1, 1, "hsv" ) is solid red, and color.set( 180, 100, 100, 50, "hsl" ) is translucent white.

CSS Formats

These formats record color as a string: either a hex color code or as a function. The color object can interpret these formats and apply them.

All these formats can be interpreted by the method color.parseString( string ). If you are using a hex string, you may pass it directly to color.parseHex( string ).

You may specify color as a hex string. This is a flexible format. Valid formats include "fff", "ffff", "ffffff", and "ffffffff". They may be uppercase or lowercase. You may begin the hex string with "#" or "0x", but this will be stripped off.

The hex string evaluates to RGB or RGBA numbers, either as 4-bit or 8-bit channels. For example, "f00" equates to ( 1, 0, 0 ), while "4080ffff" equates to ( 0.25, 0.5, 1, 1 ). (It’s actually not quite, because bit channels don’t divide neatly.)

You may specify color as a function. This is in one of four forms: "rgb(r, g, b)", "rgba( r, g, b, a )", "hsl( h, s, l )", or "hsla( h, s, l, a )". The Color object will determine which form is in use, strip off the wrapping text, and pass the parameters to the respective setter (RGBA or HSLA).

You may also extract the color value as a hex string. Call color.getHex() to get an RGBA color ("ff8040ff"), or color.getHex( false ) to get an RGB color ("ff8040").

Restrictions: You cannot extract color as a function. You cannot specify CSS color keywords (for example "cyan").

CSS Set

When you create or set a Color, you may pass it parameters. If the first parameter is a string, it will parse it as described above.

Using Color In The Field

KiwiJS now uses Color objects internally. Key implementations include Stage.color and TextField.color objects.

To maintain API compatibility, these colors still return hex strings. They were designed separately and use their own formats, so the Stage reports "ffffffff" while the TextField reports "#ffffffff". This will definitely be fixed in v2.0.

Fortunately, you don’t have to wait that long for input to be fixed. Both objects will happily receive any valid Color.set parameters. They even understand each other.

Note that if you are using multiple parameters, you must wrap them in an array.

For example, there was once only one way to make text black: text.color = "#000000". But now you can use many different methods:

Thank You!

We hope you enjoy using the new unified color system. There’s no need to reinvent the wheel, even if it’s a color wheel. We’ve settled on normalized color as best practice, but with the Color object, you can use whatever you like. And if we’ve forgotten some arcane color format, drop us a line! We’d love to hear about it.

Next time: Keep track of it all using Kiwi.Log!