Textures

Textures are the basic building blocks of things to render on the screen, like a rectangle or image.

If you're coming from React, think of Textures as DOM elements like <div> and <span>.

Common Props#

Textures share the same common props as Sprites, except for id which isn't required. Textures also accept a testId prop which is used by Replay Test.

Circle#

Example#

t.circle({
radius: 5,
color: "#ff0000",
})

Props#

  • radius: Radius of the circle in game coordinates.
  • color: An RGB hex value (e.g. #ff0000) or CSS Level 1 keyword (e.g. green).

Rectangle#

Example#

t.rectangle({
width: 10,
height: 20,
color: "#ff0000",
})

Props#

  • width: Width of the rectangle in game coordinates.
  • height: Height of the rectangle in game coordinates.
  • color: An RGB hex value (e.g. #ff0000) or CSS Level 1 keyword (e.g. green).

Line#

Example#

t.line({
color: "#ff0000",
thickness: 2,
path: [
[10, 20],
[10, 30],
[20, 30],
],
})

Props#

Make sure one of color or fillColor is set, otherwise nothing will be drawn!

  • color: (Optional) An RGB hex value (e.g. #ff0000) or CSS Level 1 keyword (e.g. green) of the stroke colour. Default no stroke.
  • fillColor: (Optional) An RGB hex value (e.g. #ff0000) or CSS Level 1 keyword (e.g. green) to fill in the shape of the path with a colour. Default no fill.
  • path: An array of [x, y] coordinates to draw the line.
  • thickness: (Optional) Line thickness. Default 1.
  • lineCap: (Optional) The shape of the line ends. Can be one of:
    • "butt": (Default) The ends of lines are squared off at the endpoints.
    • "round": The ends of lines are rounded.
    • "square": The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.

Text#

Example#

t.text({
font: { family: "Calibri", size: 16, align: "left", },
text: "Hello Replay",
color: "#ff0000",
})

Props#

  • text: A string to display.
  • color: An RGB hex value (e.g. #ff0000) or CSS Level 1 keyword (e.g. green).
  • font: (Optional) Set the font family, size, etc. If any properties are not provided, will cascade from the game's default font (see Top-Level Game).
    • family: (Optional) Font family, e.g. "Helvetica"
    • size: (Optional) Font size, e.g. 20
    • weight: (Optional) Font weight, e.g. "bold", 500
    • style: (Optional) Font style, typically either "normal" (default) or "italic"
    • baseline: (Optional) Alignment of text around y position, can be "top", "hanging", "middle" (default), "alphabetic", "ideographic", "bottom"
    • align: (Optional) Alignment of text around x position, can be "left", "center" or "right". "left" will put the left edge of the text at the Texture's x position. Default "center".

Image#

Example#

t.image({
fileName: "player.png",
width: 30,
height: 80,
})

Props#

  • fileName: The name of the file to render. Note that this file must be loaded using preloadFiles before you render the Texture.
  • width: Scale the image to this width in game coordinates.
  • height: Scale the image to this height in game coordinates.

Sprite Sheet#

The sprite sheet Texture provides a way to render a section of an image. Iterate through the index over time to achieve an animation effect. All tiles should be of equal width and height.

Example#

t.spriteSheet({
fileName: "player-tiles.png",
columns: 3,
rows: 6,
index: state.frame,
width: 50,
height: 60,
})

Props#

  • fileName: The name of the sprite sheet file to render. Note that this file must be loaded using preloadFiles before you render the Texture.
  • columns: The number of columns of tiles in the sprite sheet.
  • rows: The number of rows of tiles in the sprite sheet.
  • index: The tile to display. An index of 0 will be the top-left tile, moves left to right then top to bottom. An index greater than the number of tiles will loop back to an index of 0.
  • width: Scale the displayed tile to this width in game coordinates.
  • height: Scale the displayed tile to this height in game coordinates.