Day 3
Controls
Today we’ll be making controls for the player and getting into scripting with C#.
Adding Control To The Scene
Currently, we don’t have anything in the game we can interact with. It’s pretty much just an
image or an animation that we can watch. If we want something to happen when we e.g.
tap the screen of our phone, there needs to be something like a virtual button that
registers that tap.
Let’s add that button!
Go to GameObject menu, then select UI (for user interface) and Button.
As you can see in the Hierarchy tab, this adds both
a Canvas object and Button object to the Scene.
This is great! We need them both.
Canvas is the area inside which we can add user
interface objects.
Button is a user interface control that can be
pressed down and released.
UI objects can be a bit tricky to work with because the way they appear in the editor is way
larger than how they appear in the game. You probably noticed that you can’t see the
button you added anywhere on the screen.
Double-clicking items in the Hierarchy tab moves the focus in the Scene tab into that
object. Go ahead and double-click the Canvas object in the Hierarchy tab.
Now you can see the Canvas area and the button in the Scene tab. You can think the white
rectangle representing the borders of the screen of your device. If you want to get back to
the previous view, double-click the Main Camera object in the Hierarchy tab.
My button is located way off the Canvas area. I also want the
button to cover up the whole screen. This way, the player can
tap any part of the screen and it will get registered.
So, I select the button in the Hierarchy. Now I can change the
size and position of it in the Inspector. First of all, let’s change
the Anchor Presets by clicking the “middle/center” square and
selecting the option in the bottom-right corner that stretches
the button both horizontally and vertically.
If we now set all left, right, top, and bottom transforms to 0,
the button will fill out the whole canvas.
The problem is that if you now play the game, you can’t see anything except the button. We
need to do two things to fix this issue.
First, go to the Inspector tab and locate the Color setting in the Image (Script) component.
Clicking that opens up a color selector window. Here you’ll see four values R, G, B (for Red,
Green, Blue), and A (for Alpha). If you turn the A all the way to zero, the button image will
become invisible.
You could also get rid of the image component altogether, but then the clicks wouldn’t get
registered at all. So, let’s leave it as it is.
Second, go to the Hierarchy tab and click the small arrow next to
the Button object. This reveals a Text object underneath the
Button. We can safely delete this object so that we don’t get
strange texts floating on our screen.
Scripting Application
For scripting purposes, you’ll need to install a code editor. Your best choice is Visual Studio
because it’s officially supported by Unity. Luckily, the Community Edition of Visual Studio is
free even for small studios. The package might be a bit large, but that’s how the industry
tools are.
Get Visual Studio Community for free here.
Once you’ve got Visual Studio installed, we can start adding some functionality to our
game.
Go to the Assets menu and select Create and C# Script.
(C# is the programming language used for scripting in
Unity.) This will make a new script file in the Project tab.
Let’s call this one JumpScript.
C# Programming Language
Double-clicking the JumpScript will open up Visual Studio and display you the code inside
the file. It should look very similar to the code below…
Keywords The words that are highlighted with a color (in this case blue) are called
keywords. They form the rules around which the programming revolves.
using keyword allows the script to access content in other libraries. For an example,
UnityEngine is a library that contains functionality we can now access to use the engine.
public class keywords define a class that’s in this case called JumpScript. Classes are a bit
out of scope for this guide, but think of it as a container, similar to the Canvas object. You
can write code inside the curly braces of the class. Anything inside this block belongs to
that class. The code can sometimes be accessed using the name of the class.
Inside the class block we have two other blocks, Start and Update. These ones are created
by Unity, because they are often used with script files. However, they are very much
optional. In fact, we’re not going to use them right now.
Instead, let’s make a new block inside the class. These blocks that go inside classes and
have names are known as methods. We’ll create a new method and call it JumpClick.
It’s important to keep testing everything you make so that you’ll know if what you’ve
created works the way you intended. If you keep adding new things and never test, then
you might find out that everything is broken and you have no idea what’s causing the
problem.
So, inside JumpClick method I just want to print out some text. If the text gets printed out
successfully, then I’ll know that the clicking mechanism works correctly. Text is printed to
console by using Debug.Log functionality like this…
The script is now done. But how will the button know to call this script? We’ll have to hook
it up.
Select the player circle. We’ll be able to locate this
object more easily if we name it properly. So, at
the very top of the Inspector tab, change the
name of the object to PlayerCircle.
Next, let’s add the script we just made as a component for the PlayerCircle. Click the Add
Component button at the bottom of the Inspector tab and type in jump. Unity should offer
you Jump Script as the very first result. Click it.
Now the script is hooked up to the player. But we still need to hook it up to the button.
Select the Button in the Hierarchy tab.
Now, if you look at the Inspector tab, you
should see a Button (Script) component. At
the bottom of this component there is a
section for events. The button only has one
event: On Click (). This is the one we need to setup.
We want the On Click event to execute the JumpClick method that is inside the JumpScript
that is a component of the PlayerCircle object.
With this in mind, let’s first hand the PlayerCircle
object to the event. Locate a field that says None
(object) and click the tiny circle button next to it. This
opens up a Select Object window. Inside this window
there’s a Scene tab that lists all the objects already
inside the Scene. Go there and select the PlayerCircle.
Now we can go back to the event and hand it a
method connected to the PlayerCircle. Click the dropdown menu that says No Function,
then JumpScript, and finally JumpClick (). Now the method is hooked up to the On Click
event of the button.
You might remember me mentioning that Debug.Log would print text inside the console.
But where is the console? By default, it’s next to the Project tab, at the bottom of the
screen. Open it up.
Now, if you play the game and click
the screen with your mouse, a
message gets printed to the console.
We now know that our button works.
Congratulations! You made it to the
end of Day 3. We’re starting to get to
interesting territory.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class JumpScript : MonoBehaviour {
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
}
public void JumpClick () {
Debug.Log("Jump");
}
If you have feedback or questions drop a note
on Twitter.