After some posts about Unity, now it’s time to put it all together and create things using all the features explained before. Today it’s time to show some quick cool things using the new UI canvas and Unity built in animations. Check our old Unity 3d posts to be sure you don’t miss any step.
Using canvas in world space mode
Let’s start!
For this example I’m using a canvas with “world space” as render mode. If you wonder what does this means, you can check my last post about how good is the new canvas feature here, but as a quick summary, this allow us to use a canvas as a normal game object, transforming it in any way or setting it as a child of any other game object. This is a quick and nice way to add some 2d messages to any 2d/3d object. To create a message I’m adding some text and an image to the canvas, and of course a sexy cube as reference object:
World space configuration
In this case the canvas can be set as a cube to move it along the cube or transform it proportionally.
For now the cube is not doing so much besides being so dam sexy, but setting another camera shows how the message is shown from another perspective. With some easy scripting you can set it to be in front of the current viewport if you need to read the message correctly however you look to the reference object.
Two camera config
Animating a canvas
Now we are going to make the cube looks even better. The UI objects can be animated as any other objects, like we did in the mecanim post some time ago.
To hide and pop the message, we need 2 animations: one to pop the message and another to hide it. The animation it’s pretty simple, just create an animator component to the object you want to animate (in this case I’ve created an empty game object as parent of the text and the image of the message) and go to animation tab. Then create a color curve set a key frame after some seconds with the a (alpha) channel set to 0. For an additional cool effect, we can add an scale animation the same way.
For the pop animation is pretty much the same, but starting with the message hidden and setting the alpha channel to 1 after a while.
Message animation
At this point the animation is pretty useless, but we can improve it a bit with some more work and some code. For now, we can set some transitions at the animator tab and create a bool trigger. The trigger allow us to run the animation at some point, for example when a certain key is pressed, adding a small to the animated game object script.
Create a new parameter and set up transitions
Now the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
using UnityEngine; using System.Collections; public class Anim : MonoBehaviour { Animator anim; // Use this for initialization void Start () { anim = GetComponent<Animator>(); anim.SetBool("pushed", true); } // Update is called once per frame void Update(){ if(Input.GetKeyDown("a")){ anim.SetBool("pushed", false); } if(Input.GetKeyUp("a")){ anim.SetBool("pushed", true); } } } |
And that’s how it looks if we use the main camera or the secondary camera:
Camera 1 view
Camera 2 view
Using more than one canvas?
Yes! we can use two canvas or even more. For example in the following image I’m using the message canvas we created before plus a canvas in camera mode assigned to the secondary camera with two images, one of them animated again to simulate a simple camera layout:
Two canvas interface
Here is the complete list of chapters of this Unity3d canvas series where you can find the entire process:
- Unity 3D new UI features
- More Unity 3D! Using it all together
- Creating a 3D world and a playable character in Unity3D
- Animating a game interface in Unity
- UI ingame messages in Unity3D
- Basic raycasting in Unity3D
For the next article I’m creating an even complex example with the new UI elements as Christmas present. Thanks for coming and stay tuned for future posts!
Merry Christmas and happy new year!