Beginning Unity 3D for iOS: Part 2/3

Double the Joysticks, Double the Fun

Lucky for you, Unity’s Standard Assets (Mobile) package includes assets that implement joystick functionality. Select Assets\Import Package\Standard Assets (Mobile) to import the relevant items (as showing below) from the package.

Select the indicated items that relate to joystick functionality. Click Import. When the import is complete, the Project View will contain a new folder called Standard Assets (Mobile). You may see a warning in Unity 4 with the imported joystick script, similar to this (in yellow at the bottom):

To resolve this, double-click on the warning. That should open the Joystick script file. Put your cursor on the line with the warning:

    gameObject.active = false;

Modify the statement to:

    gameObject.SetActive(false);

Now when you switch back to the Unity Editor, the warning should vanish. Take that!

First add the Dual Joysticks prefab to your scene. A prefab is a reusable and often customized GameObject. You can add a prefab to a scene by either dragging it from the Project View or adding it programmatically via a script. For example, you could build a prefab that represents a player and programmatically add multiple players to a scene.

In your Project View, open the Standard Assets (Mobile)\Prefabs folder. Drag the Dual Joysticks prefab into your Hierarchy View.

You can see the joysticks by clicking the Game tab to go to the Game View:

Go back to the Scene View.

Click on the triangle next to the Dual Joysticks GameObject in the Hierarchy View. Notice that the Dual Joysticks GameObject is actually composed of two child GameObjects.

A procedure called parenting was used to set up the joystick parent/child GameObject relationship. Parenting is useful if you want to create a composite GameObject that has linked GameObjects. For example, you may want the left and right joysticks to be enabled or disabled at the same time, and it’s much easier to do this via script if they can be treated as a single object.

Select the LeftJoystick GameObject and note that it has the Joystick script component attached to it. Select the RightJoystick GameObject and verify the same.

The Joystick script detects touch events on the GUI Texture (the graphic) attached to it and repositions it with certain constraints. For example, the graphics only move inside a given boundary. The script also normalizes the position output so that it’s within the -1 to +1 range. This allows you to use the joystick in an iOS environment as a substitute for Input.GetAxis().

At this point you’ve placed the two joysticks in the scene, but they’re not yet connected to your Heroic Cube to drive input. You’ll modify the script to assign the right joystick the task of rotating the player, while the left joystick will move the player back and forth.

Modify the MoveAround script to handle joystick input. Open the script for editing and add two public variables representing the move and rotate joysticks (at the top where the other variables are):

var moveJoystick : Joystick;
var rotateJoystick : Joystick;

Then add a new function that looks at the joystick position and returns an output between -1 and +1. Add it right after the Update() function:

function joyStickInput (joystick : Joystick) {
    var absJoyPos = Vector2 (Mathf.Abs(joystick.position.x),
                                   Mathf.Abs(joystick.position.y));
    var xDirection = (joystick.position.x > 0) ? 1 : -1;
    var yDirection = (joystick.position.y > 0) ? 1 : -1;
    return ( ( absJoyPos.x > absJoyPos.y) ? absJoyPos.x * xDirection : absJoyPos.y * yDirection);
}

The joystick input is a Vector2 input, having x and y components. You use the larger, absolute value of x or y to set the output. You use the direction of the joystick as a multiplier to denote a negative or positive value. This results in an output value between -1 and +1.

Modify the Update() function to handle input from the Unity Editor or from an iOS device:

function Update () {
    var controller : CharacterController = GetComponent(CharacterController);

    // Rotate around y - axis
    var rotatePos = Input.GetAxis ("Horizontal") ? 
                       Input.GetAxis ("Horizontal") : joyStickInput(rotateJoystick);
    transform.Rotate(0, rotatePos * rotateSpeed, 0);
    
    // Move forward / backward
    var forward = transform.TransformDirection(Vector3.forward);
    var movePos = Input.GetAxis ("Vertical") ? 
                     Input.GetAxis ("Vertical") : joyStickInput(moveJoystick);
    var curSpeed = speed * movePos;
    controller.SimpleMove(forward * curSpeed);
}

The transform’s Rotate() function gets input from either the left/right arrow (or A/D) keys or from the rotate joystick input. The Character Controller’s SimpleMove function gets input from either the up/down arrow (or W/S) keys or from the left joystick input.

Save your script changes. Select the player GameObject (the cube) and note that the Move Around script component has two new public variables for Move Joystick and Rotate Joystick.

These variables are not currently assigned. With the player GameObject still selected, drag the LeftJoystick GameObject to the Move Joystick variable. Drag the RightJoystick GameObject to the Rotate Joystick variable. (Or instead of dragging, you can used the selector next to each variable, as indicated before.)

Click Play in Unity Editor. Start Unity Remote on your iOS device.

Test the joystick functionality and verify that you can move forward and backward using the left joystick and rotate left and right using the right joystick. As you move the joysticks on your iOS device, you should see the joysticks moving in the Unity Editor.

Note: The joystick images might appear stretched like you see here. Don’t worry, they won’t show up like that on the actual device.

A Clear, Bright Skybox

Now that you’ve improved your Heroic Cube’s movements, how about improving the scenery? So far the player’s been occupying a dull, grey world. Time to do some landscaping. :]

Thankfully, this is fairly simple. Unity includes assets in the Standard Assets package that you can use to create a sky, add vegetation and vary the height of the terrain.

In this section, you’ll add a sky by means of a skybox component. The skybox is a big cube object that’s added to the Main Camera in your game. Once you add the component, you can dress it up by adding a material that covers the cube and is rendered to create the skybox effect.

Select Assets\Import Package\Skyboxes to begin the import process. Select Sunny2 Skybox.mat, then click Import.

When the import is complete, your Project View should have a new Standard Assets\Skyboxes folder that contains the newly imported asset.

Select the Main Camera object, then select Component\Rendering\Skybox.

The new component shows up in the Inspector. Notice that it has a variable representing the material. This is where the skybox material you imported earlier comes into play.

Click on the little circular icon next to the Custom Skybox variable. The Select Material dialog should pop up listing any material assets that are available for your project’s use.

Click on the Sunny2 Skybox material, then close the Select Material dialog. The Custom Skybox material should now have the Sunny2 Skybox material assigned to it.

Your Scene View will now magically change to display the sunny sky you’ve just added. You can click on the Game tab to view the sky in the Game View, or click the Play button.

The sun has come out! And even though it may appear overcast, that’s encouragement to add some green life to your world.