Position, Rotation, and Scale in Unity | Virtual Reality Tutorial

Transforming Objects

There is a component that is in nearly all game objects in Unity: Transform. In this tutorial, you will master Unity’s Transform component. To learn how to build 30 virtual reality games in Unity, check out our Unity 3D course!

Position

Select Main Camera from the Hierarchy. To change the camera’s X position in the Scene, you can change the “0” in the X field of the Position property. For instance, change Main Camera’s X position to 2, as in the following screenshot. The camera will move in the Scene.

Another way to change the X position is to click on the “X” beside “Position” and drag your cursor left and right.

Notice that changing the X position moves the camera in one degree of freedom: along the horizontal axis. The horizontal axis is represented as the red arrow extending from the camera in the Scene. You can click on this red arrow to move the camera horizontally.

The gizmo at the top right of the Scene window shows that the red arrow pertains to the X axis.

The Y position represents the vertical axis. Changing the Y position in the Transform component moves the camera up and down.

The X and Y positions allow us to put the camera in a 2D environment. The Z position, which represents the depth axis, creates a 3D environment. Changing the Z position moves the camera forward and back.

Zoom in on Main Camera in the Scene. As evident in the next screenshot, three rectangles are on top of the camera’s icon. You can click on the rectangles to move the camera in different planes. For example, if you click on the green rectangle, you will be able to move the camera in the XZ plane.

Rotation

The Rotation property in the Transform component works similarly to Position. Changing the X Rotation makes the camera look up and down. Changing the Y Rotation makes the camera look left and right. Changing the Z Position rotates the camera sideways, as though a player were tilting their head to the left and right.

There is another way to change Rotation. In the top left of the Unity window, there are several icons that pertain to available tools. The first tool moves the developer camera. This tool is an alternative to holding the right mouse button.

The second tool, which is pre-selected by default, allows you to move objects. Clicking on the third icon changes the tools around the Main Camera, as evident in the next image. Instead of arrows, there will be a red circle, green circle, and blue circle.

If you click and drag the circles, the camera will rotate. The colors correspond to the different axes: red for X, green for Y, blue for Z. If you click on the sphere between the circles, you can rotate the camera in all three axes.

Scale

The third element in the Transform component is Scale, which also has X, Y, and Z values. Scale changes the size of an object. Note that if you change the Scale values for Main Camera, the camera’s size will not change. This is because the camera icon is not rendered in the game. The icon represents the player’s point of view.

Directional Light is also an abstract. The player will not see its icon. Thus Scale will not work on these objects. However, Scale will change the size of a 3D element.

How do you add a 3D element? To learn this and more, check out our Unity 3D course, where we build 30 virtual reality games!

Book Released! Learn HTML in 1 Hour

Do you have a great website idea that you want to make come to life? Meet Mammoth Interactive’s book: Learn HTML in 1 Hour.

Whether you want to learn the basics of coding or build your own website from scratch, Learn HTML in 1 Hour can teach you the foundations of coding – in only one hour. Coding is not something to be afraid of.

HTML is the foundation of the web. If you are a beginner and want to learn how to code, Learn HTML in 1 Hour is meant and built especially for you.

Important topics in web development are shown with examples that are easy to read. If you have a Mac computer, PC, or even a mobile device, you can follow along with the book’s examples on www.jsbin.com. JSBin is an editor that allows you to see your creations in real time.

If you want to brush up on the skills you learned in a tech class years ago, or even if you’ve never coded a line before, this book is for you. You will learn topics including:

Font Style – You will learn how to style the contents of your webpage so that you’re not always using the default fonts and colors – boring! Italicize, bold, and underline! You never know when the text on your site could need it.

Images and Links – Make your site visual and dynamic by adding image files that link to different areas of the web.

Lists – It is easier to read things when they are in a list (like this one). Master ordered and unordered lists to make paragraphs easier to read.

Input Tags – Communicate with your users! Create input tags and submit buttons so that site visitors can send you messages.

Learn HTML in 1 Hour provides a clear, concise introduction to web design that anyone from your great-grandmother to your little brother can follow. You can code! For more books on tech topics, visit our Lulu shop.

How to Navigate the Inspector and Console in Unity | Virtual Reality Tutorial

Unity is the number one platform for building Virtual Reality (VR) games. In this tutorial, we will navigate the Inspector, Project, and Console windows in the Unity editor. To learn how to build 30 mini virtual reality games in Unity, check out our Unity 3D course!

The window to the right of the Scene contains the Inspector, as evident in the following image. This window shows details of the item currently selected, such as a game object in the Scene or a file in our project.

Click on Main Camera. The Inspector will fill with attributes of Main Camera that you can change. At the top is the name of the game object. The Tag tab allows you to label the object. The Layer tab is not often changed for Main Camera because this tab can help you check for collisions in the scene.

Main Camera’s Inspector shows the following components: Transform, Camera, GUI Layer, Flare Layer, and Audio Listener. Components change how game objects behave.

The Transform component is the most basic component of a game object. Transform allows you to set the position, rotation, and scale of an object.

The Camera component shows details about the camera. Currently, the Clear Flags property is “Skybox”, so the Game Window contains a sky. If you change Clear Flags to “Solid Color”, the Game window will fill with the color of the “Background” property.

A lot of learning in Unity is experimentation; changing values and seeing the immediate effects in the Game window. Select Directional Light from the Hierarchy. The Inspector will change to contain components of the Directional Light object. In the Light component, you can change the light’s type, color, intensity, shadows, and more.

The bottom tab in Unity contains the Project window. This window contains the Assets folder, which contains all the files that make up your game. Any 3D models, scripts, materials, animations, sound clips, video files will be in Assets.

Beside the Project tab is the Console tab. Note that if Console is not enabled beside “Project” on your screen, go to Unity > Window > Console.

