The p5play library has another really powerful feature that makes creating certain scenes and games a lot easier! p5play Tiles uses a gridlike structure to enable us to place sprites in our scene with ease.

The syntax can be a little tricky, so we'll always provide you with the structure to work inside. Basically when you create Tiles, you create a grid in the code that represents a grid on the canvas. See the basic setup here:

You can use periods "." (or spaces " ") for blank locations in the grid, and then assign any other symbol to a group or individual sprite to place it in the grid.

For example, in the program below, we create a group called "brickGroup", with specific properties, and then assign it a tile symbol of "=". This allows us to create brick sprites in our Tile grid with the "=" symbol.

brickGroup = new Group();
brickGroup.width = 20;
brickGroup.height = 20;
brickGroup.color = '#50514f';
brickGroup.tile = '=';

new Tiles(
  [
  "......===.......",
  ".....=====......",
  ".....=====......",
  "......===.......",
  ".......=........",
  ".......=........",
  "....=======.....",
  ".......=........",
  ".......=........",
  "......=.=.......",
  ".....=...=......",
  ],
  100,
  180,
  brickGroup.width + 4,
  brickGroup.height + 4
);

Can you see how we use the "." to represent blanks in the grid and the "=" symbol for the individual bricks of the brickGroup? This automatically creates the brick sprites without needing any extra code!

This scene would be A LOT harder to create if we had to set the individual X and Y coordinates of each brick! Can you imagine doing that for 31 bricks?

For an extra little fun surprise, click on the canvas and press the 'b' key. Then click on the ball and drag it through the brick figure!