TicTacToe Game: Making the Designs


This article will talk about the Game & Media Design of a TicTacToe:

Source Location:

Before develop (coding) a game, it is necessary to prepare the design first; If we doesn’t do the design work well, it may cause blockers during the implementation stage; Although we cannot design everything perfectly, but the more we prepare, the more efficiency during the production;

This is the checklist about what are the things going to prepare:

  • Game Design
    • Game Genre: The type of game belong to;
    • Game Mechanic: How to play the game;
    • Game Flow: How to start;
  • Media Design
    • Theme
    • Concept Art or Mock Screen
    • Game Assets (Graphics and Sound needed)

Game Design

Game Genre:

Game Genre of this tactactoe game is a pvp, turn based, board game;

A good genre can tell the team that we are going to develop, this can help to find relevant references such as relevant game engine, reference ui flow, …

Game Mechanic:

Game Mechanic should tell:

  • How player control the game;
  • How computer will react;
  • The definition of WIN, LOSE, and DRAW;

For our game,

  • Control: Every player take turn place a mark in one of grid in board
  • Win/Lose condition: If one player make three mark connects, it win;
  • Draw condition: No one connect a line when the board grid is full;

Game Flow:

Game flow should define how to the game flow, sometimes we call it wireframe;
For our game, see the diagram below:
Screen Shot 2015-02-10 at 4.26.17 pm

Media Design


Theme of a game is about color tone, color palette, mood, style of the game you made;

For example:

List of item should include in the theme

  • Color Palette
  • Type face (Font)
  • Screen Orientation and Resolution
  • UI Elements & Icons


Mockup is required to make telling the layout of the game; Also this can give the coders some ideas about what is going to be made.

Our example:

tictactoe mockup

Game Assets

When the mockup of the screen are confirmed, we can prepare the list of media files to be made;
For graphics: try to use png or jpg;
For audio: please use mp3;

For our game, these are what we need:

  • Graphics:
    • button-normal.png : button background when normal
    • button-hili.png : button background when highlighted
    • icon-x.png : The mark of player “X”
    • icon-o.png : The mark of player “O”
  • Sound:
    • click.mp3 : When player placed a mark
    • win.mp3 : When game is win by one of the player
    • draw.mp3 : When game is drawn


The design works listed in this article are just for a simple game; For more complicated games, there are more design works need to be prepared. What to do next is start design the program architecture and then coding the detail;

One thought on “TicTacToe Game: Making the Designs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s