Unity3D: Animated UI using ui camera

06 Oct

You might have seen many animated UI examples in games, for instance, in the cut the rope game, when you press the exit button, you can see animated UI pops up, which looks super cool!

Now, the question is, how do we implement the same effect using Unity3D? In this post, I am going to show you how this can be easily done with a step-by-step demo.

  • Create a new Unity project, add a new scene
  • Click menu Create-> other > Camera, name it as “uiCamera”, change the Projection to “Orthographic”, change its clipping planes to be (-10, 10)

image image

  • Now we would place some UI controls at the plane z=0, so that the UI can be fully seen in the uiCamera
  • Drag some sprites to the scene, for instance the UI shown as below:
    • Drag the background sprite to the scene
    • Drag the retry and exit sprites to the scene. 

image image

  • To animate this UI, we can change the Size property of the uiCamera:
    • Create a script ChangeCameraSize.cs
    • In the update function, add below code:

      using UnityEngine;
      using System.Collections;

      public class ChangeCameraSize : MonoBehaviour {
          Camera uiCam;
          void Start () {
              uiCam = gameObject.GetComponent<Camera> ();
              Debug.Log (uiCam);
              uiCam.orthographicSize = 50f;
          void Update () {
              if (uiCam.orthographicSize >= 5.01)
              uiCam.orthographicSize = Mathf.Lerp (uiCam.orthographicSize, 5,

  • Drag this script to the uiCamera object
  • Run it, yeah!

This post demonstrates the simplest example to use uiCamera to implement an animated UI. In next tutorial, I am going to show you how to use iTween to implement more complex animations.

Leave a comment

Posted by on October 6, 2014 in Unity 3d


Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: