first steps in unity3d - rochester institute of...

6
Programming for Digital Media Carousel Tutorial Page 1 of 6 First Steps in Unity3D The Carousel 1. Getting Started With Unity 1.1. Once Unity is open select File->Open Project. 1.2. In the Browser navigate to the location where you have the Carousel Tutorial Project folder and load it. 1.3. When you open this project it should appear something like this: 1.4. If this isn’t what you see, you need to open the scene: Under the Project tab, twirl open Tutorial Assets, and double-click on CircusScene. 1.5. So far the level consists of a terrain, a camera, a light, and a player. You will be adding a few more things to create a Carousel ride. 1.6. You can find all of the assets you will need for this tutorial in the Tutorial Assets folder. 1.6.1. The source files for assets you will need can be found in the Source Models folder; but for your convenience, the assets have been assembled into already setup prefabs (prefabricated objects) in the Assembled Prefabs folder. I highly suggest using these. 1.6.2. The three you will be working with are: Carousel, Rocket_Blue, and Rocket_Red. 2. Placing Your First Object 2.1. On the top of the Plateau you will see a grass star. This is where you will be placing your Carousel.

Upload: others

Post on 26-Oct-2019

9 views

Category:

Documents


0 download

TRANSCRIPT

Programming for Digital Media Carousel Tutorial

Page 1 of 6

First Steps in Unity3D The Carousel

1. Getting Started With Unity

1.1. Once Unity is open select File->Open Project.

1.2. In the Browser navigate to the location where you have the Carousel Tutorial Project folder and load it.

1.3. When you open this project it should appear something like this:

1.4. If this isn’t what you see, you need to open the scene: Under the Project tab, twirl open Tutorial Assets, and double-click on CircusScene.

1.5. So far the level consists of a terrain, a camera, a light, and a player. You will be adding a few more things to create a Carousel ride.

1.6. You can find all of the assets you will need for this tutorial in the Tutorial Assets folder.

1.6.1. The source files for assets you will need can be found in the Source Models folder; but for your convenience, the assets have been assembled into already setup prefabs (prefabricated objects) in the Assembled Prefabs folder. I highly suggest using these.

1.6.2. The three you will be working with are: Carousel, Rocket_Blue, and Rocket_Red.

2. Placing Your First Object

2.1. On the top of the Plateau you will see a grass star. This is where you will be placing your Carousel.

Programming for Digital Media Carousel Tutorial

Page 2 of 6

2.2. You can move the Camera around in the Scene using the mouse and ‘Alt’ (option on a Mac) key. Press the ‘Q’ button to get to select camera movement controls. Try using the 3 mouse buttons, scroll wheel and ‘Alt’ key to move the Scene Camera around in the world.

2.3. Grab the Carousel from the Project tab and drag it onto the Scene window. This places it in the world based on where you are looking in the Scene tab.

2.4. The ‘F’ key is your friend. Press it to focus on the Carousel you just placed in the Scene.

2.5. Now you will want to move the Carousel to the center of the star just slightly sticking into the ground. You can move Game Objects in your Scene, like the Carousel, in two different ways.

2.5.1. The first way is to drag it around in your scene. Select the Carousel you have placed in the Scene in the Hierarchy tab. Now press the ‘W’ key. If you didn’t already see three arrows in front of the Carousel you should now. You can grab and drag each of these three arrows to move the Carousel in the Scene.

2.5.2. The second way to move it around in your Scene is to modify its Position via its Transform. Select the Carousel in the Hierarchy and you will see a Transform and Animation for it in the Inspector tab. Modifying the X, Y, and Z values for position will move the Carousel in your world.

2.6. By now you should have the Carousel roughly centered in the middle of the star (for reference mine is at 985, 120, 875), but it’s a little small compared to it. Scale it up to fit the star. You can do this in a similar manner to position it. Either press the ‘R’ key with the Carousel selected and drag to scale it, or edit the X, Y, Z values in the transform (I scaled mine up 100, 100, 100).

2.7. For reference here is my giant Carousel placed in the star:

3. Dealing With Rotation

Programming for Digital Media Carousel Tutorial

Page 3 of 6

3.1. In 3D environments everything is located relative to some parent object. Every object we see listed in the Hierarchy is a child Game Object of the Scene itself. The Carousel is actually built from a number of child objects. These Game Objects form a hierarchy just like the directories on your computer (folders and files).

3.2. Whenever a Game Object has a triangle before it in the Hierarchy, it has least one child. Click the triangle next to Carousel to open the drop down list of child Game Objects. Here you should see base and top. Try selecting either one of these child Game Objects to see what part of the model it represents. You can also see that top has two child Game Objects, but we won’t work directly with these.

3.3. In case you haven’t figured it out yet, we are going to be rotating the top child Game Object to get the Carousel rolling. To do this we are going to have to write a short script to get it to do this at run-time.

3.4. In Unity we use the ‘Play’ button (big arrow at the top of the screen, keyboard shortcut ctrl-C or cmd-C) to get the game to run in the editor. The player is setup with a simple first-person control scheme so you can walk around the level and get a concept of scale, orientation, etc. Use the mouse and ‘wasd’ controls to move around. You will be using this ‘Play’ button to test your script shortly.

