How To Make a 2.5D Game With Unity Tutorial: Part 2

Unity Objects and Components

At this point you already have enough practice with Unity to be introduced to Unity’s game object model. Better understand what you are actually doing, right? Let’s make a really short de-tour to have a look at how game objects relate to the components attached to them.

All those strips we see adding up in the “Inspector” panel – these are components that get attached to the game object. An empty game object has just its transform strip – position, rotation, scale. That’s all – everything else are components attached.

If you look at our BombPrefab – you can see many different components:

• Transform: provides position, rotation, and scale, as described above.
• Mesh Filter: provides the geometry of the visible object.
• Mesh Renderer: renders the geometry.
• Rigidbody: handles physics.
• Audio Source: plays audio.
• Script: can programmatically update the object.

These are just few of the possible components you can attach to an object. To even better understand let’s have a look at this diagram:

So, take the point-of-view of the Script component. It should now be a bit clearer why we had to call:

Destroy(this.gameObject);

in order to destroy everything related to the object instance. From the gameObject property we can also access all other components, so we can adjust physics or audio volume, etc .etc.

Adding more scenes

Right now our game is getting good, but there’s no way to win or lose!

So let’s add a “you win” screen when the player makes more than 3 points.

From the menu choose “New Scene”, then again from the menu “Save Scene”, select the folder [your project’s directory]/Assets/Scenes and save the scene as “WinScene”.

Select “Main Camera” in “Hierarchy” and set: Position [0, 0, 0], Projection to “Orthographic”, Size to “10”, Near to “0.5” and Far to “22”. From the menu choose “GameObject/Create Other/Directional Light” and in the Inspector: Position [0, 0, 0].

All we want in the scene is to put a plane (like the background in our game level) and put an image on it saying “you win”, so let do as before in Part 1: From the menu “GameObject/Create Other/Plane” and in the Inspector: Position [0, 0, 8], Rotation to [90, 180, 0], Scale to [3, 1, 2].

Next download and save to your disc the image prepared by Vicki Wenderlich (click for full resolution):

Drag “gameover_youwin.png” onto “Project” panel in “Textures” folder. After the texture is imported it looks kind of dirty – it’s because of the compression, just select “gameover_youwin” texture in “Project” and then in the “Inspector” find “Format” change it to “16bits” and click “Apply”. Now drag “gameover_youwin” from “Project” panel onto “Plane” in “Hierarchy”. In your “Game” panel you should see the “You win” – where Vicki painted the evil shark floating bely up.

We just need to make it alive – when the scene is tapped the game should restart: Right-click “Project” panel in “Class” folder, choose “Create/C Sharp Script” and rename it to “GameOverClass”. Right-click and choose “Sync MonoDevelop Project”. In MonoDevelop open up the new GameOverClass.cs and replace the contents with this code:

using UnityEngine;
using System.Collections;

public class GameOverClass : MonoBehaviour {
	// Update is called once per frame
	void Update () {
		if (Input.anyKeyDown) {
			PlayerClass.score = 0;
			Application.LoadLevel("LevelScene");
		}
	}
}

When the player taps the screen, the score is reset and gameplay scene is loaded. Application.LoadLevel() just takes the name of the scene to load – pretty easy :)

Back to Unity: drag “GameOverClass” script from “Project” panel “Class” folder onto the “Main Camera”.

Now to include this scene in the project choose “File/Build Settings” and in the popup window click “Add current” button and close the window. You’ve added the scene to the project build.

Let’s quickly add the “You loose” screen too! Like last time, make a “New scene”, then “Save Scene” as “LooseScene” in the Scenes folder.

Select “Main Camera” in “Hierarchy” and set: Position [0, 0, 0], Projection to “Orthographic”, Size to “10”, Near to “0.5” and Far to “22”. From the menu “GameObject/Create Other/Directional Light” and in the Inspector: Position [0, 0, 0]. From the menu “GameObject/Create Other/Plane” and in the Inspector: Position [0, 0, 8], Rotation to [90, 180, 0], Scale to [3, 1, 2].

Download this “You Lose” image and save to your disc (click for full resolution):

To wrap up this scene, take the following steps just like last time:

• Drag “gameover_youlose.png” onto “Project” panel in “Textures” folder.
• Select “gameover_youlose” texture in “Project” and then in the “Inspector” find “Format” change it to “16bits” and click “Apply”.
• Drag “gameover_youlose” from “Project” panel onto “Plane” in “Hierarchy”.
• Drag “GameOverClass” from “Project” panel “Class” folder onto the “Main Camera”.
• From the main menu choose “File/Build Settings” and in the popup window click “Add current” button and close the window.

There – you have 3 scenes, but you need to connect them!

Load the LevelScene scene – by double clicking “LevelScene” in the “Project” panel. Switch to MonoDevelop and open up PlayerClass.cs. We’re going to modify the updateScoreBy method to check whether you made more than 3 points or sank under -3 points.

//replace the updateScoreBy method with this code
public void updateScoreBy(int deltaScore) {
	PlayerClass.score += deltaScore;	
	if (PlayerClass.score>3) {
		Application.LoadLevel("WinScene");
	} else if (PlayerClass.score<-3) {
		Application.LoadLevel("LooseScene");
	}
}

Now your scene workflow is set. You can give the game a try by hitting Play in Unity. Actually - why don't you hit "File/Build&Run", and when Xcode pops up - hit "Run" there as well and give the game a try on your iPhone?

Going 2.5D - at last!

Yes - it's time. The epic technique you've been expecting for 2 long parts of this tutorial series - 2.5D!

And I'll tell you in advance a secret - we're going to spice it up and make it almost 3D for your developing pleasure!

Up to now we've been setting the cameras' projection to "Orthographic", which made the scene look like a plain 2D game - well, that ends here!

In your LevelScene scene select "Main Camera" and in the Inspector change Projection to "Perspective" and "Field of View" to "100" (to compensate for the perspective). That's it - hit the Play button and see your game in 2.5D! Ain't that cool?

But we're not going to stop here.

Here's the plan - to make the game more difficult and demonstrate how to rotate and move the camera, every time the score increases we'll move the camera onto an arc path and change it's angle. This way, the more you progress in the game the weirder the angle you'll have to look at the characters and try to bomb the sharks!

Switch to MonoDevelop and make the following changes to PlayerClass.cs:

//add the properties
public GameObject mainCamera;
public GameObject gameBackground;
public float nextZ = 0;

//at the end of the updateScoreBy method
if (PlayerClass.score>0) {
	nextZ = PlayerClass.score*2.5f;
}

//at the end of the Update method
if (nextZ > mainCamera.transform.position.z) {
	mainCamera.gameObject.transform.Translate( 
		3* Mathf.Sin(transform.position.z/2 ) * Time.deltaTime, 
		0, 
		-Mathf.Sin(transform.position.z /2 ) * Time.deltaTime *0.3f
	);
	mainCamera.gameObject.transform.RotateAroundLocal( Vector3.up, Time.deltaTime*0.1f );
	gameBackground.gameObject.transform.RotateAroundLocal( Vector3.up, Time.deltaTime*0.1f );
}

Alright - lot of code, but that's about everything we need. Let's go over it bit by bit.

First, we declare properties to hold references to the Main Camera and the Background plane. We'll be moving and rotating the camera, and we will be rotating the background as well.

The Camera is moving from it's current Z position at 0 towards the background to about 7.5Z. So every time the player makes a score, the nextZ is set to 2.5, then 5.0, then 7.5 - and from these values the Main Camera is translated onto something like an arc using a sin function.

All math functions by the way are accessible via the Mathf class - as for the sin is Mathf.Sin(). Also we rotate the camera using transform.RotateAroundLocal and we pass it an axis to rotate around (Vector3.up) and the angle to rotate by. We rotate the camera and the background together, so camera faces always the background (i.e. the background doesn't run out of the screen).

One more thing - let's connect the new public properties. Switch to Unity and select "Player" object in "Hierarchy" panel. Drag "Main Camera" from "Hierarchy" onto the new "Main Camera" property in the "Inspector"; drag the "Background" object from "Hierarchy" onto the new "Game Background" property in the "Inspector".

Congrats, you're finally done! Hit File\Build and Run and run the finished game on your iPhone, and enjoy bombing sharks at weird angles :)