Tag Archives: adding

Adding terrain, trees, grass and water to your game

This tutorial explains how to add terrain to your 3D game environment in Unity. You will also learn how to edit the terrain and add textures to it, as well as how to add trees, shrubs, grass and water to the terrain.

To add textures, trees, grass and water to your terrain, you will need to import assets into your Unity project – this is also covered in the video. Scroll down the page to watch the video.

A basic terrain with textures, trees and water
A basic terrain with textures, trees and water (in Scene view)
A basic terrain being navigated in Play mode (using lower quality preview settings)
A basic terrain being navigated in Game view (using lower quality preview settings)

After watching this video, you will see just how easy it is to add terrain to your game environment like in the examples above.

If you find that Unity is running very slow, then reduce the amount of trees and grass in the environment. Lots of grass and trees can make Unity run slower. Note that the environment will not be fully rendered in Scene or Game view so the quality will not appear as high as it will be in the fully rendered game.

The image below shows how grass is rendered in front of a player in first person view.

Grass rendered in first person view.
Grass rendered in first person view.

Adding video to a webpage

This video tutorial explains how to add a video to your webpage using the HTML5 video tag. With the HTML5 video tag, you can specify the height, width, source, and type of video file(s) you are working with as well as adding controls, autoplay, and loop features.

When adding videos, you will need to consider browser compatibility. The following browser accept these videos using the HTML5 video tag (this could change):

  • Internet Explorer: MP4
  • Chrome: MP4, WebM, Ogg
  • Firefox: MP4, WebM, Ogg
  • Safari: MP4
  • Opera: MP4, WebM, Ogg

The safest bet is to use MP4 but it is a good idea to provide multiple file types. Keep in mind that the autoplay feature is currently not supported in Safari or Opera browsers and does not work on mobile devices such as the iPad or iPhone (this could also change).

When you add a video to your page you can specify the width and height, if you would like to auto-play the video, loop the video and if you would like to show or hide the video player controls. The video player controls look like this in Chrome browser:

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

The sample code below shows how to use the video tag. You might want to remove the autoplay, loop or controls attributes as they are all enabled in the example below. You will also need to change the width and height to suit your video.

<!DOCTYPE html>
<html>
<head>
 <title>Adding video to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
 <video width="550" height="400" controls autoplay loop>
 <source src="your_video_file.mp4" type="video/mp4"/>
 Your browser doesn't support the HTML video tag. Consider upgrading to a newer browser.
 </video>
</body>

</html>

Adding audio to a webpage

This tutorial explains how to add audio to a webpage using the HTML5 audio tag. Because this tag is new to HTML5, it may not be supported in some older browsers. It is also important to note that some audio file types may not be supported in different browsers.

At the time of writing this tutorial, the following browsers support these file types using the HTML5 audio tag:

  • Chrome: MP3, WAV, OGG
  • Internet Explorer: MP3
  • Firefox: MP3, WAV, OGG
  • Safari: MP3, WAV
  • Opera: MP3, WAV, OGG

Using MP3 files for audio would be the safest bet as it is supported by all the major browsers now. For this tutorial, I will demonstrate using the HTML5 audio tag with an MP3 file. You can get free audio files from a range of sources including the YouTube Audio Library and Freesound.

When you add audio to a page you can specify whether you want to allow the audio to automatically play, loop over, and if you also want to show or hide the audio player controls which will look like this:

audioplayer

The video below shows how you can use the HTML5 audio tag to add an audio file to a webpage. It also shows how to add controls and how to autoplay and loop audio files. Watch the video below and then scroll down to see the sample code.

The sample code below shows how to add an audio file to a webpage. All you need to do is replace the filename/filetypes with whatever you are using. You might also like to remove the autoplay, loop, or control features. Note that all three of these features are enabled in the example below.

<!DOCTYPE html>
<html>
<head>
 <title>Adding audio to a webpage</title>
 <meta charset="utf-8"/>
</head>

<body>
<audio controls autoplay loop>
 <source src="your_audio_file.mp3" type="audio/mpeg"/>
 Your browser does not support the HTML5 audio tag. Consider updating to a newer browser.
</audio>
</body>

</html>

This tutorial video includes a portion of free music from the YouTube Audio Library. Music from the audio library can be used in your videos by you as long as you do not make it available, distribute or perform the music separately from your videos into which you have incorporated the music files, and as long as the music is not used in an illegal manner or in connection with any illegal content. Always read the terms and conditions.

Operators in JavaScript

In this tutorial, you will learn how to use a range of operators in JavaScript to assign values, modify variables and make calculations.

If you have created your own variables and assigned them each a value (such as a string or integer), then you will already be familiar with the assignment operator which is a single = (equals sign).

Operators include:

Addition +
Subtraction
Division /
Multiplication *
Modulus %
Equals =

You can view the video below to see how to use these operators and scroll down to see the sample code.

 

The code below shows how you can use a range of operators when working variable assignments and calculations.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Operators</title>
 <script type="text/javascript">
 var x = 5, y = 10; //variables can be initialised on one line, separated by commas
 var z = x + y; // this is how variables can be added
 
 z++ //this increases the z variable value by 1
 
 z-- //this decreases the z variable value by 1
 
 // operators include + (plus) - (minus) * (multiply) / (divide) and % (modulus) which returns the remainder from division
 
 x+=y; //this is an example of compound addition. It is the equivalent of x = x + y
 // variables can be added using the compound addition += , compound subtraction -= , compound multiplication *= or compound addition /=
 
 document.write(z); // now let's see what the z variable displays after these modifications.
 
 </script>
 
</head>
<body>
 
 
</body>
</html>

Next tutorial: Strings