Unity UI: Canvas Screen Space & Cannon
Intro
In this article, we will cover how to create a 3D UI using the Screen Space Canvas. The UI will control the movement and firing of a cannon in the game.
Cannon
I am using Synty’s Sci-Fi pack and it comes with a Turret prefab I will be using for the Cannon. This prefab had components: the base and the cannon. This allows use to rotate the base for the horizontal movement and rotate the cannon for the vertical movement.
The Cannon will need a position to spawn the projectile. Create an empty game object (Instantiate_Point) and position in the Cannon where the projectile will instantiate or spawn from.
Create a Turret or Cannon script and we will create 3 game objects variables that will hold the base, cannon and the projectile spawn point.
With the serialize field attribute, we can assign the game corresponding game object in the inspector.
Back in the Cannon script, we make it 4 public methods that will be called when each directional button on the UI is pressed.
The left and right button rotates the base on the Y. The up and down button rotates the cannon on the X.
For firing the projectile, we need two more variables: GameObject that will hold the projectile prefab and a float that will hold the force that will be applied to the projectile.
Assign the projectile prefab and make sure a Rigidbody is attached to the projectile prefab with gravity.
The force variable allows us to adjust how much force is applied to the projectile from the inspector.
In the Cannon script, another public method will be created to be called when the fire button on the UI button is pressed.
Create a local GameObject variable that will store the Instantiated projectile prefab. It should be instantiated from the instantiate position and rotate.
Using the local projectile variable, grab the Rigidbody component and add relative force and pass in the _force variable on the axis that will fire the projectile forward.
Canvas Screen Space
Create a Canvas and set the Render Mode to Screen Space. This will require a Camera to render on.
I am using a Cinemachine virtual camera and found it troublesome to create a separate Camera to render the Canvas on, so I will use the Main Camera.
The Plane Distance determines the depth of the Canvas from the Camera. This is important because the Canvas is in the same space as the Scene Objects. Since the Camera is following the movement of the Cannon, the Canvas needs to be close so it doesn’t clip through any of the Scene objects.
Now you position the UI objects like any other object in the Scene.
In creating a 3D button, you create a Button UI element. You need to keep that image since that is Raycast target, which is how Unity detects if the Button has been pressed or clicked. We don’t want to see the image, so change the Alpha in the color property to make it transparent.
The image will no longer obstruct the 3D object that is acting as the Button, but the image is still there able to detected the click or press.
For Button transitions, I used Animations which you can read my other article on to learn more about.
Button elements have an On Click() method that is called when the button is pressed. We can attach the Cannon (turret) GameObject that has our Cannon script on it and select the Method we want call from that script.
Below is the left direction arrow, so we it is clicked we call the Left Button Pressed method that will rotate the Cannon base left.
We repeat this process of calling the directional method from the Cannon script for each of the corresponding UI objects.
Lastly, since the UI objects are being rendered in the Scene the lightning is effecting it and shadows are produced. If you don’t want shadows in the Light properties > Culling Mask > deselected the UI layer.
This will excuse any GameObjects that is part of the UI layer from light.
