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

Up?

 

Hello,

Im getting an error on this tutorial. I copied the code from the Tutorial and I followed the steps, though I'm sure I messed up somewhere, just not sure where to step next. Any thoughts?

The big compile error is on this line:

void SetGameControllerReferenceOnButtons ()
{
for (int i = 0; i < buttonList.Length; i++)
{
buttonList.GetComponentInParent<GridSpace>().SetGameControllerReference(this);
}
}

The referenced script on this Behaviour (Game Object 'GridSpace (6)') is missing!

NullReferenceException: Object reference not set to an instance of an object
GameController.SetGameControllerReferenceOnButtons () (at Assets/Scripts/GameController.cs:24)
GameController.Awake () (at Assets/Scripts/GameController.cs:15)

 

@Adam-Buckner I just finished the project; generally speaking it works well but there is a slight problem, not game breaking, still it bugs me: after restarting the game, the grid spaces do not come back to their "normal" colour, they keep the "highlight" colour and I must hover the mouse over each of them so that they get back to their "normal" colour.

 

It would only be as hard as learning how to do AI.

I would suggest http://aigamedev.com/ as a place to start, but you'll have to learn how to make some sort of code that takes the opponent's move. I'm not that familiar with AI. I've only done one simple implementation of minimax (https://en.wikipedia.org/wiki/Minimax). By searching I found this: http://neverstopbuilding.com/minimax which is implemented in a TTT game.

 

Can you please use code tags when posting code on the forums:
http://forum.unity3d.com/threads/using-code-tags-properly.143875/

 

Sadly, I'd suggest that you may have missed a step? They should return to their normal color.

 

Did you set up your references correctly? A NullReferenceException indicates that you are missing a reference. You may want to double check the steps in the tutorial and make sure you have not missed one.

Or the object doesn't exist and it should?

the line: buttonList.GetComponentInParent<GridSpace>().SetGameControllerReference(this); is trying to "Get a component called GridSpace in the parent"... but now that I'm looking at the code more closely...

... are you missing an ?

You're in a "for loop" but not using the value of i which suggests to me that the line is incorrect?

Please check the line and make sure your code it correct.

 

Hi @Adam-Buckner, I found out what it is. I'm following the scripting tutorials here and arrived to the "ternary operator" tutorial: https://unity3d.com/learn/tutorials/topics/scripting/ternary-operator?playlist=17117

I was troubled by the presence of the question mark but it makes sense when you know that it belongs to the first (always boolean?) parameter: "(playerSide == "X") ?".

I haven't found anything on "lambda expressions" here; are they the same as "delegates"?

 

Hi! I got up to the part setting up the function set GridSpace, but when I click on the function drop down list, the function GridSpace isn't there. When I placed the script, only No Function and Monoscript shows. Thank you

 

Very nice tutorial, but one comment I'd like to make recarding the big long line of if statements to check if there's a win condition.

It's a lot cleaner if they are all merged into a single one with an || operator between each set.

Code (csharp):

1.  
2.         if (
3.             (buttonList[0].text == playerSide && buttonList[1].text == playerSide && buttonList[2].text == playerSide)
4.             || (buttonList[3].text == playerSide && buttonList[4].text == playerSide && buttonList[5].text == playerSide)
5.             || (buttonList[6].text == playerSide && buttonList[7].text == playerSide && buttonList[8].text == playerSide)
6.  
7.             || (buttonList[0].text == playerSide && buttonList[3].text == playerSide && buttonList[6].text == playerSide)
8.             || (buttonList[1].text == playerSide && buttonList[4].text == playerSide && buttonList[7].text == playerSide)
9.             || (buttonList[2].text == playerSide && buttonList[5].text == playerSide && buttonList[8].text == playerSide)
10.  
11.             || (buttonList[0].text == playerSide && buttonList[4].text == playerSide && buttonList[8].text == playerSide)
12.             || (buttonList[2].text == playerSide && buttonList[4].text == playerSide && buttonList[6].text == playerSide)
13.             )
14.         {
15.             GameOver(playerSide);
16.         }
17.         else if(moveCount >= 9)
18.         {
19.             GameOver("draw");
20.         }
21.         else
22.             ChangeSides();
23.  