The console displays messages to you as the developer. There are three kinds of messages can appear.

  • Error messages – colored red; icon is an octagon. Error messages can appear when there is a mistake in your code or when a plug-in is not working.
  • Warning messages – colored red; icon is a triangle. Warnings can provide suggestions that improve your code.
  • Basic information messages – colored white or black; icon is a speech bubble. In your game’s code, you can set messages to print in the console. These messages can inform you of what is happening in the game so that you know whether or not the game is behaving properly.

The Inspector, Project, and Console are three useful windows in the Unity editor. The Unity engine comes with built-in models, materials, and more, which you can use to make your own 2D or 3D games. To learn more about Unity, check out our Unity 3D course, where we build 30 mini virtual reality games!

How to Navigate the Hierarchy and Scene in Unity | Virtual Reality Tutorial

Unity is the number one platform for building Virtual Reality (VR) games. In this tutorial, we will navigate throughout the Hierarchy and Scene windows in the Unity editor. To learn how to build 30 mini virtual reality games in Unity, check out our Unity 3D course!

Open Unity. A start screen that resembles the following image will appear. To make a new project, select “NEW” from the top right.

In the start screen, you can adjust some of the project’s settings. Give the project a name and location. The Location field refers to the folder in which you want to save the project. It is good practice to create a new folder just for your Unity projects so that you can easily find them.

Have the 3D rendering mode enabled. Press the “Create Project” button. Unity will create a folder with the same name as your project name in the location you specified.

The Unity Editor will open. Your screen will look like the following:

The left sidebar is the Hierarchy window. This is similar to the hierarchy you have in your operating system. For example, in your Pictures folder, you may have sub-folders of events that group together photos.

The Hierarchy lists the names of the objects in the game’s scene. Each object can have its own hierarchy. Currently, we have the items Main Camera and Directional Light, which are game objects. Anything that changes how a game works visually or internally, such as a player, enemy, or explosion, should be in a game object.

You can see the objects listed in the Hierarchy in the Scene window, which is the window in the center of your screen. The Scene displays the virtual world you build for a game.

Right-click in the Scene window. The cursor will change to an icon of an eye, as evident in the next image. While holding the right mouse button, you can move the cursor to look around the Scene.

Another way to navigate the Scene is to press the W, A, S, and D keys on your keyboard while holding the right mouse button. This is similar to the left, right, forward, and back arrow controls on a video game handheld.

Click on “Main Camera” in the Hierarchy. Arrows will appear around the camera symbol in the Scene, as in the following image.

The Main Camera renders (draws) the game for the player. It can be thought of as a player. While you have the Main Camera selected, there is a Camera Preview box in the bottom right of the scene. The Camera Preview shows the scene from the perspective of a player.

To see the scene from a player’s point of view, click on the “Game” tab beside the “Scene” tab. The Game window will open, as in the following screenshot.

Re-open the Scene window. Click on “Directional Light” in the Hierarchy. Arrows will appear around the Directional Light’s symbol in the Scene. The Directional Light emits light rays. You can change this game object to change the lighting of a scene.

The Hierarchy, Scene, and Game are three important windows in the Unity editor. The Unity engine comes with built-in models, materials, and more, which you can use to make your own 2D or 3D games. To learn more about Unity, check out our Unity 3D course, where we build 30 mini virtual reality games!

 

 

Introduction to Divs: CSS/HTML Crash Course (Free Tutorial)

Divs are an important part of every HTML page. A div is a container that can hold other HTML elements inside of it. If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Divs are used to divide HTML into different sections. The sections can then be styled using CSS. You can change different things, including font style and background color. To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file. Feel free to rename the title “Divs!” by replacing JS Bin with Divs!

As shown in the following code, to create a div, use opening and closing div tags within the body tag.

  <div>

  </div>

You can put a variety of items in a div. For this example, let’s put a header, paragraph, and link into the div.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>

h1 is the biggest header size. The p tag creates a paragraph. The a tag creates a link. Regarding the link, the web address to which you want the list item to link goes in the quotation marks. For our example, # is a placeholder.

Furthermore, we will make two more divs.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div>
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div>
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Before we style the divs, we need a way to identify them. When we select a div in CSS, we need to know which div we’re targeting. If you call div like in the following CSS code, it will target every div on the page.

div {

}

For instance, to make the text color of every div yellow, code:

div {
color: yellow;
}

We usually want to be more specific than that. Therefore we can use classes to distinguish between divs. Classes are used in HTML, and then you can call the classes in CSS. They are a way of identifying specific elements on a page. Let’s assign our three divs the classes div-1, div-2, and div-3.

  <div class="div-1">
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div class="div-2">
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div class="div-3">
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Note that on an actual website with many divs, you want to name their classes more descriptively. Let’s say we want to modify only div-1. Open the CSS tab. To select the class in CSS, use the following format:

.div-1 {

}

Now we can style that div, such as add a border and change the text color and alignment.

.div-1 {
border: 1px solid black;
color: grey;
text-align: center;
}

To select and modify an item within div-1, type:

.div-1 a {
text-decoration: none;
color: lightblue;
<code}

The preceding code modifies only the a tag within div-1. Now that we’ve modified div-1, why don’t we modify div-2?

.div-2 {
font-style: italic;
border: 2px dashed black;
width: 50%;
}

In the preceding code, we changed the div’s font style to italic and border to 2px dashed black. We also set the width to be 50% of the size of the window. This is useful for responsive web design because the div width will resize as the window resizes.

For div-3, we can experiment with changing the background color and width.

.div-3 {
background-color: grey;
width: 25%
}

That was an introduction to divs in CSS and HTML. A large part of learning to code is experimentation, so play around with creating and modifying more divs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes