This page is part of the Snake in MIT Scratch Tutorial.

Dividing the Playing Area into a Grid

The screen that Scratch provides for our game is already divided into a rectangular grid of coloured squares called pixels.

Scratch draws its graphics at a resolution of 480×360. This means that the space for graphics on screen is 480 pixels wide and 360 pixels tall.

This game will use a grid with a smaller number of large squares like this:

The grid is 12 tiles wide and 9 cells in height. This size is convenient because 12 and 9 divide into the width and height of the scratch screen (480×360) with no remainder so that the grid will fit the screen correctly.

The size of each square in the grid can be determined by dividing the width and height of the scratch screen by the logical grid size (12 x 9).

480/12 = 40 and 360/9 = 40

Each square on the grid is (40 x 40) pixels in size.

The size of the grid will never change during the game.

Implementing the Grid in Scratch

Setting the Grid Data

The grid is constructed in Scratch by defining three variables. These variables are set when the data is created and should never change unless changing the size of the grid. The data should be global meaning that the data should be available for all sprites.

These variables contain the gird data:

1. Grid Width – How many tiles wide is the grid. This value is 12. The big grid above had 12 squares.
2. Grid Height – How tall the grid is. This value is 9.
3. Grid Cell Size – This is the size in pixels of each square in the grid. Each cell in grid is a square with a width and height of 40

When creating the variables in Scratch it is important that they are set as available to all sprites:

At the start of each game these values are set as part of the Initialize Game Data function:

The Initialize Game Data function is called when the green flag is clicked to set the values of important data for the game.

Grid Coordinates

Every cell in the grid has an X and Y coordinate. The X coordinate gives the cell’s horizontal position and the Y coordinate gives its vertical position.

The coordinate system starts at the top-left cell and moves left-to-right and then down like you might read this text.

The first cell is (X:0, Y:0). It is common for coordinate systems to start with 0 rather than 1.

As the coordinate system starts at zero the maximum values will be one less than the size of the grid.

The maximum value of the coordinate system – the bottom-right cell – is (X: 11, Y: 9)

This coordinate system is used when moving the snake or apple. Grid positions will be references with variables named gridX and gridY

Translating Grid Coordinates to Screen Coordinates

Scratch has its own coordinate system that is used to display sprites on screen:

https://wiki.scratch.mit.edu/wiki/Coordinate_System

The Scratch coordinate system has (X:0 , Y:0) in the center:

In order to display the snake and apple at the correct positions on screen a function that converts grid coordinates into screen coordinates is needed.

When translating the coordinates there are a few things to consider.

1. The origin (0,0) of the Scratch coordinate system is in the center while the snake grid’s origin is top-left.
2. The origin of Scratch sprites is also their center rather than the top-left.
3. In the Scratch coordinate system the largest Y values are at the top while in the Snake coordinate system the largest Y values are at the bottom.

The animation below shows the steps taken to translate the grid coordinates:

The animation shows the following steps:

1. Initial Alignment: Before translating the coordinate systems this is how they are aligned.
2. Align Grid System Origins: The (0, 0) points of the two coordinate systems are corrected.
3. Align Sprite Origins: An adjustment is made to move sprite origins from the center to the top-left.
4. Flip the Vertical Axis: Y coordinates are flipped so the smallest values are at the top.

Translating the Coordinates in Scratch

The Move To Grid Pos function is used to translate the snake grid coordinates to screen coordinates:

This function appears in the scripts of sprites that are positioned on the grid such as the snake and apple.

The function accepts 2 paramters: gridX and gridY. These are the X and Y coordinates of the snake grid that the object should move to.

The Move To Grid Pos has two lines beginning set x to and set y to. These lines move the sprite to the screen position that matches the snake grid position.

The X and Y values are calculated separately. The calculation that translates the coordinates has 4 parts:

Each part of the calculation has the following effect on the result:

1. Multiply the desired coordinate by the pixel size of the cells. This selects the proper row/column of the cell.
2. Offset the origin of the snake grid (top-left) by half the size of the screen so that it aligns with the origin of the Scratch pixel grid (center).
3. Select the center of the square because Scratch moves its sprites according to their center.
4. The Y value is multiplied by -1. This inverts the grid so that the smallest values are at the top and the largest are at the bottom.

Conclusion

Scratch provides a coordinate system with which sprites may be positioned on screen.

Moving sprites on a custom grid size requires translating logical grid coordinates to Scratch screen coordinates.

The translation operation must consider the following:

1. The size in pixels of each square of the grid.
2. The Scratch screen’s origin is its center.
3. The origin of Scratch sprites are their center.
4. The logical grid for Snake uses the top left as its origin (0,0).

Each sprite that is positioned on the custom snake grid has a function called Move To Grid Pos which moves the sprite to a screen position specified by a snake grid coordinate.

Next Section: Moving the Snake at Regular Intervals

Table of Contents