The only real reason for using separate if statements is if you want to do something different for each win type, such as putting a line through the three winning squares.

 

Thanks for the reply! The 'else ifs' work perfectly I just noticed in section 10 it tells you to make this correction in the tutorial, but I was play testing after section 8 so got a little confused with it.

 

Very nice tutorial, but I have the same problem someone mentioned here before. When I press the restart button the GridSpace field backgrounds are reset to their highlighted state if they where pressed before their interactable property was set to false. When the game ends in a winning condition the GridSpace fields that aren't touched do reset to their normal background state.
The response before was that the poster had missed a step, so I went over it all, but I can't find anything I missed, so a hint would be extremely helpful.

As said, a very nice understandable tutorial apart from one paragraph I fail to understand in the part 'Restarting the Game'.

Just after creating the RestartButton there are the following two steps to proceed:

The last sentence, ... assign the Restart Button property to the Restart Button GameObject, seems impossible, at this stage there isn't a public Restart Button GameObject in the GameController yet. That will be created in the next part of this tutorial section, so what am I supposed to do here?

Greets,

Jan

 

It was me. I'm glad to see that I'm not the only one to have this problem.

 

I wonder if this has to do with the Unity version used, I'm trying this with 5.5.1f1 (64bit) personal edition.

Greets,

Jan

 

I noticed that ChilliConnect have added a new tutorial for extending this project in to an asynchronous-style multiplayer game - they have also provided the completed demo project in their GitHub samples repository that you can download and run with the finished code.

 

Hi, we are complete project but where is the computer player add i have problem face on computer player add on project any on have to solve my problem how to add computer player thank you

 

Adding AI is beyond the scope of this tutorial and if not trivial. I'd suggest starting to do research at places like aigamedev.com and learn some of the many algorithms you could use to have the computer choose a move.

 

Cool, thanks for the link!

 

i am new to coding , your tutorial works fine.
What if i want to keep score count for players.
I have added a text added them with the player class
reverenced two UI text XScore and OScore respectively.
i know i am getting a winning player for the game over text

