This video explains how to use Physics2D materials in Unity to add properties such as bounciness or friction to objects in your 2D game scene. We will also look at more 2D colliders in Unity including the box collider and polygon collider.
Next tutorial: More Physics2D materials
In this tutorial you will be introduced to Skyboxes and CubeMaps in PlayCanvas. A skybox is a method of creating backgrounds to make the environment in a 3D game look bigger than it really is. Sky, distant mountains, hills or buildings are projected onto the six interior faces of the cube using a technique called cube mapping which creates an illusion of distant 3D surroundings.
A CubeMap in PlayCanvas is stored as six square images of textures. You can download images to use as a CubeMap for your game’s skybox (some links are included below). Below is an example of a cube map.
Watch the video below and then scroll down to find some links to downloadable cube maps for your own project.
Here are some links to free cube maps you can use in your own projects:
In this tutorial you will learn more about entities and how to modify a Box entity to make a ground or floor for your game’s scenes. You will also learn how to use materials to give 3D objects some colour and apply detailed patterns and textures using assets.
A repeating grass pattern image like the one shown in this tutorial can be downloaded from here.
Tip: You can do a Google Images search for textures and patterns using keywords such as “brick pattern tiled”, “repeat brick pattern” or “brick pattern seamless”.
A Graphical User Interface (GUI) provides a way for the game to provide information to the user or to read information from the user. This can be in the form of labels, buttons, text boxes, sliders, menus, and so on. The GUI can sit on top of the actual game. It is always a good idea to design your GUI before making the game – draw up a storyboard or wireframe with the types of GUI controls you want in the game and where you want to place them.
GUIs are created using code and can be added to any object or script in your game. If you have different parts of the GUI on different objects or scripts, it can become confusing and hard to maintain. It is a good idea to have all the GUI parts in one spot on one object.
In order to add a GUI to your scene, you need to add a special method to the script you have created for your GUI which is attached to an object in your scene eg. the camera. The special method that is used to create a GUI is called OnGUI(). This method takes no parameters and returns no data to whatever called it. The method will draw your GUI components on the screen and is called every single frame, just like the Update() method. Different GUI controls (eg. labels, buttons) will have code that goes inside the OnGUI() method.
Let’s start making a basic GUI that will draw a label with a short message on the screen. Labels display text on the screen that can be a simple string value, a variable value or a concatenated (joined) string and variable value eg. “Score: ” + scoreVariable.
Watch the video on Labels below or scroll down to read the instructions and sample code.
Create a new scene in your project and a new script called myGUI. Attach this script to the Main Camera. Add the following code to your script inside the class but outside of all other methods (i.e. do not place it inside the Start() or Update() methods).
void OnGUI(){ GUI.Label (new Rect(0,0,80,20), "Hello"); } |
Run the scene and you should see ‘Hello’ displayed on the screen in the top left corner. You have just created a basic GUI with a label that draws in the top left corner of your screen (at position 0 on x axis and position 0 on y axis of screen). The label has a width of 80 and a height of 20. The parameters inside Rect() are x position, y position, width, height. The label can display a string value or variable (or concatenated strings/variables).
The box is similar to a label except that a box has a dark border around the label. An example of a box is shown below.
Watch the video on Boxes below or scroll down to read the instructions and sample code.
The syntax for creating a box is also similar to creating a label. new Rect() takes the parameters of x position, y position, width, and height). An example of a box containing a “Hello” string message is shown below. This code would be placed inside the OnGUI() method:
GUI.Box(new Rect(0,0,80,20), "Hello"); |
If you want a box at the middle-top area of the screen, you can use code like this. This code would be placed inside the OnGUI() method:
GUI.Box(new Rect(Screen.width / 2 - 20, 0, 80, 20), "Hello"); |
Buttons can be in one of two states. A button can be either pressed down or not pressed down. An if statement can be used to determine whether a button is being pressed (a boolean value of true or false). If you keep the button pressed down with the mouse, it will not behave differently to just clicking once. The image below shows an example of a button.
Watch the video on Buttons below or scroll down to read the instructions and sample code.
Like labels and boxes, buttons require an x position, y position, a width and a height value. The sample code below shows how to create a button at an x position of 3, a y position of 3, with a width of 80 and height of 20. When the button is clicked it will reload the level (scene) using Application.LoadLevel. In this example the scene is called ‘myScene’. This code would be placed inside the OnGUI() method:
if (GUI.Button (new Rect (3, 3, 80, 20), "Reset")) { Application.LoadLevel ("myScene"); } |
A repeat button is like a normal button except that it can be pressed and held down with the mouse click. It can be used to increase the value of a variable while the button is being held down.
The example below increases a variable’s value while the button is being held down. This code would be placed inside the OnGUI() method:
if (GUI.RepeatButton (new Rect (0, 0, 80, 20), "Increase")) { myVariable += 1; print (myVariable); } |
A toggle button (also known as a ‘stated’ button because it can be in different states) is like a switch – it can be on or off. It can be used to set something in one state or another. It takes a boolean parameter (whether the button is clicked or not) and returns a boolean value (tells the user if the button is clicked).
The two images below show a toggle in two different states (off and on).
An example of the code is shown below with a boolean variable called ‘mySwitch’.
bool mySwitch = false; void OnGUI(){ mySwitch = GUI.Toggle(new Rect(290,20,80,20), mySwitch, "My switch"); } |
A toolbar is a row of several buttons. You can have however many buttons you like on a toolbar, but only one button can be selected at any one time. An integer variable is used to keep track of which button is selected and an array of strings is used for the different buttons.
The number of items in the array determines how many buttons there are. For example, if there are three items in the array then there will be three buttons. If the first button is selected, the integer value will be 0. If the second button is selected, the integer value will be 1. If the third button is selected, the integer value will be 2, and so on.
The sample code below shows the integer value variable, the array of strings, and the Toolbar GUI control.
int difficulty = 0; string[] list = {"Easy", "Medium", "Hard"}; void OnGUI(){ difficulty = GUI.Toolbar(new Rect (0,0,200,30), difficulty, list); } |
A textfield allows the user to input text. The textfield can display text and also accepts text from the user as they click in the box and type in it. A string variable can be used to store text that is displayed inside the textfield, and then store the text that the user types in.
The code below shows how a textfield can be added to a scene.
string textInput = "Enter your text here"; void OnGUI(){ textInput = GUI.TextField(new Rect(600,20,130,30), textInput); } |
A textarea is just like a textfield except that it can store multiple lines of text.
The sample code below shows how to add a textarea control to your scene.
string textInput = "Enter your text here"; void OnGUI(){ textInput = GUI.TextArea(new Rect(600,20,130,120), textInput); } |
Sliders allow the user to select a value between a range of different values by clicking and dragging a slider with the mouse. You can add horizontal and vertical sliders to your scenes in Unity. The slider takes a float value that is used for the default position of the slider, and returns a float value that contains the value the user changed the slider to. It also takes a minimum and maximum slider value.
The sample code below shows how to add both horizontal and vertical sliders to a scene. In the two examples, there are float variables that are initially set to a value of 0 (inside the main class). Each slider takes a float value and then returns a float value. The x and y positions as well as the width and heigh are specified. Parameters for minimum and maximum values for the sliders are also added at the end of the statement – in this example, the minimum value is 0 and the maximum value is 100.
float horizontalValue = 0; float verticalValue = 0; void OnGUI(){ horizontalValue = GUI.HorizontalSlider (new Rect (30, 20, 150, 20), horizontalValue, 0, 100); verticalValue = GUI.VerticalSlider (new Rect (5, 5, 20, 150), verticalValue, 0, 100); } |
In the next tutorial we will look at how to customise and style GUI controls.
This tutorial explains how to add rounded corners to divs on a web page. The image below shows an example of a div with rounded corners.
You may like to add rounded corners to images, buttons, divs or other elements on your page. They don’t just have to be added to divs.
Watch the video below and then scroll down to see the sample code:
Here is the HTML code:
<!DOCTYPE html> <html> <head> <title>Rounded corners</title> <link rel="stylesheet" href="resources/stylesheet13.css"/> </head> <body> <div class="round_box"> <p>This box has rounded corners</p> </div> </body> </html> |
Here is the CSS code:
.round_box{ background-color:#31D457; width:250px; text-align:center; padding: 30px 20px; border-radius:20px; } |
Here is the CSS code that shows how to specify the border radius for each individual corner:
.round_box{ background-color:#31D457; width:250px; text-align:center; padding: 30px 20px; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; } |
In the previous tutorials, we looked at the box model and how to add padding and borders to elements. In this tutorial, we will look at how to specify margins around boxes. Remember, padding is the transparent space around the content, borders go around the padding and content, and the margin is the transparent space around the outside of the border.
You can use CSS code to add a margin to any element on your webpage. For example, if you want some space around a heading of h1 size you could add the code margin: 2px; to the h1 selector in your CSS code to add two pixels of space around a h1 heading. You can also be more specific eg. margin-left: 2px; if you only wanted margin spacing on the left side of an element.
In the example image below, 50px of margin space has been added to the heading which has an orange background. The heading has a green border and is inside a div with a red border. The space between the green border of the heading and the red border of the div is the actual margin space (50px) around the heading. The space between the green border and the text inside the div is the margin space (20px). The green border is 5px thick and the red border is 2px thick.
Watch the video below and then scroll down to see the sample code.
Check out the sample code below to add margins to your elements.
<!DOCTYPE html> <html> <head> <title>Box model and margins</title> <meta charset="utf-8"/> <style> body{ margin: 0px; border: 2px red solid; } h1{ background-color:orange; padding:20px; border-style:solid; border-width:5px; border-color:green; margin:50px; } h2{ background-color:yellow; padding:20px; border: 3px dashed blue; margin-left:20px; margin-right:20px; margin-top:10px; margin-bottom:10px; } p{ background-color:blue; padding:20px; border-top: 8px dotted red; border-left: 8px dashed yellow; border-right: 8px solid green; border-bottom: 8px groove black; margin:10px 30px 10px 30px; /*top right bottom left*/ } </style> </head> <body> <h1>This is a box</h1> <h2>This is another box</h2> <p>And another box</p> </body> </html> |
In the previous tutorial, we looked at the box model and how to add padding around elements. In this tutorial we will look at how to add borders around elements (or boxes). We can change the thickness, colour and style of borders.
Border styles include:
The image below shows how a heading can have its own background colour and border style. In this example, the heading has been given a grey background with a green solid border using some simple CSS code.
Watch the video below and then scroll down to see the sample code.
Check out the sample code below to see how you can add borders to your own web page elements.
<!DOCTYPE html> <html> <head> <title>Box model and borders</title> <meta charset="utf-8"/> <style> h1{ background-color:orange; padding:20px; border-style:solid; border-width:5px; border-color:green; } h2{ background-color:yellow; padding:20px; border: 3px dashed blue; } p{ background-color:blue; padding:20px; border-top: 8px dotted red; border-left: 8px dashed yellow; border-right: 8px solid green; border-bottom: 8px groove black; } </style> </head> <body> <h1>This is a box</h1> <h2>This is another box</h2> <p>And another box</p> </body> </html> |
Every element inside a web page can be considered as a ‘box’. In CSS, we use the term “box model” when we’re talking about the design and layout of HTML elements. The CSS box model is basically a box that is wrapped around each element. The box model consists of:
When we use the box model, we can add padding, borders, and margins around the content in HTML elements such as headings and paragraphs. Every element inside your web page is actually a box. The image below shows the different parts of the box model.
The video below introduces the box model and shows how to add padding to boxes. Watch the video below and then scroll down the page to see how you can add padding to elements in your web pages.
The sample code below shows how to add padding. There are also some comments inside the /* and */ tags to help you remember the order of the widths for padding on each of the four sides of a box.
<!DOCTYPE html> <html> <head> <title>Box model and padding</title> <meta charset="utf-8"/> <style> h1{ background-color:yellow; padding:20px; } h2{ background-color:green; padding-top:50px; padding-right:20px; padding-bottom:50px; padding-left:20px; } h3{ background-color:orange; padding:10px 20px 10px 20px; /*top right bottom left padding */ } p{ background-color:blue; padding:10px 30px; /* top and bottom, left and right*/ } </style> </head> <body> <h1>This is a box.</h1> <h2>This is another box.</h2> <h3>This is a box too.</h3> <p>And yep, this is also a box.</p> </body> </html> |
The next tutorials will show how to also add borders and margins to elements in your web pages.
A prompt (or input box) is a popup box which asks the user a question and allows them to type and submit their answer in a textbox. The user must enter a value in the textbox or click on OK/cancel before they can continue interacting with the webpage.
These prompts can be intrusive and annoying so only use them when absolutely necessary. Forms are a better way of getting user input. The only data validation being used in this example is checking whether the input text box is empty or not.
Watch the video below and then scroll down to see the sample code.
Here is the code for the prompt box:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>JavaScript Prompt Box</title> </head> <body> <script type="text/javascript"> // This is a prompt box which asks for a name // The name is then displayed in the browser (only if a name is entered) var name=prompt("Please enter your name","Enter name here"); if (name!=null) // this means if the name is NOT empty { message="Hello " + name + "! How are you today?"; document.write(message); } </script> </body </html> |
Here are some questions to consider after using the sample code:
Next tutorial: Using the HTML5 canvas tag to draw shapes
Alert boxes are used to communicate messages to the user without taking them away from a web page. They are highly visible and must be acknowledged by clicking on ‘OK’ before the user can continue interacting with the web page.
Confirmation boxes also display a message but they give two options to the user: ‘OK’ and ‘Cancel’. Using JavaScript, you can program what will happen depending on which option the user chooses.
Alert boxes can tell the user that they have not completed a form correctly, and confirmation boxes can be used to ask the user to confirm something eg. you could ask the user if they accept terms and conditions of your site. If they click on OK, they can continue using the site, but if they click on Cancel then they will be redirected to another page.
Alert boxes and confirmation boxes can be annoying for the user so they should only be used when absolutely necessary. Watch the video below which explains both alert and confirmation boxes, and then scroll down to see the sample code for each type.
Here is the code for alert boxes:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Alert boxes</title> </head> <body> <script type="text/javascript"> // This is an alert box which can be used to display messages in a popup window // It can be very annoying for users so use only when necessary // Alert boxes can be used to warn a user that they haven't completed a form properly alert("I am an alert box!"); </script> </body </html> |
Here is the code for confirmation boxes:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Confirmation boxes</title> </head> <body> <script type="text/javascript"> // This is a confirmation box which gives two options: OK, and Cancel. var r=confirm("Press a button"); if (r==true) { x = "You pressed OK!"; } else { x = "You pressed Cancel!"; } document.write(x); </script> </body </html> |
Next tutorial: JavaScript prompts (user input boxes)