IMPORTANT WARNING about the play button! You can move game elements around even when the game is playing. However, whenever you make changes while the game is playing, the editor will automatically undo them all whenever you stop playing Be careful as this can be very frustrating to do a large amount of work only to realize you had the play button down!

3.5. We can use the tools to rotate the top similarly to scaling and positioning, but we can only do this for an initial setup not an animation that will happen at run-time. This is why we will need a script.

3.6. On the Project tab select the Create drop-down and select C Sharp Script. You will need to name this script uniquely by selecting the script and then clicking its name once. I have named mine ‘CarouselRotator’. Double clicking the script will open it in the script editor which will look like this if you are on a PC, or slightly different if on a Mac:

The Update function is what we are going to need to make this top rotate.  

3.7. Now make your code match this for the script:

Programming for Digital Media Carousel Tutorial

Page 4 of 6

3.7.1. We are making two class member variables: rotationAxis and rotationSpeed, a three-dimensional vector and floating point number respectively. As their names imply, they are the axis we will be rotating the Carousel around, and the speed at which we will be rotating it. We defined the rotationAxis as the up direction which is the vector defined as (0, 1, 0). We also defined the rotationSpeed as 60 but we will return to that shortly.

The Update function is called once per frame and is our main vein into the game. That is to say, once each frame this function will be called and executed. The one line in the Update loop tells the Carousel top’s Transform to rotate around the rotationAxis at the rate of the rotationSpeed * Time.deltaTime where Time.deltaTime gives us the amount of time that has passed since the last frame. Involving change-in-time here gives the game a smooth execution rate independent of the frame rate. This is essential in all video games.

3.8. Now that we have made our Component script we need to apply it to the top.

3.8.1. Select the top in the Hierarchy.

3.8.2. Without deselecting the top, drag the CarouselRotator script from the Project tab to the Inspector tab and release the left-mouse button. If asked about breaking a prefab, allow it. If you added the script to the Game Object correctly, your Inspector should look like this:

3.8.3. Now click the ‘Play’ button to watch your top rotate.

4. Adding In Some Rockets

4.1. We can’t have a complete ride without seats on the Carousel. We’re going to use the blue colored rocket (Rocket_Blue) and the red color rocket (Rocket_Red) for every other seat. They were created to the same scale as the Carousel so you will need to scale them up accordingly.

Programming for Digital Media Carousel Tutorial

Page 5 of 6

4.2. Drag one Rocket_Blue into the Scene and scale it up.

4.3. We need to make it a child of the top to get it in the right coordinate frame. To do this you need to select the Rocket_Blue in the Hierarchy and drag it over the top in the Hierarchy until you see the top highlighted and then release the left-mouse button. This should have childed it to the top. The Hierarchy should look like the image to the right.

4.4. Since there are eight bars for rockets on the Carousel and we want to do each color ship on every other bar, we will need four Rocket_Blue's. A simple way to get three more ships is to select Rocket_Blue and press Ctrl+D three times. This key press will make a copy in the Hierarchy of your currently selected Game Object.

4.5. Now position, scale, and rotate the four ships correctly. Remember the different controls can be selected with 'W', 'E', and 'R' or by directly modifying the values in each ship directly. You can move the ships, scale the ships, and rotate the ships just like the Carousel only there is a big difference now. The Carousel is parented by the Scene where as the ships are parented by the Carousel's top which means their positions, rotations, and scales are all relative to the top's which is relative to the Carousel.

4.6. When done it should look something like this:

5. Getting the Rockets to Rock Up and Down

5.1. To do this we are going to need to right another script. I have named mine RocketModulator.

5.2. We have already seen the Update function, this time we're adding the Start function. The Start function for each Component is called when the Game Object it is on is spawned in the Scene. For Game Objects already in the scene, it is called when the Scene begins. What we are essentially doing is moving the rocket ship up and down based on the Cos function. Here is the explanation

Programming for Digital Media Carousel Tutorial

Page 6 of 6

for each variable in the script:

ERROR in Update function above: transform.position is a setter that takes a value of type Vector3, so we cannot assign a value to transform.position.y. You can correct this by creating a new Vector3 with the proper values and assigning it to transform.position.

5.2.1. frequency affects how quickly the ship oscillates.  

5.2.2. magnitude affects how far up and down the ship oscillates.

5.2.3. initialY is where the initial height of the rocket is stored.

5.2.4. Time.time returns how many seconds have passed since the Scene started.

5.3. Drag this script onto each Rocket_Blue in the hierarchy. If you are having difficulty, make sure you are dragging the Component to a blank space in the Inspector with the correct Game Object selected. This may require you scrolling below all the already applied Components while holding onto the Component you wish to apply.

6. One last Asset

6.1. There still is the matter of putting four Rocket_Red into the scene. This has been left as a task for you to complete. Unlike the Rocket_Blue, this rocket is not oriented correctly. You will need to place four of them in the scene so that they appear attached to the poles and oriented correctly as well as scaled correctly. You also should make the different color rockets move differently from each other (so that they bob up and down at opposite times).

6.2. Hint: There are many ways this can be accomplished!