Sprites

Sprites are graphical representations made up of multi-line character strings. Each line corresponds to a row of pixels, and each character represents an individual pixel.

• Digits (0-9): Each digit corresponds to a specific color, for instance: 0 for black, 1 for white, 2 for gray, etc.
• New lines: Indicate the start of a new row of pixels.
• Whitespace, tabs, and blank lines: Are ignored and do not affect the sprite’s display.
• Other characters: Represent a transparent pixel.

Tip

To create a solid rectangle, simply use the digit for the desired color.

Dimensions

By default, sprites are 8x8 pixel squares. You can adjust this size by modifying the cellWidth and cellHeight properties.

createGame({
  //...
  cellWidth: 16,
  cellHeight: 32
})

Colors

Default Colors

Here is a table of default colors with their hexadecimal codes:

Note

These colors come from the excellent open-color palette.

Customizing Colors

You can customize the colors used for sprites by defining an array of strings that can be interpreted as CSS colors. These colors can be hexadecimal codes, color names, RGB values, etc.

Example:

createGame({
  //...
  colors: [
    'red',
    'orange',
    'lab(50% 40 59.5)',
    'hwb(12 50% 0%)',
    '#f06595',
    '#f09',
    'oklch(60% 0.15 50)',
    'hsl(150 30% 60%)',
    'light-dark(white, black)',
    'black'
  ]
})