Creating the game board

Revisado con versión: 5.3


Dificultad: Principiante

We need to create the background, create the game board and then break up the game board into 9 uniform spaces with a grid overlay.

As we will be using the built-in UI toolset for this, the first thing we need to create is a UI Panel.

  • Create a new UI Panel element in the scene by using Create > UI > Panel.


This will create a new UI Panel, parent Canvas and EventSystem in the scene.


The Canvas and the Event System are required by the UI toolset.

For more information on the UI toolset, including the UI Panel, parent Canvas and Event System, please see the lessons on the UI toolset linked below.

With the Scene View active, Frame Selected on the Panel element. We will see that this Panel element is stretched to fill the parent Canvas which in turn fills the Game screen. We can tell the panel is stretched by looking at the anchors. These are the four small triangles at the corners of the image linked below.

For more information on anchors and stretching, please see the lessons on the UI linked below.


This Panel will be our Background, which we will set to black. We want the Background to always fill the screen, so we will preserve its stretching behaviour. We will need to set it’s color and opacity, however. We can do this by changing the properties on the various components that define this specific GameObject.

  • Select the Panel GameObject.


  • With the Panel GameObject selected...
    • ... rename the GameObject to "Background".
    • ... set the Image component’s Color property to black with 100% opacity.


We should now have a solid black background that covers the entire Game View and will stretch to fill whatever size our Game View window happens to be.

Next we will create our game board.

To do this, we will create another panel and set its properties as well. We don’t want the game board Panel to stretch with the parent Canvas. We want the Panel to stand alone inside the parent Canvas. We will also want to set the color and opacity of the panel so that it looks like a proper game board.

To set up the game board:

  • Create a new UI Panel element in the scene by using Create > UI > Panel

This panel will again stretch to fill the Canvas.

  • With the new Panel selected,
    • ... rename the GameObject "Board".
    • ... select the Anchors and Presets menu:


This will open the Anchors and Presets panel.

  • With the Panel’s Anchors and Presets menu open,
    • ... hold down the shift and alt keys and...
    • ... select middle/center.


This should change the anchors, pivot and position to the middle and center of the parent Canvas. We can tell this by looking at the 4 small triangles that define the anchors. With Background we can see that they are positioned at the four corners of the parent Canvas (see Images above). With the Board we can see that the anchors are positioned in the middle of the parent Canvas.


It is worth noting that holding the shift key sets the pivot location and holding the alt sets the position of the UI element, so by holding both keys, we not only change the anchoring, but reset the pivot and position as well, so the Panel is guaranteed to be in the middle and center of the parent Canvas.

To make this look more like a board, we will need to affect the size and color of the panel.

  • Select the Board GameObject.
  • With the Board GameObject selected,
    • ... set the RectTransform’s Width property to 512.
    • ... set the RectTransform’s Height property to 512.
    • ... set the Image component’s Color property to a very dark blue (33, 44, 55, 255).

This is a dark grey with a blue hint and has 100% opacity. Once this color has been chosen, but before closing the Color Picker, save this color as a preset by clicking the preset button in the bottom left of the Color Picker. We will be reusing this color, so it’s easier to save the color as a preset rather than recreating it each time.


The Game View should now show our Board on our black Background:


The next step is to divide the game board into a grid with nine spaces. We will also be using UI Panel elements for this, but we will be creating very thin versions of a panel.

At this point it’s worth noting the construction of the UI Panel.

The UI Panel is a pre-made UI element. It consists of a RectTransform component, a Canvas Renderer component and an Image component. The RectTransform defines where the UI element is in the scene, the Image component holds the details about what the graphical elements are that need to be drawn and these are drawn by the Canvas Renderer at the location in the scene defined by the RectTransform.

If we were to temporarily create a UI Image element, we would see the base construction if the UI Image is identical to that of the UI Panel. Both have a RectTransform, Canvas Renderer and Image component. What is different between the UI Panel and the UI Image are the details of their properties. Each have different default values for their RectTransform’s Anchors and Pivots and Size properties, and for their Image’s Source Image. The UI Panel is stretched, the UI Image is not. The UI Image has a defined size of (100, 100). The UI Panel has a preset Source Image and the UI Image has none. The UI Panel is preset as a stretchable panel, whereas the UI Image is preset for a static graphical image.

What this means to us is we can use either as we see fit for whatever purpose we want. UI Panels are not necessarily for use only to hold other items. They can be used simply as graphical elements. For the following steps, we could use a UI Image element, but then we would have to add Background sprite to the Image component’s Source Image property in the very least, so we will be using the UI Panel in this case during the lesson.

If a temporary UI Image was created, please delete it.

To create our "Grid":

  • Create a new UI Panel element in the scene by using Create > UI > Panel
  • With the Panel GameObject selected,
    • ... rename the GameObject "Grid".
    • ... set the Anchor, Pivot and Position to middle/center.
    • ... set the Width to 5.
    • ... set the Height to 512.
    • ... set the Position X to -85.33.
    • ... set the Color to pink (255, 0, 102, 255).
    • ... save this color as a preset.

How did we get the magic number -85.33 for the Position X value? This is simply done with basic math. The board is 512 pixels by 512 pixels. If we were to simply divide 512 by 3 we would get a number around 170 (we will see this number again soon). However, when it comes to positioning in either scene or screen space, the world starts at an origin point and the value of positions move away from that point, positive in one direction and negative in the other. The game board is in the center of the screen with a Position X of 0 at its center, and the Position X of -256 and 256 on each of the corners. We want the grid line 1/3 of the way from 0 to 256, or 256 divided by 3, which equals 85.33!


Now, there is a shortcut available in Unity. We can simply type the math directly into the field we want to set, in this case -256/3. We could also use 512/-2/3.


We should now have a single dividing grid line:


To make the rest of the grid lines, we will duplicate and reposition this element.

  • Duplicate the Grid GameObject.
  • With the Grid (1) GameObject selected,
    • ... set the Position X to 85.33.
    • ... Duplicate this GameObject.
  • With the Grid (2) GameObject selected,
    • ... set the Position X to 0.
    • ... set the Position Y to 85.33.
    • ... set the Width to 512.
    • ... set the Height to 5.
    • ... Duplicate this GameObject.
  • With the Grid (3) GameObject selected,
    • ... set the Position Y to -85.33.

We should now have our classic game grid:


In the next lesson we will set up the core interaction with game board and grid spaces.