Sunday, April 30, 2017

Game Development: Text 101 - Text Based Game With Finite State Machine

This time, I've created a really simple text based game that allow the player to progress state to another state by choosing some options. Some options might take the player to the final state of the story and that's where the game end.

A. What I learnt from this course session are:

1. Importing image assets 

To import an image asset, we just need to drag and drop the image from your directory explorer to the asset panel. And if you're working on a 2D game make sure the texture type is "Sprite (2D and UI)" by selecting the image asset in the asset panel and checking the texture type in the inspector.
Unity Game Development - Checking Texture Type in Inspector Panel

2. Adding GameObject to the scene 

In this game, I'm using game object called UI Text. UI Text is an object to display text in the game. To add UI Text: Open Game Object menu -> UI -> Text
Unity Game Development - Adding UI Text GameObject
Unity Game Development - Adding UI Text to Game Scene

3. Toggle layers

In Unity's Game Scene, there are several layers that you can toggle to be visible/invisible. You can find that toggle in the top right corner of Unity.
Unity Game Development - Toggle Layers

4. Canvas

Canvas is where all the game will be operating in. So if you put GameObject such as Text UI outside canvas, that object won't be visible during game play mode.

5. Interacting with GameObjects in Scene Panel 

In the upper-left of unity you can find some useful tools to interact with game object on the scene. Those tools are Hand (Shortcut Q), Move (Shortcut W), Rotate (Shortcut E), Scale (Shortcut R), and UI tool (shortcut T).

Unity Game Development - Tools to Interact with Game Objects

6. Setting camera background color

The camera uses blue as its default background color. We can change it easily just by selecting the Main Camera object in the Hierarchy and change the background color from the inspector panel. In this case, I changed the background color to be black.

7. Add a new component/script to UI Text object

If you want to give your UI text a behavior you can add a script to your game object. One way to add a script is:

1. Select your game object from Hierarchy (In case of my game, it is a UI Text object).
2. Go to your inspector panel and scroll to the bottom. You will find add component button on the bottom.
Unity Game Development - Add Component/Script to Game Object
3. If you want to use existing script, choose "Scipts". But if you want to create new script, choose "New Script".

8. Properties in a assets class will be accessible trough inspector

In order to access your UI Text in your code, you need to create a property in your class for example:

Then to connect your property to the Game Object, you need to select your UI Text object from Hierarchy and then check your inspector (but before that you need to add script to your game object). From the inspector, you'll find a Text Controller (Script) component, and you can set the Text property to the UI Text object as seen in screen capture below.

Unity Game Development - Connecting Text Property to UI Text Game Object

9. There are two main views in Unity (Scene View and Game View)

As you build your game, you can switch from the Scene View to the Game View to preview how it will look in its platform-specific final build. Learn how to preview and test your game as you work. That makes it really fast and easy to try things out.

What are scenes and Game Objects?
You can think of a scene as a level of your game (but it could also be another element, like a main menu, for example). Game Objects are the environment, cameras, lights, and all the other elements in the scene.


  • To get into the center of game object: go to Hierarchy -> double clicks on the game object and you will see your game object in the scene view
  • We can connect game object to the script by creating a public property in the script and then connect that property with GameObject by simply choosing from the inspector.

B. Developing Text 101

In the game development process itself, we are using what we call the Game Design Document (GDD). GDD is a document that outlines our game and its screens. We also learn about Finite-state machine (FSM). FSM is an abstract machine that can be in exactly one of a finite number of states at any given time. It can change from one state to another in response to external inputs.

Game State Diagram

Unity Game Development - State Diagram 1

Unity Game Development - State Diagram 2
In order to transition between states, player need to press a key represent by the state. For example in the first state diagram, player starts in a "cell" state. If the player press "M" key, the player will go to "mirror" state. In code, each state is represented by enum as shown in snippet of code below.

In Update() method, we handle all currentState of the player and create methods to handle the state transition. You might get an idea by looking at this snippet of code.

These are some screenshots of my game. In first screenshot, you can see when the player in the "cell" state and then transitioning to the second state Mirror by pressing M.

Unity Game Development - Player in First "cell" State

Unity Game Development - Player in Second "mirror" State
If you are interested of making this kind of game please take a look at my Github repo below for a complete code:

You can just clone the code and run it on your local machine. I hope you enjoy reading my writing. Can't wait to share more about my game development journey! Thank you.

Game Development: Adding .gitignore File to Unity Repository

I'm using git as my version control for my unity projects. In my second project, I have problem with vast amount of file changes generated by Unity because I forgot to add the .gitignore to my repository. In this post, I want to describe two ways of adding the correct .gitignore file to you unity project's repository.

1. Via Github Web Interface 

When working with my Number Wizard game project, I created the git repository via Github web interface and I can choose to add .gitignore from the Add gitignore dropdown list.

Unity Game Development - .gitignore via Github web interface

2. Add .gitignore For Existing Project

As I mentioned above, in my Text 101 project, I had a problem that git track all Unity's generated files as changes. Each time I changed something in the game scene, it generated thousands tracked changes by git. Here is my solution to that problem:

1. Find the correct gitignore file from this link. For Unity, I'm using this file.

2. Go to your repository folder/directory and create ".gitignore" file in the root of your repo folder.
In windows you can just create and empty file or in Mac you can use "touch .gitignore". In Linux or Mac based system, ".gitignore" file by default would be hidden. You can use "ls -a" to see your file or you can follow this simple tutorial to show hidden files on Mac.

3. Open your empty ".gitignore" file and paste this content and save the change:

4. Run the following commands on you terminal:

  • git rm -r --cached . 
  • git add . 
  • git commit -m ".gitignore is now working"

Please be aware on the first and second commands there is [dot] character there.

Actually this solution works for any gitignore files do you want to add to your repository. If you find this tutorial useful, please leave a comment bellow. Thank you.

Monday, April 3, 2017

Game Development: Text Based Game "Number Wizard"

The online course I've taken were introducing the feature available in Unity using a very simple text based game. The game was called "Number Wizard".

What I learnt from this game were:

  1. How to change the layout of Unity's panels.
  2. Unity's folder structure.
  3. Unity's scene and objects.
  4. How to print logs into Unity's console using print() method.
  5. Unity's game application flow.
    • We can attach a script to an object.
    • That script inherited MonoBehaviour
    • It has Start() method that will be called once in the beginning
    • There is Update() method that will be called once per frame.
  6. How to get input from keyboard.

While all those points are very obvious and basic, I think it is a good start to get to know them all in the beginning of this journey. So it will be a good foundation for me to go faster later.

About Number Wizard

Number Wizard is a game to guess player's number in mind.
Here is the game play of the game:

  1. Player just need to think about one number between 1-10000.
  2. The game will guess with a number.
  3. The player need to answer whether that guess higher, lower, or equal.
  4. If it is still not equal, the game will guess again until find the number of the player have in mind.

The Game implementation

The player can interact with the game using up arrow (tell the guess is higher), down arrow (tell the guess is lower), or space (tell the guess is equal). The game will end if the player press space key. The complete implementation of player's interaction can be seen in line 29-44.

To find the number, we need to implement binary search by calculating the middle value of min and max bound as you can see in FindMid() method in line 64.

You can see the complete project in this  repository of mine:

Please leave comment and suggestion if you find this post interesting. Thank you :)

Text Editor Tips: Some Useful Brackets Extension

Brackets  is an open source and free-to-use text editor and primarily being used by web developers and designer. I mainly use Brackets for d...