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: { name: "Calibri", size: 16 },
align: "left",
text: "Hello Replay",
color: "#ff0000",
})

Props

  • font: (Optional) Set the font name and size. If not provided, will use the game's default font (see Top-Level Game).
  • 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".
  • text: A string to display.
  • color: An RGB hex value (e.g. #ff0000) or CSS Level 1 keyword (e.g. green).

Image

Example

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

Props

  • fileName: The name of the file to render.
  • 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.
  • 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.