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 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:

	using System.Collections;
	using UnityEngine.UI;
	using System.Collections.Generic;
	using UnityEngine;
	public class TextController : MonoBehaviour {
	public Text text;
	// Use this for initialization
	void Start () {
	}
	// Update is called once per frame
	void Update () {
	}
	}

view raw TextController.cs hosted with ❤ by GitHub

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.

Tips:

• 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.

	private enum GameStates
	{
	cell,
	sheets_0,
	mirror,
	lock_0,
	cell_mirror,
	sheets_1,
	lock_1,
	freedom,
	corridor_0,
	stairs_0,
	stairs_1,
	stairs_2,
	courtyard,
	floor,
	corridor_1,
	corridor_2,
	corridor_3,
	closet_door,
	in_closet
	};

view raw GameStates.cs hosted with ❤ by GitHub

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.

	// Update is called once per frame
	void Update () {
	print (currentState);
	if (currentState == GameStates.cell) {cell();}
	else if (currentState == GameStates.sheets_0) {sheets_0();}
	else if (currentState == GameStates.sheets_1) {sheets_1();}
	else if (currentState == GameStates.lock_0) {lock_0();}
	else if (currentState == GameStates.lock_1) {lock_1();}
	else if (currentState == GameStates.mirror) {mirror();}
	else if (currentState == GameStates.cell_mirror) {cell_mirror();}
	else if (currentState == GameStates.corridor_0) {corridor_0();}
	else if (currentState == GameStates.stairs_0) {stairs_0();}
	else if (currentState == GameStates.stairs_1) {stairs_1();}
	else if (currentState == GameStates.stairs_2) {stairs_2();}
	else if (currentState == GameStates.courtyard) {courtyard();}
	else if (currentState == GameStates.floor) {floor();}
	else if (currentState == GameStates.corridor_1) {corridor_1();}
	else if (currentState == GameStates.corridor_2) {corridor_2();}
	else if (currentState == GameStates.corridor_3) {corridor_3();}
	else if (currentState == GameStates.closet_door) {closet_door();}
	else if (currentState == GameStates.in_closet) {in_closet();}
	}
	void in_closet() {
	text.text = "Inside the closet you see a cleaner's uniform that looks about your size! " +
	"Seems like your day is looking-up.\n\n" +
	"Press D to Dress up, or R to Return to the corridor";
	if (Input.GetKeyDown(KeyCode.R)) { currentState = GameStates.corridor_2;}
	else if (Input.GetKeyDown(KeyCode.D)) { currentState = GameStates.corridor_3;}
	}
	void closet_door() {
	text.text = "You are looking at a closet door, unfortunately it's locked. " +
	"Maybe you could find something around to help enourage it open?\n\n" +
	"Press R to Return to the corridor";
	if (Input.GetKeyDown(KeyCode.R)) { currentState = GameStates.corridor_0;}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

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:
https://github.com/ibanezang/text101

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:

	/[Ll]ibrary/
	/[Tt]emp/
	/[Oo]bj/
	/[Bb]uild/
	/[Bb]uilds/
	/Assets/AssetStoreTools*
	# Visual Studio 2015 cache directory
	/.vs/
	# Autogenerated VS/MD/Consulo solution and project files
	ExportedObj/
	.consulo/
	*.csproj
	*.unityproj
	*.sln
	*.suo
	*.tmp
	*.user
	*.userprefs
	*.pidb
	*.booproj
	*.svd
	*.pdb
	# Unity3D generated meta files
	*.pidb.meta
	# Unity3D Generated File On Crash Reports
	sysinfo.txt
	# Builds
	*.apk
	*.unitypackage

view raw .gitignore hosted with ❤ by GitHub

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.

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.

	using UnityEngine;
	public class NumberWizards : MonoBehaviour {
	const int MaxNumber = 10000;
	const int MinNumber = 0;
	int maxNumber;
	int minNumber;
	int guessedNumber;
	// Use this for initialization
	void Start () {
	StartGame();
	}
	private void StartGame()
	{
	maxNumber = MaxNumber + 1; // plus one to handle max number as guessed number.
	minNumber = MinNumber;
	print("Welcome to NumberWizard!");
	print("Please choose a number but don't tell me! I can guess it for you");
	print("You can only choose between " + MinNumber + " to " + MaxNumber);
	PrintGuess();
	}
	// Update is called once per frame
	void Update () {
	if (Input.GetKeyDown(KeyCode.UpArrow))
	{
	Higher();
	PrintGuess();
	}
	else if (Input.GetKeyDown(KeyCode.DownArrow))
	{
	Lower();
	PrintGuess();
	}
	else if (Input.GetKeyDown(KeyCode.Space))
	{
	print("Thanks for playing!");
	}
	}
	private void Lower()
	{
	maxNumber = guessedNumber;
	}
	private void Higher()
	{
	minNumber = guessedNumber;
	}
	private void PrintGuess()
	{
	guessedNumber = FindMid(minNumber, maxNumber);
	print(string.Format("Is the number lower or higher than {0}?", guessedNumber));
	print("Up = higher, Down = lower, Space = equal");
	}
	private int FindMid(int min, int max)
	{
	return (min + max) / 2;
	}
	}

view raw NumberWizard.cs hosted with ❤ by GitHub

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:
https://github.com/ibanezang/NumberWizardGames

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