Scripting UI in Unity 4.6

Sharing is caring:

Want to learn about the new UI system in Unity 4.6?

In this Unity 4.6 tutorial we’ll take a look at the basics of using the new UI to create a “world space” text appear via a scripted trigger. This UI will act as a 3d game object that can be placed in our scene and rotated. Using a C# script to control the fade in and out motion using a trigger near the entrance of our Cemetery.

 

Importing Assets

For this tutorial you will need a few assets:

http://www.dafont.com/zombie-control.font

https://www.assetstore.unity3d.com/en/#!/content/8312

Creating the UI Elements

To start creating the UI we’ll go up to GameObject > UI then select Canvas. The canvas will hold our text UI element and will be the base for all other UI elements as well. Note that the Canvas holds all of our UI elements to include our text.

To start off we’ll create the Canvas first and discuss how you can adjust the pixel size and scale of this canvas. You’ll notice the position values in the top of the Inspector panel, you’ll notice it says “Rect Transform”.

You’ll have position values just like any other game object in all axis then right below that you’ll have the pixel values. These pixel values determine the resolution of our canvas so you don’t want to adjust these in order to resize the canvas.

In order to resize the canvas we’ll use the scale values and since it’s currently much much bigger than our game world we’ll set the values to: x: .005 y: .005 z: .005 and you’ll get something that fits nicely into our cemetery level.

Next we’ll need to add some text to this canvas so you’ll do that by right clicking on the canvas and selecting Text from the drop down menu. By doing this we’ll create the Text as a child object of the canvas, as we mentioned before all UI elements will use the canvas as the parent.

The text should now be fairly small in relation to the canvas. We’ll adjust the position of this using the positioning tool in the inspector panel. Holding down Shift+Alt you’ll select the icon that looks like it would stretch over the entire square.

This will stretch the text box over the size of the canvas. Now we’ll take a look at the text itself. I’m using the Zombie Control font for this but you can use whatever font you’d like (or even Arial). Once we add this font in we can adjust the size so that it fits nearly the entire space available. We want this text to be fairly easy to read from the entrance of our cemetery.

The video goes more in depth with what we want to achieve with this text. Next we’ll take a look at how to create a simple fade animation using C# and a trigger.

 

C# Scripting and the trigger

Now that we’ve created our text we’ll need to go into creating a trigger which will then fade in and fade out our text based on whether or not we’re currently “inside” the trigger zone. To create the trigger we’ll use a simple cube.

Resize the cube so that it’s big enough to fit through the entryway of the cemetery and long enough so that it extends a bit near the text.

We want the text to be visible as we’re walking in, and fade out as we’re getting close to it as we exit the trigger. Remove the mesh renderer and check is Trigger in the collider component and all you’ll be left with is a green bounding box that represents our collider/trigger zone. Watch the video for a better look at how I’ve created my trigger.

Finally we’ll add our C# script below. I go more in detail with what this script does, but essentially all it does is check to see if we’re in the trigger. If we are then it’ll set the entrance boolean value to true.

On Trigger Exit does the complete opposite and sets the value to false. This boolean value is used in conjunction with our ColorChange function to determine whether or not we’ll change the color value of our text.

That’s it! This is a very basic overview of the new Unity 4.6 UI and how to script a world space version of this in your game. This can be used as in game text that acts as a 3d game object. Thanks for reading!

 

Fade Effects (C# Script)


using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class fadeEffects : MonoBehaviour {

	public Text undeadText;
	public float fadeSpeed = 5f;
	public bool entrance;
	public GameObject undeadCemetery;

void Awake () 

		{

		undeadText = undeadCemetery.GetComponentInChildren<Text> ();
		undeadText.color = Color.clear;

		}

void Update () 

	{
		ColorChange();
	}

	void OnTriggerEnter (Collider col)
	{
		if (col.gameObject.tag == "Player")
				{
						entrance = true;
				} 

	}

	void OnTriggerExit (Collider col)
	{
		if (col.gameObject.tag == "Player")
		{
			entrance = false;						

		} 

	}

	void ColorChange () 

	{

	if (entrance)
		{
			undeadText.color = Color.Lerp (undeadText.color, Color.white, fadeSpeed * Time.deltaTime);

		}

	if (!entrance)
		{
			undeadText.color = Color.Lerp (undeadText.color, Color.clear, fadeSpeed * Time.deltaTime);
		}

}
}

Jonathan Gonzalez

I love all things in game development and want to contribute by teaching others how to create games. I'm always looking to help others create awesome digital worlds. I've been a hardcore gamer since I was a kid and now it's my turn to create awesome digital experiences.

More Posts - Website

Follow Me:
TwitterYouTube

Comments

  1. Hi jonthan ,
    here the entire scene is moving towrds the programmer and rotating right , left…etc.how to use the camera could u guide me pls

    • The camera is a stationary object. If you place it on a character controller it may move with him but that’s about it. Not sure why your entire scene is moving unless you parented everything to the character controller.

  2. i am new to camera concepts….guide me pls

    • I’m not sure what you’re having trouble with. The camera is stationary. All you really need to know about the camera is where to place it. If you’re using it on a moving object just make the camera a child object of that.

  3. ok i will make camera as child object for a human character.thanks a lot for replying

  4. Hi jonathan
    in UI InputField what ever the user types the same text appears for ex if i enter “unity 3d” , the same text “unity 3d”we can see….but in password case it should be visible as *s.how to do this for UI InputField ….

Speak Your Mind

*