create your own web page


Phoenix Dynasty Studio
凤皇朝工作室

Game Development with Unity
Tic Tac Toe

Mobirise

Project Name : Tic Tac Toe

Project Development Start Date : 25-April-2020
Project Development End Date : 13-June-2020

Game Type : Board Game
Estimated Hours: 20 hours

Project Progress

Idea & Design

%

Development

%

Testing

%

Deployment

%

Project Difficulty

20%

Graphic

60%

Scripting

30%

Technique

60%

Controlling



“Every great dream begins with a dreamer. Always remember, you have within you the strength, the patience, and the passion to reach for the stars to change the world.”

– Harriet Tubman -

Mobirise

Game Development Platform

All of our games are made with Unity.

Unity is a multi-platform comprehensive game development tool developed by Unity Technologies that allows players to easily create interactive content such as video games, real-time animations, etc. It is a fully integrated professional game engine. Unity editor runs under Windows and Mac OS X, and can publish applications to more than 20 platforms such as Windows, Mac, Iphone, Web, Andriod.

To get started, you may download the free version of Unity with below link.


Project Overview & Design

Build a Tic Tac Toe game with Unity UI toolset and some simple scripts. Tic Tac Toe (also known as noughts and crosses) is a game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.
  1. Create Project and Main Menu scene and Game Instructions - A Main Menu scene that have 2 buttons, one is to display simple game instructions, another one will bring player to Board Game scene. 
  2. Game background and game board - The board game have to break into 9 equal grids. Player can assign 'X' or 'O' to the grid. Once player assigned the grid, it will disabled and no changes can be make to the grid.
  3. Game control logic - Build a logic to auto change side and check game result. Capable to check if game have winner or a draw.
  4. Game Result Display Panel - Build a panel to indicate which player turn, display game status on which side is the winner or draw.
  5. Restart Game Button - Build a Restart button or click on the game board to restart the game anytime.
  6. Player Score Board - Build a Panel Text to count each side win count. Score will auto reset after Return to Main Menu.
  7. Return to Main Menu Button - Build a Return to Main Menu button that will end the game and return Player to Main Menu. 
  8. Intelligent Computer Player logic - Build a computer control logic that will auto assign relevant move.  If Player do not choose side and direct click on the board, it will auto assign 'X' on the grid at the beginning. If Player choose to be 'O' side, Computer will take the first step to random assign 'X' on the grid. 



Chapter Lists



Chapter 1.
Create Project

Create new Unity 2D Project

  • Open Unity and create project with name Tic Tac Toe
  • Choose project directory
  • Select on 2D project type
  • Then click CREATE project
Mobirise



Chapter 2.
Main Menu Scene & Game Instructions

To start development we need to create scene for our game.

When the game first launch, it will open Main Menu page which will provide player some game introduction. When player ready, they will click on Start Game button to go to another scene, Board Game scene. 

Below the Main Menu page design.


Create Main Menu scene

  • In Project window, create a new folder Scenes. In Scene folder create new scene, rename to MainMenu.
  • Under MainMenu scene, create new UI Panel for your background, Create > UI > Panel. Rename it to Background. This will create Canvas and the Event System in the scene. You may import background image or use background color. 
  • Select on Background UI panel, set the background color to black. Set Width to 700 and Height to 750.


Create Game Title

  • Now create UI Text, Create > UI > Text, rename it to Title
  • Set the Width to 600, Height to 120. Pos X to 0 and Pos Y to 250. Set the Text property to TIC TAC TOE. Font size to 116. Font size to Bold. Change Color property to orange (231, 95, 25, 255). Align the text to center/middle.
  • Select the Anchors, hold down the shift and alt keys and select middle/center. This will change anchors, pivot and position to the middle and center of the parent Canvas.


Create Introduction Button

  • Now create a new UI Button, Create > UI > Button, for Introduction, rename it to Introduction.
  • Click on Introduction button GameObject, set width to 260, height to 110, Pos X to 0, Pos Y to 20. Set the Anchor, Pivot and Position to stretch Center/Middle. On Button Normal Color set it to light blue (111,212,229,225) and set Highlighted Color to light purple (230,152,225,225)
  • Then click on Introduction button text, set width to 250, height to 110, Pos X to 0, Pos Y to 0. Set the Anchor, Pivot and Position to stretch Center/Middle. Set the text property to Introduction 游戏介绍. Font size to 30, Font style to Bold, align to Center/Middle.


  • Now duplicate the previous created Introduction UI Button to another UI Button, rename it to StartGame.
  • Click on StartGame button GameObject, set width to 260, height to 110, Pos X to 0, Pos Y to -120. Set the Anchor, Pivot and Position to stretch Center/Middle. On Button Normal Color set it to light blue (111,212,229,225) and set Highlighted Color to light purple (230,152,225,225)
  • Then click on StartGame button text, set width to 250, height to 100, Pos X to 0, Pos Y to 0. Set the Anchor, Pivot and Position to stretch Center/Middle. Set the text property to START GAME 游戏开始. Font size to 30, Font style to Bold, align to Center/Middle.