Interaction with the game board

確認済のバージョン: 5.3


難易度: 初級

With our basic game board set up, we now need to find a way for our players to interact with the game. The player needs to be able to click on a grid square and assign their value - either "X" or "O" - to that space.

One of the best ways to get "click" interaction from a user is to use a UI Button. UI Buttons can detect a click and perform an action or set of actions in response to the input. Conveniently, UI Buttons come with a UI Text element attached as a child. An easy and convenient way to display the player's value, either "X" or "O", is to simply add the player's move directly to the attached UI Text element as a text character.

  • Create a UI Button element in the scene by using Create > UI > Button
  • With the Button GameObject selected,
    • ... rename the GameObject "Grid Space".
    • ... reset the RectTransform using the context sensitive gear menu.
    • ... set the Width to 128.
    • ... set the Height to 128.

This will create a button in the center of the game board.


The next step is to set the style of the UI Button element. We will do this by setting the color of the transition elements on the Button component and the color Text component on the child UI Text element.

  • Select the Grid Space GameObject in the hierarchy.
  • With the Grid Space GameObject selected, on the Button component,
    • ... set the Transition: Normal Color to blue (0, 204, 204, 255).
    • ... save this color as a preset before closing the color picker.
    • ... set the Transition: Highlighted Color to light blue (128, 255, 255, 255).
    • ... save this color as a preset.
    • ... set the Transition: Pressed Color to dark blue-green (51, 102, 102, 255).
    • ... save this color as a preset.
    • ... set the Transition: Disabled Color to dark blue (55, 66, 77, 255).
    • ... save this color as a preset.

The Button component should now look like this:


In the Hierarchy Window, we will need to "Open" the Grid Space GameObject in the Hierarchy Window to reveal the child UI Text element by using the turn down arrow. Once we have the Text GameObject selected, we can set the properties for displaying the text on the screen.


  • Reveal and Select the Text GameObject that is the child of Grid Space.
  • With the Text GameObject selected,
    • ... temporarily set the Text property on the Text component to capital "X".
    • ... set the Font Size to 111.
    • ... set the Color to pink (255, 0, 102, 255) by using the preset.

This will set up our basic UI Button.


We can now save it as a prefab.

  • Create a new folder in the Project Window.
  • Rename this folder "Prefabs".
  • Select the Grid Space GameObject in the Hierarchy Window and drag it into the Prefabs" folder in the Project Window to create a new Prefab.


For more information on Prefabs, how to create them and how to use them, please see the information linked below.

We now have our Grid Space button prefab. We need to duplicate this button eight times, for a total of nine buttons. These will be placed around the game board in a grid formation. We will be comparing these buttons to each other later on in this lesson when we check for a win condition, so keeping track of which button is in what position is imperative. When the buttons are duplicated, Unity will create a unique name by adding a number to the end of the GameObject’s name. We will use these numbers to keep track of the buttons and their order.

  • In the Hierarchy Window, select the Grid Space GameObject and duplicate it 8 times.

This should give us nine UI Buttons.


We need to place these new Button prefabs regularly onto the game board in a way that we can easily test our win condition. For the code we are using later in this lesson, the order of the buttons needs to be in rows, from left to right then top to bottom, starting at the top left:


There are two easy ways to move these buttons into place. One is by setting the values directly into the UI Button’s RectTransform. The other is to drag the buttons in the Scene View and use the placement and snapping functions to align the buttons.

With a game board that is 512 by 512 pixels and divided into 3 equal segments, the buttons need to be placed at a location using some form of 170 pixels to be placed evenly, as 512/3 is 170.66. For this lesson, we will ignore the decimal values.

To show, for example, how to set the position of a button by using the button’s RectTransform directly:

  • Select the Grid Space GameObject.
  • With the Grid Space GameObject selected,
    • ... set the Position X to -170
    • ... set the Position Y to 170

In the Scene View, note the alignment tools and how they indicate the current offset of the UI element in the scene, even when manipulating an element using its RectTransform values.


As an example of moving and aligning a UI element in the Scene View:

  • Select the Grid Space (1) GameObject in the Hierarchy.


This will select the Grid Space (1) GameObject in the Scene View.


  • With the Grid Space (1) GameObject selected,
    • ... drag the Grid Space (1) GameObject up in the Scene View and try to align it with the Grid Space GameObject.


Note how the alignment tools will not only snap to both the Grid Space GameObject and the rest of the Grid Space (n) GameObjects, but will also show the offset values and alignment gizmos to nearby UI elements.

Now, by selecting each button in order, lay out the game board with one button per grid space according to the following diagram:


If unclear about the alignment, use the alignment tools or the button’s RectTransform, and make sure that the Position X and Position Y are either at -170, 0, or 170.


Now that all of the buttons are laid out, we don’t really need the "X" on the buttons. This was simply to help us know what the relationship of the Text property would be to the parent UI Button

  • Select the Text GameObject child of the Grid Space prefab in the Project Window.
  • With the child Text prefab selected,
    • ... delete the "X" from the Text components Text property, leaving it empty.

The final game board should look like this:


In the next lesson we will set up the foundation game-play functionality which we will build upon in later lessons.