Tag Archives: background

Adding assets to your 2D game in Unity

This video explains how to import assets into a 2D game project in Unity. Assets in your game will include items such as background images, character sprites, objects in your game scene, materials, and scripts that will control the game.

We will get started by adding a sky background, the ground, and a player object (ball). To add assets to your game, you simply drag and drop files directly into the Assets panel. Files you might like to add include images for backgrounds, spritesheets for characters, animations, sounds, and materials.

addassets

To see how this is done, watch the video below.

Next tutorial: Adding physics and colliders to your 2D game

Adding sound to your scene

In this tutorial you will learn how add sound to a scene in your game. You can add sounds that play constantly in a scene such as background music and you can also add sounds that only occur every now and then or that occur after an event. Sounds can also be looped or just play once.

There is also 2D sound (heard everywhere in your scene) and 3D sound (heard only when you are in a specified proximity to an object/sound). Sound can be scripted but you can also add sound without any code at all.

Watch the video below or scroll down to read the step-by-step instructions and sample code.

To add audio to your scene, follow these steps:

  1. Make sure there is one (and only one) Audio Listener component in your scene. It should be attached to the character controller’s camera or main camera. Delete or disable any other audio listeners as there can only be one in any scene.
  2. Add an object (eg. empty object, cube, sphere) or use an existing object in your scene to add the sound to.
  3. Select the object and click ‘Add component’ in the Inspector panel.
  4. Add the ‘Audio source’ component to the object.
  5. Find an audio file (eg. MP3, OGG file) and add it to the ‘audio clip’ property on the audio source component in the inspector panel.
  6. To make the sound play throughout the whole scene, enable ‘Play on awake’. You can also check the ‘Loop’ option to make the sound repeat/loop. Play the scene to test your audio.
  7. To use the audio file as 3D audio, drag the ‘Spatial Blend’ slider from 2D to 3D – this means that you will only hear the sound when you are near the object. You can change some of the properties to specify how it fades away and how close to the object the player needs to be to hear the sound.

To script the audio, add this code to the Start() method:

GetComponent<AudioSource> ().Play();

and to stop the audio:

GetComponent<AudioSource> ().Stop ();

You could also add an ‘if’ statement eg. to make the sound play when a key is pressed. For example, you could add this ‘if’ statement to the Update() method.:

if (Input.GetKey(KeyCode.Space)) {
 GetComponent<AudioSource>().Play();
}

Also, you can check if audio is currently playing by using .isPlaying(). Any looping sound or a song can be turned on and off using an if statement that checks if the audio is currently playing – just add something like this to your Update() method.

if (Input.GetKey (KeyCode.Space)) {
 if(GetComponent<AudioSource>().isPlaying == true){
 GetComponent<AudioSource>().Stop ();
 }
 else{
 GetComponent<AudioSource>().Play ();
 }
 }

How to change the audio clip using code?

If you want to change the audio clip on the audio source during the game (maybe after a certain event or when a key is pressed), you will need to add the following line inside the class (outside of all other methods) in your script:

public AudioClip otherClip;

You will then need to stop the current audio clip from playing before you switch to another audio clip and start playing that one. Inside the Update() method (or whichever method you are controlling the audio from), you will need to add the following code. This code may be placed inside an if statement (eg. if x key is pressed):

GetComponent<AudioSource>().Stop ();

Then, after you have added that line of code you can switch the audio clip and start playing the new audio clip using this code:

GetComponent<AudioSource>().clip = otherClip;
GetComponent<AudioSource>().Play ();

Lastly, you will need to go into Unity and drag the audio clip file (eg. MP3, OGG file) onto the ‘otherClip’ property on the script component (for this script) in the Inspector panel.

Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour.

A linear gradient can change colours gradually from left to right, right to left, top to bottom, or the bottom to top of a div. A gradient involves at least two different colours but can include multiple colours. Below is an example of a linear gradient that involves three colours (dark green, yellow, light green).

Screen Shot 2015-05-14 at 8.25.45 pm

The example above is obviously a dramatic example. Make sure you use colours that work well together and that work well with the rest of the theme on your website. Using different shades of a colour for a gradient can be used to give a div a little depth or a nice shadow effect if used effectively.

Watch the video below to see how to create linear gradients and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

<!DOCTYPE html>
<html>
<head>
 <title>Linear gradients</title>
 <link rel="stylesheet" href="resources/stylesheet14.css"/>
</head>
 
<body>
 <div class="round_box">
 <p>This box has rounded corners and a linear gradient.</p>
 </div>
</body>
</html>

Here is the sample CSS code:

.round_box{
 background-color:#31D457;
 width:250px;
 text-align:center;
 padding: 30px 20px;
 border-radius:20px;
 background-image:linear-gradient(to bottom, #175E0C, #DBF022, #37DE1C);
}

Background images and colours

This tutorial explains how to add a background image to divs and the body section of your web page. It also explains how to have fixed background images (that don’t scroll with the content of your web page) and change the placement of background images. You will also see how to add background colours behind background images.

In the example image below, there is a div inside the body of the page. The body has a background image (a greyish gradient) while the div has a light green background.

Screen Shot 2017-04-14 at 4.30.34 pm

Watch the video below and then scroll down to see the sample code.

Below is the sample code for the HTML file. If you add more content to your page so that the page can scroll down, you will notice that the background image doesn’t move because it is set to a fixed position in the CSS code. Note that the HTML code refers to CSS in a separate stylesheet file (called stylesheet4.css and stored in a resources folder).

<!DOCTYPE html>
<html>
<head>
 <title>Background images</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" href="resources/stylesheet4.css" type="text/css"/>
</head>
 
<body>
 
 <div>
 <h1>This is a heading</h1>
 <p>This is a paragraph</p>
 </div>
 
</body>
 
</html>

Here is the sample code for the CSS file (it’s called stylesheet4.css and stored in a resources folder):

body{
 background-image:url("nepal.png");
 background-color:blue;
 background-repeat:no-repeat;
 background-attachment:fixed;
}
 
div{
 width:450px;
 height:300px;
 background-image:url("canada.jpg");
 background-repeat:no-repeat;
 background-position:center top;
}

How to make a transparent background for an image in Photoshop CC

This video tutorial explains how to make a transparent background in Adobe Photoshop CC. You might have a shape or text in an image with a white background that you want to make transparent, or you might have an image that you want to make certain parts of transparent. This video explains how! You can watch it below or click here to view it on YouTube.