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!

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!

 

 

How to Download Unity (for Free!) | Virtual Reality Tutorial

If you want to make a Virtual Reality (VR) game, Unity is the program for you. 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 how to build 30 mini virtual reality games in Unity, check out our Unity 3D course!

Unity Personal is a FREE application that you can download from www.unity3d.com. Go to unity3d.com, and press the button “Get Unity now”, as in the following image.

You will be taken to a page with several versions of Unity that you can download. The Personal version is completely free, and you can publish games to the App Store with this version.

Click on the “Download Now” button in the “Personal” bar.

Then press “Download Installer”, which will download the helper file “UnityDownloaderAssistant”.

Open the “Unity Download Assistant” file when it is downloaded. Press “Continue” from the installation instructions. Read the terms of service, and press “Continue and Agree” if you agree with them.

Then you will see options for Unity components that you can download. Ensure that the top three items are selected (Unity, Documentation, and Standard Assets). You can select additional components to install extra files.

Press “Continue”. Once all the files have installed, you can open the Unity editor!

Unity is the number one platform for building VR games. You can build a variety of 2D and 3D games with this user-friendly program. To learn how to use Unity, check out our Unity 3D course, where we build 30 mini virtual reality games!

 

Display Property: CSS/HTML Crash Course (Free Tutorial)

The topic of today’s article is the display property in CSS. It lets you customize your website to look exactly how you want it to. 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

In HTML, each element is treated like its own box. For example, if you create a div and put some paragraphs or lists in it, that container and every item in the container is its own box.

This is important to know because, when styling your page, you will want to know what the boxes are and move them around. For instance, you will want to be able to say things like “put this beside this” and “put this on a new line”. These are important properties of HTML that CSS manipulates with the display property. This is known as the CSS Box Model.

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.

In the body tag, we will make three separate divs and then do some styling for the display property of those divs. A div is an empty container into which you can put items.  Let’s put one list into each div. First create a list of dogs:

  <div class="dogs">
    <ul>
      <li>Golden Retriever</li>
      <li>Labradoodle</li>
      <li>Beagle</li>
    </ul>
</div>

You don’t have to have a class, but since we are manipulating different divs, classes allow us to stylize each list separately. <ul> makes the list unordered. Below that list, create one for cats:

  <div class="cats">
    <ul>
      <li>Domestic Shorthair</li>
      <li>Calico</li>
      <li>Tabby</li>
    </ul>
</div>

Finally, let’s make a list for a navigation bar. Use a tags to insert links into the menu.

  <div class="links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About me</a></li>
    </ul>
</div>

The web address to which you want the list item to link goes in the quotation marks. Do not forget to close your tags.

Now open the CSS tab so that you can modify the display properties. First we will target the dogs div. Because we gave it the class name “dogs”, we can target the class name to apply styling to the items within the class. To select the dogs div, code the following in CSS:

.dogs {

}

To make each element in the three lists a block box, use the display property by coding the following:

.dogs {
display: block;
}
.cats {
 display: block;
 }
 .links {
 display: block;
 }

Within the parent container, the body, each list will sit on its own line. In the Output, you won’t notice a difference because display: block is the default behavior of the types of lists we created.

However, you don’t always want to use this type of display. For instance, you may want to have the dogs and cats lists on the same line. To achieve this, use the inline-block property, which is shown in the following box of code.

.dogs {
display: inline-block;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

Now the dogs and cats lists will be side by side in the Output, as long as there is enough room in the Output tab. This intelligent behavior is good for responsive web design because nowadays, a lot of traffic to sites is from mobile browsers.

There are other displays. One example is none, which makes a class disappear from the page:

.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

This comes in handy if, for instance, you use JavaScript to create a button and you want a list to appear only once a button is pressed.

Furthermore, the display inline makes elements sit on the same line as other elements without formatting them like a block:

.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

To apply inline on all three divs, use the format shown in the following code.

div * {
display:inline;
}
.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

You can use display on any CSS selector element, such as an image. A large part of learning to code is experimentation, so play around with creating more classes and IDs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Button Hover: CSS/HTML Crash Course (Free Tutorial)

Today we’re making a quick and easy button in HTML and CSS. We will look at some cool transitions that we can code to happen when we hover over the button!

If you are a beginner to coding, check out our FREE 30-minute beginners course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

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.

The code that visitors to your website will see goes in the body of the HTML. As such, in the body tag, let’s create a button!

We can do that using the button identifier. Give the button a class. A class is something you give to an HTML element that you know you’ll want to style or do something with later. In this case, label the class “button” and name it “I am a button!”. Your line should read: <button class=”button”>I am a button!</button>.

If you go to the Output tab, you will see the button “I am a button!” with built-in styling from HTML.

You can click on the button, but it doesn’t do anything at the moment. Jump over to the CSS tab. In that file, select the button we just defined. You can do that by calling the class name we gave it. Remember that we gave it the name “button”.

To call classes in CSS, we use the following format:

.button{
}

It’s a good idea to give classes names that are descriptive to what the classes are.

Next we will do a couple of things that will change the styling of the button. The first thing we’ll learn how to do is make rounded edges for our button. In CSS, we use border-radius to achieve this. To see an example, edit your code so it looks like the following:

.button{
border-radius: 50%;
}

Instead of 50%, you can use pixels to set the roundness of your button, such as:

.button{
border-radius: 4px;
}

You will notice a shadow around the button. To delete this, write border: none;.

.button{
border-radius: 4px;
border: none;
}

Here you can also resize the button. If you resize its font, the button will expand to fit the font. The following code shows how to change the font size.

.button{
border-radius: 4px;
border: none;
font-size: 20px;
}

Another button characteristic we can adjust is padding, which refers to the space between the text and the border of the button. For instance, we can have 10 pixels like so:

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;
}

Next we can adjust the width of the button. For instance, we can make the button’s width 200 pixels by coding the following:

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;

width: 200px;
}

We can adjust the height in a similar manner. Now, when you hover over the button, it still doesn’t do anything. To modify how the button looks when you hover over it, you can use a pseudo-selector. To call a pseudo-selector, first again call the class you put onto the button earlier on a new line. Then specify hover.

.button:hover{

}

Within the curly brackets, we can code for something to happen when you hover over the button. One thing we can do is change the background color of the button:

.button:hover{
background-color: lightblue;
}

When you hover your mouse over the button, the gray inside of it changes to light blue. When you move your mouse away, the button’s color goes back to gray.

Another thing we can do is change the button’s size. For this, you can use transform in CSS. You can call several attributes on this. For instance, scale changes the button size based on the number you input. For instance, to make the button 80 percent of its original size, write:

.button:hover{
background-color: lightblue;
transform:scale(0.8)
}

If you don’t want the button to jump in size when you hover over it, you can smooth out the transition. To do so, add a transition in the initial button class.

.button{
border-radius: 4px;
border: none;
font-size: 20px
padding: 10px;

width: 200px;
transition: all 1s;
}

This means that all transitions will take one second. You can make the transition slower with 5s, or faster with .1s. A smooth standard to go with is 0.5 seconds.

Now you can change how a button looks when hovered over! Feel free to experiment with the transitions and designs of your button. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes