Beginning Unity 3D for iOS: Part 3/3

This is a post by Tutorial Team Member Christine Abernathy, an Engineer on the Developer Advocacy team at Facebook. You can also find her on Google+.

Welcome to the third and final part the Beginning Unity 3D for iOS tutorial series!

In the first part of this series, you toured the basic Unity tools, created a game with a simple player control mechanism and learned how to deploy your project on iOS.

Then in the second part of the series, you enhanced the movement of your Heroic Cube and brought some life to the world it occupies with sky, grass, trees and a variable terrain.

In this third and final part, you’ll add gameplay to the project. Instead of simply moving around the scene, your Heroic Cube will have to dash (as cubes do) to a finish line within a certain amount of time.

To give the player a challenge, obstacles will rain down on the Cube as it zigs and zags its way to that finish line. A countdown timer will add to the drama. Success will be greeted with cheers – failure with the deafening silence of defeat. :]

You’re almost to the finish line too, so remember – it’s hip to be square!

Getting Started: The End in Sight!

First, save the Level_2 scene as a new scene named Level_3. You’ll be making all your changes for Part 3 of the tutorial in this new scene.

You’ll create a finish line using two posts and a thick line connecting them, so that the player can clearly see the target destination. The finish line will include an invisible wall that’s used as a trigger when the Heroic Cube crosses the finish line.

Select GameObject\Create Empty to create a new object that represents the finish line. This is the parent GameObject under which you’ll add posts, a line, and a wall.

Rename the object to Finish Line via the Inspector panel or by right-clicking the object and selecting Rename. Set the Transform Position to 0,0,0.

To create the first post, select GameObject\Create Other\Cylinder. Rename it to Post1. Set the Transform Scale to 1,3,1. Set the Transform Position to -10,0,20 to put it in front of the player and to the left. Using the Move Tool, adjust the y position so that the bottom of the cylinder object is just a little below the ground.

Hint: View the scene from the z-axis to help you make the adjustments.

Drag the Post1 GameObject and place it under the Finish Line GameObject to set the latter as the parent for Post1.

To create a second post, select Post1, right-click and select Copy. Right-click once more and select Paste. Rename the new GameObject from Post1 to Post2. Using the Move Tool, adjust the x position so that the post is to the right of the player.

Hint: View the scene from the y-axis (from above) to help you make adjustments. Alternatively, setting the Transform x position to 10 should do the trick.

Next, create the wall that helps you detect when the finish line is crossed. Select GameObject\Create Other\Cube and rename it to Goal. Set the Transform Scale to 24,10,0.5. Set the initial Transform Position to 0,2,0.

Move the wall to just behind the two posts. If you need to, adjust the x scale value so the wall stretches from one post to the other.

With the wall still selected, open the Inspector\Box Collider component and check the Is Trigger value. Uncheck the Mesh Renderer component to make the wall invisible.

Drag the Goal GameObject and place it under the Finish Line GameObject to parent the object.

Connect the Dots

Next you’ll create the line connecting the posts so that the player can clearly see the finish line. You’ll do this by drawing a line from one post to the other via script.

Select Asset\Create\JavaScript to create the new script and name it FinishLineRender. Open the script by double-clicking it in the Project View. Delete the stubbed out functions and add the following code:

// The finish line posts
var post1 : Transform;
var post2 : Transform;

var lineColor : Color = Color.green;

function Start () {
    // Set the visual for the finish line posts
    var lineRenderer : LineRenderer = gameObject.AddComponent(LineRenderer);
    lineRenderer.SetPosition(0, post1.position);
    lineRenderer.SetPosition(1, post2.position);
    lineRenderer.material = new Material (Shader.Find("Particles/Additive"));
    lineRenderer.SetColors(lineColor, lineColor);
}

The LineRenderer class allows you to draw lines in 3D space. Given an array of points, you can use the Line Renderer component (Components\Effects\Line Renderer) to draw straight lines.

You could have added the Line Renderer component to the Finish Line object and hard-coded the transform positions for Post1 and Post2, but it’s easier to create the Line Renderer through code. That’s what you’re doing here.

You draw the line in the Start() function, as it only needs to happen once. First you add the LineRenderer script interface component, then you set the first and second points for the line to the values from the variable inputs that will be tied to the two posts. You set the material for the renderer.

Finally, you set the color for the start and end of the line. The line color variable is made public so you can change it.

Attach the FinishLineRender script component to the Finish Line GameObject.

Hint: You can add the script to the GameObject by selecting the Finish Line object and then tapping the Add Component button in the Inspector. This should bring up a search box – simply type the first few letters of the word “FinishLineRender” and it should show you the script.

Assign the Post1 and Post2 GameObjects to the Post 1 and Post 2 variables, respectively.

Preview the game in the Unity Editor. You should see two goal posts and a green line across them indicating the finish line. Stop the game.

Next you’ll create a new script that detects the finish line crossing event, and will attach this new script to the Goal GameObject. To do this, select Assets\Create\JavaScript and name the script FinishLineDetection.

Open the new script and delete the stubbed out functions. Add the following code:

function OnTriggerEnter(other : Collider) {
      
    if (other.gameObject.tag == "Player") 
    { 
        Debug.Log("You made it!!!"); 
    } 
}
@script RequireComponent(Collider)

You call the OnTriggerEnter() function whenever another collider enters the GameObject. The GameObject needs to be set up as a trigger for the event to fire (which you’ve already done for the Goal object).

The player GameObject has a Character Controller component that is a Collider. So when the player runs into the Goal GameObject, the OnTriggerEnter() event is fired.

In your code, you check if the GameObject that entered the Goal has a tag named “Player”. If that’s the case, the Heroic Cube has crossed the finish line.

Attach the FinishLineDetection script to the Goal GameObject.

Hint: With the Goal object selected in the Hierarchy View, you can drag the FinishLineDetection script from the Project View to the Inspector\Add Component button to attach the script component to the GameObject.

Before you tag the player, give the player GameObject a name other than plain old “cube”. To keep things consistent, rename the Cube GameObject to Player.

Now, add a tag to the player object to enable the finish line detection logic. In the Inspector for the player, drop down the Tag selection and choose Player.

Player is one of the pre-built tags available. Later on, you’ll create your own tags to help identify all enemies in the game.

Click Play and move the Heroic Cube past the goal line. You should see a “You made it!!!” log message letting you know that the player crossed the finish line.

Yes, the Heroic Cube can get to the goal line and win the game, but you can’t let it off so easy. You’ll add two levels of complexity to the game: a time-based challenge and obstacles. First, let’s add the obstacles.