Hi everyone! Today it’s time to end with the Unity3D canvas series with one last post. In this one we are using basic ray casting to trigger some more animations in our player interface.
If you want to try the following tutorial by yourself here is the last step project from where you can continue whit this one:
If you wonder if you are able to build it from zero, here is the “almost 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
monolith ahead!
Basic but useful Ray casting
We need to detect if the monolith is in front of the player, so first of all we need to detect somehow which object is in his front. There are other ways, like using vectors and angles, but in this case I’ve chosen ray casting because it’s powerful, easy to use and already built in in Unity.
Let’s start creating a new script and adding it as a component to the physical object of the player. Unity’s built in first person controller it’s a composition of a camera and a graphic object. In this case I’m adding this new script to the camera because its size is equal to the game screen, and this way it’s easy to create a ray from the center of the screen. Here the ray length is limited to 20, so the monolith will be detected only if the player is near it.
Here is 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 25 26 |
using UnityEngine; using System.Collections; public class monolithDetection : MonoBehaviour { GameObject canvas; // Use this for initialization void Start () { canvas = GameObject.Find("Canvas"); } // Update is called once per frame void Update () { RaycastHit hit; // get the forward vector of the player's camera Vector3 fwd = transform.TransformDirection(Vector3.forward); //create a ray using fwd vector as direction and a max size of 20.0f //hit is the out parameter if something is detected if (Physics.Raycast (transform.position, fwd,out hit, 20.0F)) { //if there something in our front, check if it's the monolith if(hit.collider.gameObject.name.Equals("monolith")) print(hit.collider.gameObject.name); } } } |
Notice that in the code we are looking for an object named “monolith”. That’s because I renamed the monolith 3D model in such way. If the name of the object you are looking for it’s not the correct one, the ray will hit it, but the code will do nothing.
If everything is fine, each time you point the player view to the monolith while in game, you will have a message in Unity’s console like this one:
Monolith found!
Detected animation
Now the monolith has been detected, but there is only a console message when it happens. It needs some good looking animation to tell the player what’s going on.
Before going back to Unity, I created some new assets for the detection effect. Here I’m not using sprite sheets since we can create animations based in basic transformations inside unity, and for this time that’s more than enough.
detection assets
Next steps are the same we have seen in some old tutorials:
- Drag and drop all the assets into Unity’s interface inside the project tab and be sure to drop them inside the sprites folder.
- Configure each new asset as Texture type = “sprites (2d and UI)” using the inspector tab
- Place the assets wherever you want
- Create an animator component for the main camera canvas. In this project there is more than one canvas object, so make sure you are adding it to the correct one.
- Create some animations using the animation tab. You can display it through window menu. I’ve set the alpha of all assets to 0, and then animated them to 1 to show them only during the animation, when the monolith has been detected by the ray.
- In this case search for the animation file and click on it to show its parameters in the inspector tab. Disable “loop time” to avoid the animation being played more than once.
Check this post to find out more about Unity3D animations.
animation timeline
That’s how it look after placing the assets
Monolith detected!
We have a code that says when the player is pointing to the monolith and a cool animation. Time to put all together!
In the animator tab, create an empty state by right click-> create state->empty. This will be our “idle” state. In my case I have an init state for additional screen initialization effects when the game starts.
Set a new Boolean parameter called “monolithDetected”. If the ray hits the monolith we have to set this parameter to true and to false if not. Connect the idle state to the state automatically assigned to the animation created before with two transitions: one from idle to the animation and another one from the animation to idle. In my case this state is called “monolithDetector” because I named the animation clip in the same way.
state diagram and parameter set up
Now we have to configure both transitions setting the Boolean parameter as condition in the inspector tab. For the one going from idle to animation set the condition to true and false to the other one. That means the animation will go from idle to the animation when the parameter is true and back again to idle when the parameter is false.
idle to animation transition
animation to idle transition
Finally, the Boolean parameter needs to be set to true or false somewhere. Go back to the script created in the first step and add the following lines:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
using UnityEngine; using System.Collections; public class monolithDetection : MonoBehaviour { GameObject canvas; // Use this for initialization void Start () { canvas = GameObject.Find("Canvas"); } // Update is called once per frame void Update () { RaycastHit hit; // get the forward vector of the player's camera Vector3 fwd = transform.TransformDirection(Vector3.forward); //create a ray using fwd vector as direction and a max size of 20.0f //hit is the out parameter if something is detected if (Physics.Raycast (transform.position, fwd,out hit, 20.0F)) { //if there something in our front, check if it's the monolith if(hit.collider.gameObject.name.Equals("monolith")){ //get the animator and set monolith parameter to true canvas.GetComponent<Animator>().SetBool("monolithDetected", true); print(hit.collider.gameObject.name); } else //get the animator and set monolith parameter to false since it's not the monolith canvas.GetComponent<Animator>().SetBool("monolithDetected", false); }else //get the animator and set monolith parameter to false since there is nothing in our front canvas.GetComponent<Animator>().SetBool("monolithDetected", false); } } |
Now when the monolith is in front of the player the animation is triggered and the assets are still visible while the player stands in front of it. When the player moves away the assets should disappear again, waiting to detect the monolith again.
That’s all folks!
You can test the result HERE , move with AWSD and jump with space. Go right from the starting position to meet the mighty monolith!
Download the final project HERE.
Next time I’m leaving Unity for some time, maybe moving back again to pixelart tutorials and tools and graphic assets in general.
See you soon!
I hate that everyone explains the exact same thing, how to raycast between this here object and towards a direction. what if you need to raycast between two exact locations? and not starting with this here object, but with ANY object