what i want is i want to add a score to the wining player.
i have tried almost everything with the little knowledge i have, i keep on getting errors
could you please help me wright this code? View attachment 234566 View attachment 234566

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5.  
6. [System.Serializable]
7. public class Player
8. {
9.     public Image panel;
10.     public Text text;
11.     public Button button;
12.     public Text score;
13. }
14.  
15. [System.Serializable]
16. public class PlayerColor
17. {
18.     public Color panelColor;
19.     public Color textColor;
20. }
21.  
22.  
23. public class GameController : MonoBehaviour
24. {
25.     public Text[] buttonList;
26.     private string playerSide;
27.     public GameObject gameOverPanel;
28.     public Text gameOverText;
29.     private int moveCount;
30.     public GameObject restartButton;
31.     public Player playerX;
32.     public Player playerO;
33.     public PlayerColor activePlayerColor;
34.     public PlayerColor inactivePlayerColor;
35.     public GameObject startInfo;
36.  
37.  
38.  
39.  
40.     void Awake()
41.     {
42.         SetGameControllerReferenceOnButtons ();
43.         gameOverPanel.SetActive (false);
44.         moveCount = 0;
45.         restartButton.SetActive (false);
46.  
47.  
48.     }
49.  
50.     void SetGameControllerReferenceOnButtons()
51.     {
52.         for (int i = 0; i < buttonList.Length; i++)
53.         {
54.             buttonList [i].GetComponentInParent<GridSpace> ().SetGameControllerReference (this);
55.         }
56.     }
57.  
58.     public void SetStartingSide (string startingSide)
59.     {
60.         playerSide = startingSide;
61.         if (playerSide == "X")
62.         {
63.             SetPlayerColors (playerX, playerO);
64.         }
65.         else
66.         {
67.             SetPlayerColors (playerO, playerX);
68.         }
69.  
70.         StartGame ();
71.     }
72.  
73.     void StartGame()
74.     {
75.         SetBoardInteractable (true);
76.         SetPlayerButtons (false);
77.         startInfo.SetActive (false);
78.  
79.     }
80.      
81.     public string GetPlayerSide()
82.     {
83.         return playerSide;
84.     }
85.  
86.     public void EndTurn()
87.     {
88.         moveCount++;
89.  
90.         if (buttonList [0].text == playerSide && buttonList [1].text == playerSide && buttonList [2].text == playerSide)
91.         {
92.             GameOver (playerSide);
93.         }
94.         else if (buttonList [3].text == playerSide && buttonList [4].text == playerSide && buttonList [5].text == playerSide)
95.         {
96.             GameOver (playerSide);
97.         }
98.         else if (buttonList [6].text == playerSide && buttonList [7].text == playerSide && buttonList [8].text == playerSide)
99.         {
100.             GameOver (playerSide);
101.         }
102.         else if (buttonList [0].text == playerSide && buttonList [3].text == playerSide && buttonList [6].text == playerSide)
103.         {
104.             GameOver (playerSide);
105.         }
106.         else if (buttonList [1].text == playerSide && buttonList [4].text == playerSide && buttonList [7].text == playerSide)
107.         {
108.             GameOver (playerSide);
109.         }
110.         else if (buttonList [2].text == playerSide && buttonList [5].text == playerSide && buttonList [8].text == playerSide)
111.         {
112.             GameOver (playerSide);
113.         }
114.         else if (buttonList [0].text == playerSide && buttonList [4].text == playerSide && buttonList [8].text == playerSide)
115.         {
116.             GameOver (playerSide);
117.         }
118.         else if (buttonList [2].text == playerSide && buttonList [4].text == playerSide && buttonList [6].text == playerSide)
119.         {
120.             GameOver (playerSide);
121.         }
122.         else if (moveCount >= 9)
123.         {
124.             GameOver ("draw");
125.         }
126.         else
127.         {
128.             ChangeSides ();
129.         }
130.     }
131.  
132.     void SetPlayerColors(Player newPlayer, Player oldPlayer)
133.     {
134.         newPlayer.panel.color = activePlayerColor.panelColor;
135.         newPlayer.text.color = activePlayerColor.textColor;
136.         oldPlayer.panel.color = inactivePlayerColor.panelColor;
137.         oldPlayer.text.color = inactivePlayerColor.textColor;
138.     }
139.  
140.     void GameOver(string winningPlayer)
141.     {
142.         SetBoardInteractable (false);
143.  
144.         if (winningPlayer == "draw")
145.         {
146.             SetGameOverText ("It's a Draw");
147.             SetPlayerColorsInactive ();
148.         }
149.         else
150.         {
151.             SetGameOverText (winningPlayer + " Wins!");
152.         }
153.  
154.         restartButton.SetActive (true);
155.     }
156.  
157.     void ChangeSides()
158.     {
159.         playerSide = (playerSide == "X") ? "O" : "X";
160.  
161.         if (playerSide == "X")
162.         {
163.             SetPlayerColors (playerX, playerO);
164.         }
165.         else
166.         {
167.             SetPlayerColors (playerO, playerX);
168.         }
169.     }
170.  
171.     void SetGameOverText (string value)
172.     {
173.         gameOverPanel.SetActive (true);
174.         gameOverText.text = value;
175.     }
176.  
177.     public void RestartGame()
178.     {
179.         moveCount = 0;
180.         gameOverPanel.SetActive (false);
181.         restartButton.SetActive (false);
182.         SetPlayerButtons(true);
183.         SetPlayerColorsInactive ();
184.         startInfo.SetActive (true);
185.  
186.         for (int i = 0; i < buttonList.Length; i++)
187.         {
188.             buttonList [i].text = "";
189.         }
190.  
191.     }
192.  
193.     void SetBoardInteractable(bool toggle)
194.     {
195.         for (int i = 0; i < buttonList.Length; i++)
196.         {
197.             buttonList [i].GetComponentInParent<Button>().interactable = toggle;
198.         }
199.     }
200.  
201.     void SetPlayerButtons(bool toggle)
202.     {
203.         playerX.button.interactable = toggle;
204.         playerO.button.interactable = toggle;
205.     }
206.  
207.     void SetPlayerColorsInactive()
208.     {
209.         playerX.panel.color = inactivePlayerColor.panelColor;
210.         playerX.text.color = inactivePlayerColor.textColor;
211.         playerO.panel.color = inactivePlayerColor.panelColor;
212.         playerO.text.color = inactivePlayerColor.textColor;
213.     }
214. }
215.    

 

