Tic-Tac-Toe Tutorial (aka Noughts and Crosses) Q&A

Page with Error: Creating a Tic-Tac-Toe Game Using Only UI Components - Unity Learn

Place on Page: … set the Transition: Highlighted Color to dark blue (55, 66, 77, 255).

Should Be: … set the Transition: Disabled Color to dark blue (55, 66, 77, 255).

Excellent tutorial, thank you for your hard work!

Page with Error: Creating a Tic-Tac-Toe Game Using Only UI Components - Unity Learn

Place on Page*:* Using + click on Windows or + click on the Mac, select only the child Text GameObjects from every Grid Space GameObject.

Should Be: Using Ctrl + click on Windows or Command + click on the Mac…

AND…

Place on Page: buttonList.GetComponentInParent().SetGameControllerReference(this);

Should Be: buttonList.GetComponentInParent****().SetGameControllerReference(this);

Found under bullet: Add code to check each item in the Button List and set the GameController reference in the GridSpace component on the parent GameObject. >> It is correct in the final script review but missing in the walk through.

Hi, I’m having a problem fairly early on - right after adding the first script, I can’t set up all the references. I’m using Version 5.3.5f1, so I don’t know if this is a problem. There’s no space for dragging and dropping the ‘Grid Space’ and ‘Text’ GameObjects under the Button component, only under the script; also no Player Side property. Furthermore, ‘GridSpace’ is unavailable from the function drop-down menu even though I’ve added the GridSpace script under the Button component.

PROBLEM SOLVED - I just needed to Add Component > Scripts > GridSpace and then I was able to continue normally

2 Likes

I am having a similar problem as Ithalendra. I already ran through the tutorial previously with no problems I couldn’t overcome (in an earlier build of unity) but while going through it a second time (using 5.3.5f1) I am now getting stuck.

Problem 1: On Step 4 “Foundation Game Play” i encounter my first issue in the basic script. For some reason my monodevelop throws an error on “button.interactable = false” - ‘Button’ does not contain a definition for ‘interactable’ and no extension method ‘interactable’ accepting a first argument of type ‘Button’ could be found (are you missing a using directive or an assembly reference?)'.

Problem 2: To continue i commented the offending line, and encountered my second issue. When attempting to

  • Select the Grid Space prefab in the Project Window.

  • With the Grid Space prefab selected,

  • … drag the Grid Space prefab onto the Button property

I cannot drag the Grid Space prefab onto the Button property. I can move the Text in to the Button Text field without an issue, but the Button field refuses to update whether I use drag, or select it manually!

@lordstok

Make sure you have correctly defined the button variable as Button type.

public Button button;

Can someone help me? It doesnt wanna check the EndTurn();

public void EndTurn(){

moveCount ++;

if (buttonList [0].text == playerSide && buttonList [1].text == playerSide && buttonList [2].text == playerSide){
GameOver();
}

else if (buttonList [3].text == playerSide && buttonList [4].text == playerSide && buttonList [5].text == playerSide){
GameOver();
}

else if (buttonList [6].text == playerSide && buttonList [7].text == playerSide && buttonList [8].text == playerSide){
GameOver();
}

else if (buttonList [0].text == playerSide && buttonList [3].text == playerSide && buttonList [6].text == playerSide){
GameOver();
}

else if (buttonList [1].text == playerSide && buttonList [4].text == playerSide && buttonList [7].text == playerSide){
GameOver();
}

else if (buttonList [2].text == playerSide && buttonList [5].text == playerSide && buttonList [8].text == playerSide){
GameOver();
}

else if (buttonList [0].text == playerSide && buttonList [4].text == playerSide && buttonList [8].text == playerSide){
GameOver();
}

else if (buttonList [2].text == playerSide && buttonList [4].text == playerSide && buttonList [6].text == playerSide){
GameOver();
}

if (moveCount >= 9){
SetGameOverText(“It’s a draw!”);
}

ChangeSide();
}

I already put all the condition, but it seems like just a couple of them can run … why is it happen?

I’m not sure if it’s my version of Unity or the Maker’s version, but creating a script, and dragging it to OnClick, does not allow me to select the GridSpace script from the function list. I had to Add Componenet → New Script → GridSpace.cs

Great tutorial! I’ve finished it and even added a running score and lines which go through the three winning symbols. If I knew how I would upload my version :slight_smile:

Great tutorial indeed!! I really learned a lot about GUI! I think I also had the double diagonal problem in which the following would return a draw.

xox
oxo
xox

I just fixed it by adding an extra boolean.

Sir,
Please fix my project here is the download Dropbox

2850511–208311–Tic Tac TOE.rar (271 KB)

I would like to know how to turn this game into multiplayer?

1 Like

Hi @Adam-Buckner_1 ,

Nice tutorial! I found a small mistake on this page; there is a line reading:

It’s the second line about the Transition: Highlighted colour and, according to the screen capture, it probably should read:

:slight_smile:

what a great tutorial. exactly what I needed to jump-start my personal project. Thank you! These kinds of write-ups make it easy for me to recommend unity to everyone I meet that is interested in starting out as a developer (gaming or otherwise)

Thank you. This type of feedback is always appreciated! I’m glad you liked it. We’ll try to get you more.

Ah! Good catch. I’ll try to see which one is wrong: the screen cap or the text.

It’s the text. :wink:

I have a problem; I understand what the piece of code below does in game because I see what it does, but, I don’t understand its syntax. Could someone explain it to me, please? Thank you! :slight_smile:

Here is the piece of code:

void ChangeSides ()
    {
        playerSide = (playerSide == "X") ? "O" : "X";
    }

@Adam-Buckner_1

Hi Adam,

Sorry about that but there is another small mistake and this one is present on at least two pages; this one: Creating a Tic-Tac-Toe Game Using Only UI Components - Unity Learn and another one I don’t remember.

You must look for this piece of code:

buttonList[i].GetComponentInParent() ...

As it is, it doesn’t work as GetComponentInParent is not specified (at least it doesn’t for me with 5.5.0f3 Personal). It should read:

buttonList[i].GetComponentInParent <Button> () ...

Thanks for this great tutorial anyway! :slight_smile:

The syntax is: a variable on the left hand side is equal to the value returned from the right hand side based in the comparison done at the start of the right hand side. I. The parentheses there is a true / false comparison. The ? Indicates what type of statement or expression this is, and based on what is returned from the comparison, the value of the variable is set to either on or the other value after the ?. If the comparison returns true, the value of the variable is set to the first value, if it’s false it is set to the value following the :.

Another way to do this is:

if (playerSide == "X") 
{
   playerSide = "O";
}
else
{
   playerSide = "X";
}
1 Like

I’ll take a look when I’m back from holidays! Thanks for spotting these.

1 Like