Now that we have an FPS Controller, the next thing we want to do is to put in our first artwork for this gallery. It is an interactive Earth 3D model.
At the end of this tutorial, it will look like this.
When you go near it, an interaction option will appear, and if you press F, the Earth rotates, music plays, lights come on and particles starts to appear. Let’s start.
Getting Started
Before we do anything, let’s download the Tutorial1 package that I have pre-prepared with a 3D Model.
Once downloaded, Double-click the Tutorial1.unitypackage
A window like this appears in Unity. Press import. This will import everything you need for this tutorial.
Next, lets drag and drop the Earth 3D model. You can find it in the MyInteractionKit > 3D Models folder.
Drag and Drop the Earth into our Scene like this.
To make an interaction impactful, people need to see it. So let’s make the Earth bigger and lift it above the floor so that it looks like its floating. Adjust as you see fit.
Now that we have the Earth, let’s make it Rotate. Select the Earth, and press Add Component on the Inspector window
A search window thingy will appear, search for Rotator and select the Rotator script.
The Rotator component will appear in the Inspector
Press Play in Unity, you will see that the Earth is now rotating.
The Rotator Component
Lets get to know the Rotator settings
Rotation Axis – Changing these values impact the direction and magnitude of the rotation.
Rotation Speed – The Speed of the rotation.
Local Space – If this is checked, the object will rotate on Local Space instead of World Space. Here is an explainer post.
Start On Play – If this is checked, the rotation will automatically start every time the game runs
Making Earth rotate on command
Currently, the Earth is rotating immediately. That’s not so Interactive Artwork-ish isn’t it? Let’s make it rotate when user interacts on it. Uncheck the Start On Play checkbox. This will make it stop playing automatically.
Next, let’s put in an Interactable Box. You can find it in MyInteractionKit > Prefab folder.
Drag and Drop Interactable Box into the Scene, just like you dragged the Earth. You will see a Green Transparent Box. Players can’t see this, only you can.
That is the Interactable Box.
Note:
You clicked, elsewhere and the Interactable Box is gone? Aww too bad….
Just kidding, you can find it again by clicking on it in the Hierarchy tab.
Setting up the Interactable Box
First, lets move the box so that it nicely covers the Earth, like this.
Press Play, and move closer to the Earth. A popup appears like below.
When the FPS Controller gets near an Interactable, it will cause this popup to appear. Its designed that way.
Note:
This popup is common in games. You see them almost everywhere. But just in case you never saw it before, the letter highlighted in red is the key you are supposed to press. The description, well.. explains what will happen.
Press Play again to stop playing. Make sure the Play button is not highlighted in blue.
Why? if you make changes during play, when you stop playing the changes disappear.
Next, select our Interactable Box, and the Inspector Window will show the Interactables component. We will get to know this component in another post. Let’s move on and you will see how this works.
Telling the Earth to Rotate
On the Interactables component, find the On Interact() list.
In the OnInteract, press the +;
A new item appears on the OnInteract() event list, like below.
Drag and Drop Earth to the Object area.
It will look like this now.
Press the Function dropdown. A list will appear. This are the list of all commands available for all Components. Upon interaction, we can call these commands so that it gets executed.
Select Rotator > Start Rotation
You will have something like this.
Press Play and test it out. When you go near Earth, the popup appears, when you press F key, the Earth rotates!
Customizing The Popup
So now lets customize the popup. To do that, lets change the description to “Rotate Earth” on the Interactables component.
Press Play, and view your changes.
Adding Some Music
But this is hardly art right now, let’s give it some more depth. We need music. In the MyInteractionKit > Audio folder, find the music named 751995__solarpsychedelic__dark-fantasy-theme.
Select Earth. Drag and Drop the Music to the Inspector window.
An Audio Source will appear in the Inspector. It will look like this.
Press Play, you would hear music playing.
Okay, but we are not attempting to do background music. We want it to play together with the Earth spinning. Uncheck the Play on Awake.
Select our Interactable Box, find in the Interactables component in the Inspector window. Press + to add another action into the List.
Another item has been added to the List.
Press the Function dropdown. Just like before, a list will appear but this time there is Audio Source. Select Audio Source > Play()
Press Play, when you interact with the Earth, the Earth starts to rotate, and the Music will play.
Light to set mood
Now that we have such sombre music, let’s add some light to get some sombre mood on it. Right-click on the Hierarchy window, select Light > Spot Light.
A spotlight will appear.
But it is not too visible. We will change the light to Red nd amp up its brightness. Select the Spot Light, in the Inspector, find the Light component.
Press the Color, a color selector will appear, set it to Red
Set the Intensity to 700
Change the Outer Spot Angle to 80
Now, its more obvious. Move and Rotate the light it so that the Earth so that it shines on Earth. It should look something like this.
To make it only enabled when we Interact, select the Spot Light, and uncheck the checkbox besides its name. This will disable it.
Select our Interactable Box, again, press + to add another action into the List.
It will look like this.
Drag and Drop the Spot Light into the Object area of the newly added item
Press the Function dropdown menu. Select GameObject > SetActive(bool)
You will have something like this. SetActive is a Unity function to activate and deactivate a GameObject.
Check the checkbox in SetActive. You will have something like this. This means, that the Spot Light GameObject will be activated when we Interact with Earth.
Press Play, when we Interact with Earth, the Earth starts spinning, the audio plays, and the red light activates.
Particles for some more mood
Finally, lets add a particle to actually make it look magical. Hopefully. On the Hierarchy, Right Click and Select Effects > Particles System.
You will get something like this.
Select the Particle System if not yet selected, in the Inspector, find the Particle System component.
The particles are too fast so lets slow it down. Change the Start Speed to 0.5.
Lets change the color to Red-Orange. Press the color at Start Color. A color selector appears similar to before, set the color to Red-Orange.
Press the Emission category.
The Emissions settings will be expanded like this.
We need more particles, change the Rate over Time to 30.
Then, click on Shape category.
The options will expand and look like this.
Click the Shape dropdown and select Circle
At the end, we have something like this.
Move the Particle System and put it under Earth. It will look something like this.
Making it work with the others
Next, we need to stop it from starting automatically. In the Particle System component, uncheck Play on Awake.
Select our Interactable Box, in the Inspector, find the Interactables component and press + to add another action to the list.
It will look like this.
Drag and Drop the Particle System to the Object area of the new item.
Press the Function dropdown of the new item.
Select Particle System > Play()
Finally, press Play to test. When you approach Earth and Interact with it:
The Earth rotates
Music plays
Light turns on
Particles starts appearing
This is the end of this tutorial. I hope you have fun!