It is such a helpful tutorial. By any chance, do you have another tutorial similar to this one?

 

only one action at center gridspace in play mode?

 

We have many tutorials, but I'm not sure what you mean by "similar to this one".

The learn site has many: http://www.unity3d.com/learn

What do you like about this tutorial that you want to see in other lessons?

 

Sorry, but I don't fully understand what you mean.

Can you try saying this another way that I can understand?

 

(coming a few months later...) Hi Jan, regarding the missing restart button property, it's likely a doc bug and not related to the Unity version.

Note for @Adam-Buckner if you have time to fix the tutorial: it is on this page: https://unity3d.com/learn/tutorials/tic-tac-toe/restarting-game?playlist=17111

Nevertheless, this was a great introduction to the not-so-new-now-UI (I am planning to move from good ol' IMGUI for all my GUI needs haha).

As for me, I have used a multidimensional (jagged) array to handle the winning combinations to make the code clearer following my standards:

Code (CSharp):

1. private int[][] winningCombinations = new int[8][] { new int[3] { 0, 1, 2 }, new int[3] { 3, 4, 5 }, new int[3] { 6, 7, 8 }, new int[3] { 0, 3, 6 }, new int[3] { 1, 4, 7 }, new int[3] { 2, 5, 8 }, new int[3] { 0, 4, 8 }, new int[3] { 2, 4, 6 } };
2.  

Code (CSharp):

1. foreach (int[] winningCombination in winningCombinations)
2. {
3.     if (buttonList[winningCombination[0]].text == playerSide && buttonList[winningCombination[1]].text == playerSide && buttonList[winningCombination[2]].text == playerSide)
4.     {
5.         GameOver(playerSide);
6.         return;
7.     }
8. }

 

I have this problem where the Play Again Button goes outside the play area

 

That's very strange.

The first and admittedly generic answer would be "have you rechecked all of your steps against the tutorial?"

The second and more helpful answer would be to check a few things. Is the GameObject holding the Image in the correct place in the hierarchy? ... that is to say? Is the Button properly parented? The next thing to check would be the anchor settings. Is this correct? Lastly, I'd suggest you check the values in the RectTransform.

Does this help?

 

Dakwamine:

Yes, your code is a perfectly acceptable solution.

The solution in the tutorial is one to be very simple and very clear; but I'm sure it can be made more compact and efficient.

Thanks for posting your code, however, so other people can see what you've done.

 

@Dakwamine Did you encounter this same issue? I am having one of our team run through this tutorial to double check, but I would assume that if only 2 or 3 people mention this, it is not a problem with the tutorial. The tutorial was QC'd before publishing. We'll run it again to check. If you can point to the exact lines that are the problem, we can try to fix them sooner.

 

@Adam-Buckner Yes I did encounter this same issue. I will point out what I think is correct.

At some place on this page (https://unity3d.com/learn/tutorials/tic-tac-toe/restarting-game?playlist=17111), it says the following:

But at this point in the tutorial, there is no Restart Button property declared yet. Moreover, this property is not needed yet; its purpose is to be able to set the state of the button to prevent the game restart while playing. This issue is covered in the next paragraphs in which the property is declared in the GameController script:

And that's why a few lines later, after the GameController code block, you have this:

The Game Over Panel property was already defined in the previous page, so it only makes sense to set the Restart Button here, right before the neat screenshot.

 

This should be fixed now.

 

i want to ask a simple question..... how can i change the text for "X" and "O" to sprites??? i have my own images of "X" and "O" and i want to show them instead of just plain text how can i do this ??

 

This will take a little adjustment to your variables and logic. You will need to have an Image Element instead of the Text element, and a variable for each sprite and a blank sprite. In the logic, instead of setting the X or O character in the text property, you set the sprite on Image component. You can start the image component with the blank sprite, but you may need to adjust the "reset" logic to reset the sprites back to the blank sprite.

 

Iv'e had a little size problem with this tutorial. Hopefully you can see it for yourself because i was trying to get it to fit the screen as the positions given where too big!
pls help

 

so sorry if the picture didn't come through as i don't know how to use it that much :3

 

now im having problems with the Font size :/

 

Can you be more explicit? I’m not seeing the problems or understanding where you’re having trouble.

 

Hi, I'm totally new to Unity and I started with this tutorial. Did you provide the source code of the whole project to download and import in Unity anywhere ?

 

Winning conditions are totally wrong!!!

 

I am trying to make the click action work for the UI, and I followed all the directions on the tutorial. For some reason which I am unable to figure out, even after setting up the references in Grid Space prefab and linking the script to the prefab, none of the UI objects on the board seem to perform any action when clicked.

Moreover, the onClick part for each of the button objects is empty even when the Grid Space prefab has everything setup correctly. Am I missing some step here? I think there should be somewhere that I am able to link each of the UI buttons to the prefab or some way to make the UI buttons use the script in the prefab.

 

How do I add a condition for players to meet before their piece is set. I cant seem to find how to define either player in an if statement

Eg.

Code (CSharp):

1.  
2. If(playerX's turn && condition)
3. {
4. Do stuff
5. } else {
6. Do same stuff for playerO
7. }

I've tried about 100 ways. :/ Also, how do you force a refresh visually for the remote player. I make a change on the board when players take a turn in SetSpace(); But the change only gets displayed on the local players side.

Eg
X clicks a square and a number appears along with piece X. It only appears on X side. Player O doesnt see the number appear on their end. Maybe first question will answer.

 

Anyone?

 

La solución mas fácil para solucionar la falla a ganar cuando el contador es igual a 9 es creando una varable booleana para comprobar el estado del juego.

 

There are more conditions than just win/lose. 81 different win combos and conditions on whether a player can place a piece in a certain square based on each square's constant integer value. I have to check this value before a marker is placed. The issue is, I'm using chiliconnect's sdk and I dont see remote updates in realtime in the editor. I guess is there a way to sync the remote play window with the editor so I can see if value are updating behind the scenes

 

Like sudhanshu24 I am having the same problem.
I got up to Lesson 05. Controlling the Game but at the end of this lesson the Click Event on the buttons does nothing.
My Code looks Exactly like your examples on the Lesson 05. Page.
However, When I dubug in VS2017 and set a breakpoint in SetSpace() on this line:
buttonText.text = gameController.GetPlayerSide();
the "gameController" is null. It seems the reference was not correctly created.

I am using Unity 2018.2.7f1 and VS2017 15.8.4

 

I have the same problem as herculessoberholzer . gameController seems to be null.

 

please help ...
in my game the player side "X" and "O" texts not visible.
otherwise all things works fine...
please help me

 

Hey we can also use GameController script as a singleton right? I used it and disabled the SetGameControllerRefecenceOnButtons() and it works

 

Trying to follow the tutorial is a bit confusing on 2019.3 version, specially after "4. Foundation game play" part - i'm not misregretting that tutorials needs to be kept for older Unity versions (like 5.3), but sometimes Unity's interface changes so much that perhaps some tutorials might need to exist available for different Unity versions

Here is an screenshot of the error messages appeared during the tutorial following:

 

(and perhaps all tutorials should have downloadable projects, so we could analyse them when we struggle on following)

 

I originally posted this in my own Q & A topic. Now that I found this, I have feedback of a bug:

I am suddenly experiencing strange errors. See the screenshot. I'm at section 7. Game Over text. All of a sudden, my script is not recognized and game controller doesn't see any of the contents of scrips. What's happening?

UPDATE: I found the cause of the problem:

If you are using 2018.4.8 LTS, go to the gameover function. Update the code to

"Text.text". Do not use gameoverpanel.