How to Create a Tetris Grid

In the previous blog post we introduced our free Tetris clone and talked about how to find and import game assets. I also created a free enhanced Tetris starter pack that gives you most of the game assets you will need to get your game started.

In this blog post and video, you are going to learn how to create a Tetris grid that will allow you to easily and seamlessly place and move your Tetris pieces.

In this entry, we are going to take the first steps towards creating our Tetris clone, which means creating a game grid. Ultimately, we want to create something that looks like this:

The idea here is that we have a 10 x 22 Tetris grid. The Tetris pieces will have a pivot point in the bottom left corner. That means we want to get our game to a point where if we set both the X and Y coordinates of any given Tetris piece, they will appear in the bottom-left corner of the grid. Setting it to 9 and 21 would put the bottom-left corner in the upper-right most square. Remember, Unity starts counting at 0. So this means a 10 x 22 grid will be counted as 0-9 and 0-21.

Also, for this game we will be using a 1440 x 2560 game size, which is the same screen size as the Samsung Galaxy S7

The first step is to make sure our Tetris pieces are exactly 1 Unity world unit in both width and height. If you’re using the pack I provided, you’ll find that they import at a size that’s too small. In order to fix this, you will have to set their pixels per unit to 43.

Next, you will want to make sure the Tetris pieces are set to “multiple” and that you have sliced them with an automatic setting and changed their pivot point to “bottom-left.” This can be done by clicking the “Sprite Editor” button on the Tetris pieces inspector view.

Once this has been done, test that it’s working by dragging and dropping one of the Tetris pieces into the game scene and changing it’s X and Y position a rounded whole number. If the piece matches up to the Unity grid, it’s working properly. Now we can create a visual grid that will allow us to actually see how our pieces line-up.

Now that the Tetris pieces are in place, it’s time to create a grid system. The goal here is to create a grid that perfectly matches one Unity world unit for each grid block, in both length and height. In order to do this, we need to create a raw image. You can do this by clicking “GameObject” in the top window and then adding it from under UI –> Raw Image. Make sure you don’t choose just “image” or else this won’t work.

Once you have a raw image added to the scene, rename it “Grid” and attach one of the grid pieces from my enhanced starter pack. If you are unable to drag and drop the grid object onto the Raw Image, make sure you have changed the grid’s texture type to “Default” first. While you’re at it, make sure its wrap mode is set to “Repeat.” See the screenshot below for a visual.

Now… it’s time to get a bit mathematical.

If you think about the way an actual Tetris game is laid out, you will realize there is room on either side of the screen for UI elements. Because of this, we want our game’s play space to be roughly 70% of the actual screen size. That means we want our Tetris grid’s end result by the end of this article to look something like this:

In the above screenshot, you can see that the Tetris grid takes up 70% of the screen, leaving plenty of room on all sides for UI elements. How do we achieve this mathematically?

If you recall, our game’s screen size is set for 1440 x 2560 pixels. If we multiply these numbers by 70% (0.7) we get 1008 x 1792. This is what we will set our grid’s Rect Transform to be. We also want it’s Pos X, Pos Y and Pos Z to be set as 0. We will also set the UV Rect settings to W: 10 and H: 22, ensuring the grid sprite’s wrap mode is set to “Repeat.” The inspector for the grid should look like this:

Next, we will set the grid’s Canvas to be a “World Space” canvas, which allows us to manually manipulate it’s size.  However, with a default scale of 1, the canvas is HUGE. We will need to use a multiplier to scale it’s width and height appropriately. We can get this multiplier by dividing the number of Unity world unit’s desired (10 x 22) by the grid’s size (1008 x 1792). In other words, to get our multiplier, we do the following:

10 / 1008 = 0.00992
22 / 1792 = 0.012276

If we set those decimal numbers to the canvas’s X and Y scale, we should get a canvas with the appropriate size for our game.

Now, all you have to do is is move the canvas over so the bottom-left grid quadrant lines up with (0, 0). To achieve this, simply change the X position of the canvas to “5” and the Y to “11.” If you’ve followed all the other steps correctly, you should wind up with a grid that looks like the one at the start of this post! Also, just increase the size of the camera and change it’s transform to 5 and 11 as well.

Questions? Don’t forget to watch the accompanying video at the top of this post. But feel free to leave a comment below.