UNITY Lesson 1b:
Add a Character

ADD A CHARACTER TO THE GAME! Textures and Sprites Textures are image/movie files that give GameObjects a visual effect. (You probably don't want all your GameObjects to be invisible!) Textures can be two-dimensional (2D) or three-dimensional (3D). A 2D texture is called a sprite. All common file types (for example jpg, png, gif) are supported; Unity optimizes them for game use. Create a New Sprite A Sprite (capital ‘S’) is a GameObject with a ‘Sprite Renderer’ Component. The quickest way to get a new Sprite is to right-click in Hierarchy and choose 2D Object-Sprite. Do it now! For me, the default name is New Sprite. See (1a) and (1b) at right. Don't be worried if you don't see anything new in Scene View (yet)! Select/Rename GameObjects To select a GameObject, click it in Hierarchy or Scene View. Once selected, you can rename: in Hierarchy, click on the name part to rename in Inspector, change the text field at top that contains the name See (1c) at right. My Sprite will be a wolf character, so I'll change the name to Wolf. (Of course, you'll substitute your own character name for ‘Wolf’ in the rest of this lesson.) Gizmos Gizmos are a graphic overlay associated with a GameObject in a scene. Perhaps think of a Gizmo as a ‘special label’ that allows you to see/edit an otherwise-potentially-invisible GameObject. As an example, the camera icon representing Main Camera is a built-in Gizmo. How to Attach a Gizmo to a selected GameObject I attached a blue oval Gizmo to Wolf, and then made this Gizmo easier to see. See (2) and (3) at right for details.

(1a) Add a New Sprite GameObject. (1b) Note the Sprite Renderer Component in Inspector—this Component is what makes the GameObject a Sprite! (1c) Rename (if desired) in either red-circled location. (2) Add a Gizmo to Wolf by using the indicated dropdown menu. I chose a blue oval Gizmo; the GameObject name appears on the oval by default. (3) If you look really carefully in Scene View, you might see your Wolf Gizmo. However, it may (by default) be in the same position as Main Camera. For me, Main Camera and Wolf both have Inspector-Transform-Position set to (x,y,z) = (0,0,-10). Set Wolf-Inspector-Transform-Position to (say) (-3,2,-10) to re-position. Also, your Gizmo might have a 3D Icon effect being applied, which makes it more difficult to see. Uncheck 3D icons in Scene-[dropdown menu next to Gizmos] to make your Gizmos more visible.

What if your Scene View looks Different? If your Scene View doesn't match (4) at right, there are a few things to inspect: Show Grid A grid coordinate system on scenes is useful for positioning objects. Make sure Scene-[dropdown menu next to Gizmos]-Show Grid is checked. Toggle Gizmos Scene-Gizmos is a toggle to show/hide all Gizmos. Make sure you're got it showing your Gizmos! No GameObjects Selected None of my GameObjects are currently selected. If they were, Scene View might look different, depending on which tool is active (more on this later). Frame Selected (Centering a GameObject in Scene View) To center a particular GameObject in Scene View: select the GameObject in Hierarchy Move your cursor to the Scene View area. Press ‘f’ (for Frame Selected). In (4), I've frame-selected Main Camera.

(4) At this point (if you're following along), your Scene View should look something like this. If yours doesn't match, there are a few things to inspect (read at left for details).

Make your Character Look More Realistic! At this point, the Wolf GameObject doesn't look like a wolf! Look through your Assets; find an image to represent your character. Drag the image into the Sprite field of the Sprite Renderer Component. See (5) at right.

(5) Drag a desired image into the Sprite field of the Sprite Renderer Component.

TOOLS FOR WORKING WITH GAMEOBJECTS There are a variety of tools at the left of the toolbar for working with GameObjects. These tools are briefly discussed here. Zooming In either Scene View or Game View, you can zoom in/out as follows: using the scroll wheel with the Hand Tool selected (see below): alt-rightClick-drag The Scale Tool My wolf came in pretty tiny, and was almost completely hidden by its Gizmo. The scale tool can be used to make it bigger, as follows: Select the Wolf GameObject. Click Toolbar-Scale Tool (see (1)) to make it active. (It is highlighted when active.) Toolbar-Scale Tool With Wolf selected and Toolbar-Scale Tool active, you will see ‘Scale Tool handles’ appear on Wolf. (These ‘Scale Tool handles’ are an interactive Gizmo!) To scale Wolf proportionally, drag the center rectangle on the Scale Tool handles. If you drag the horizontal/vertical handles, the image is stretched horizontally/vertically (and hence distorted).

(1) Use the Scale Tool to resize your character.

Play with some of the other Toolbar tools.
Remember, you can undo ( cntl-z) to get back to a desired state.

Move Tool Drag an arrow to move the GameObject up/down left/right. Snap to Increment Hold down cntl while dragging the Move Tool handles. Snap Increment Settings Main Menu-Edit-Snap Settings Toolbar-Move Tool Move Tool handles	Rotate Tool Drag either outside circle to rotate the object in the scene plane. Drag either of the horizontal/vertical ‘crosshairs’ to rotate in space. Toolbar-Rotate Tool Rotate Tool handles	Rect Tool This tool combines moving/scaling/rotating. Move: Drag inside the rectangle to move. Scale: Drag any corner/border to scale. (There's no easy way to scale proportionally with this tool.) Rotate: Position your cursor just beyond a corner. The cursor changes to a rotation icon; drag to rotate. Toolbar-Rect Tool Rect Tool handles
Move, Rotate, Scale and Rect all alter the Transform Component of a GameObject, hence are referred to as Transform Tools. (Take a look at the Inspector Window as you play around!)

Hand Tool In Scene View, click-drag to move the camera around. This allows you to inspect different parts of a big scene. There are no Hand Tool handles. In a 2D project, you can temporarily switch to the Hand Tool at any time by holding down the alt key. Super convenient! You can also use arrow keys (up/down/left-right) to move around the scene. Simultaneously hold down the Shift key to move faster. Toolbar-Hand Tool

Move, Rotate or Scale selected objects This tool is a convenient combination of the Move, Rotate, and Scale tools. The handles work the same as the individual tools. The Move and Scale handles overlap: inner parts will Move; outer parts (past the arrows) will Scale. Move, Rotate or Scale selected objects Tool handles

QWERTY Keyboard Shortcuts From almost anywhere in the Unity Editor, pressing ‘q’, ‘w’, ‘e’, ‘r’, ‘t’ or ‘y’ gives you the tools indicated below: tool shortcuts are mapped to the keyboard ‘QWERTY’ keys

Play Mode versus Edit Mode The Unity Editor has two modes: Play Mode and Edit Mode. In either mode, you can be in Scene View or Game View. Entering Play Mode Use Play Mode to see how your published game plays. To enter Play Mode, use keyboard shortcut cntl-p, or use the buttons located near the center of the Toolbar: Play-Pause-Step (hover over buttons to get tooltips) Toolbar-Play (the leftmost button) is a toggle to start/stop game play. If you're not in Play Mode, then you're in Edit Mode. When in Play Mode: the Toolbar-Play button is highlighted the entire screen darkens (ever-so-slightly) to remind you that you're in Play Mode You can edit GameObjects (in either Scene View or Game View). However: Any changes you make while in Play Mode are temporary, and are reset when you exit Play Mode! To make edits that persist, be sure to make them in Edit Mode. This frustration can occur: You play your game. While playing, you tweak things to make them perfect. You exit Play Mode and lose everything you just did (sigh). To try and prevent this frustration, you may want to make the Play Mode background color more dramatic, as follows: Main Menu-Edit-Preferences (1a) Navigate to: Colors-General-Playmode tint Click inside the color rectangle to bring up a color wheel. (If you don't see this color rectangle, enlarge the window.) Note: the eyedropper tool (far right) allows you to select an on-screen color. (1b) My default colors were: (R,G,B) = (204,204,204) hexadecimal: CCCCCC Change to a more dramatic color.

(1a) change the Play Mode background color; click inside the color rectangle to bring up a color wheel (shown below) (1b) the color wheel with the default color

POTENTIAL PROBLEMS (AND HOW TO FIX THEM) No Character in Camera Preview? (1a) Select Main Camera. Your character might not show in Camera Preview. (Mine didn't.) If you're lucky and your character is showing, still read this section. You might run into this ‘not-appearing’ situation in the future, and it can be really frustrating (until you discover the simple solution). No Character in Game View? (1b) Enter Game View (by clicking the Game tab). No Wolf in sight. No Character in Play Mode? Click Toolbar-Play to play your game. (It may take a few seconds after clicking Play for Unity to do its magic. Be patient.) Still no Wolf in sight. Click Play again to stop game play. POSSIBLE SOLUTIONS Is Wolf Inside the Main Camera View Rectangle? (1c) When you enter Game View, everything inside the Main Camera view rectangle is shown. Wolf is clearly inside this view rectangle. So, why isn't Wolf showing? Game Objects Must Be In Front of Main Camera to be Visible The $z$-axis is perpendicular to the scene. The positive $z$-axis goes into the scene (away from you). For a GameObject to be visible in Game View, it must be in front of the camera. That is, a GameObject must have a strictly greater $z$-value than Main Camera to be visible. (1d) For me, both Wolf and Main Camera had $\,z = -10\,$ by default. (Why? I had frame-selected Main Camera just before creating Wolf, so Wolf came in with the same transform position coordinates.) This is why Wolf wasn't initially visible. To solve the problem: (2a) Set Wolf-Inspector-Transform-Position-z to (say) $\,-9\,.$ (2b) Now, Wolf shows in Camera Preview, Game View, and Play Mode! (2c) Note: You can toggle Gizmos on/off in Game View. Clipping Planes Actually, the visibility of a GameObject in Game View is not quite as simple as ‘being in front of the camera’. Clipping Planes define distances from the camera where Unity starts/stops rendering GameObjects. Clipping Planes-Near gives the closest point to a camera that Unity renders GameObjects. (3a) By default, Main Camera-Inspector-Camera-Clipping Planes-near is $\,0.3\,.$ So, a GameObject must be at least $\,0.3\,$ units from the camera to be seen. If Wolf’s $z$-value is (say) $\,-9.9\,,$ it won't be seen (too close to camera). But, if Wolf’s $z$-value is $\,-9.7\,$ or greater, it will be seen. Congratulations! Congratulations on the first appearance of your character in game play! Next, let's get the character moving.

(1a) Wolf isn't showing up in Camera Preview. (1b) Wolf isn't showing up in Game View, or when you play the game. (1c) Wolf is clearly inside Main Camera's view rectangle. (1d) Note that the $z$-coordinate of Main Camera is $\,-10\,.$ (Wolf also had a default $z$-coordinate of $\,-10\,.$ ) (2a) Set Wolf-Inspector-Transform-Position-z to (say) $\,-9\,$ (which is greater than $\,-10\,$). (2b) Wolf is now visible in Camera Preview, Game View, and Play Mode! (2c) Note: You can toggle Gizmos on/off in Game View. (3a) Clipping Planes define distances from the camera where Unity starts and stops rendering GameObjects. (3b) Note that Gizmos is now toggled ON, and the Wolf label is visible in Game View.

PREVIEW ANIMATIONS It's helpful to preview animations, to select ones for use in the game. (1) Single-click an animation to attempt a preview. Unfortunately, you may see the message: No model is available for preview. Please drag a model into this Preview Area. Working in the Preview Area (2a) Get a Model for Animations Grab Wolf from Hierarchy; drop it into the Preview Area. You only need to do this once (if you use the same character to preview all animations). (2b) Zoom Use the scroll wheel to make Wolf bigger. (2c) 2D View Click 2D (more than once) for various viewing options. (2d) Play the animation Click the Play button to run the animation. Change the animation preview speed with the slider. You can operate the slider while the animation is playing.

(1) Single-click an animation to attempt a preview; however, ‘No model is available for preview’ (2a) drag Wolf from Hierarachy into the Preview Area (2b) use the scroll wheel to zoom (make Wolf bigger) (2c) click 2D (more than once) for various viewing options (2d) play the animation; control the animation preview speed

Let's get Wolf moving in the game!

Keep Your Files Organized Get in the habit of good file organization. Create a top-level Animations folder at Project-Assets. Inside this new folder, put two subfolders: Animations and Controllers. See (0) at right. As you'll see shortly: all ‘ .anim ’ files will be saved into the Assets-Animations-Animations subfolder all ‘ .controller ’ files will be moved into the Assets-Animations-Controllers subfolder Locate the Sequence of Images to Convey the Impression of Motion You may need to look around. You can see where I located mine in (1) at right. I'll refer to this set of images as the Animation Clip. Note: There are ways other than what I show below to apply animation(s) to Wolf.

(0) Develop good file organization habits. In the Project area, use RightClick-Create-Folder. (1) the sequence of images to convey moving from 2 feet to 4 feet; call this the Animation Clip

Select All Images in the Animation Clip click on the first image in the Animation Clip hold the Shift key; click on the last image in the Animation Clip This selects all the images, as shown in (2).

(2) select all images in the Animation Clip

Drag the Selected Animation Clip onto Wolf After dragging the Animation Clip onto Wolf in Hierarchy, you're prompted to create a name for the animation. Keep the extension ‘.anim’, but change the name to something meaningful for your animation. I named mine:   2To4.anim Change the file location to your Assets-Animations-Animations folder. Unity does several things automatically for you, as shown in (3abcd) at right: (3a) Wolf has a new Component: Animator (3b) An Animator Controller was created: Wolf.controller (The default name comes from the GameObject where you dragged the Animation Clip.) (3c) This controller has been added to the Controller field in the Animator Component for Wolf. (3d) A (previewable) animation file was created: 2To4.anim (You chose the name and location for this file.) Wolf.controller has been ‘linked’ to   2To4.anim . (More on this momentarily.) (3e) Drag Wolf.controller into Assets-Animations-Controllers; rename it to WolfController.controller. The new name (and new location) is automatically updated in the Wolf-Inspector-Animator-Controller field.

(3) drag the selected Animation Clip onto Wolf; several things happen automatically (discussed at left) (3e) Drag Wolf.controller into Assets-Animations-Controllers; rename it to WolfController.controller. The new name (and new location) is automatically updated in the Wolf-Inspector-Animator-Controller field.

Play your game! See Wolf move! You'll see Wolf going from 2 feet to 4 feet (over and over and over again). Undoing the Animation If you want to temporarily suspend animation on a GameObject, just uncheck its Animator Component. If you decide you no longer want an animation on Wolf, you can completely undo what you did as follows: Remove the Animator Component from Wolf, using the dropdown menu at the top right of the Animator Component. See (4) at right. Delete the controller and animation files that were automatically created: WolfController.controller and 2To4.anim However, we do want the animation, so don't delete anything! The animation is about to get better...

(4) removing the Animator Component (if you no longer want an animation on Wolf)

Drag More Animation Clips to Wolf Find (at least) two more animations that (together with the first) naturally create a ‘loop’. For me, it's natural to: move from 2 feet to 4 feet (using files named 2To4) run on all 4 feet (using files named 4Run) move from 4 feet to 2 feet (using files named 4To2) This cycle can repeat over and over again. As before, drag the new Animation Clips onto Wolf; relocate/rename files as needed. You should now have (at least three) animation files. No new controller is created: each animated GameObject has a single Animator Controller. See (5) at right. No new Animator Component is created: each animated GameObject has a single Animator Component. However, a GameObject can use many animation files. See (5) at right. An information box in the Animator Component indicates that three Animation Clips have been added to Wolf. See (6) at right. Only the First Animation Clip is Showing when Playing the Game Now, several Animation Clips have been added to Wolf. If you play the game, however, you only see the first one. That situation is about to be fixed!

(5) After a first Animation Clip is dragged onto Wolf, any subsequent clip generates only a new animation file (no new controller file). Every animated GameObject has a single Animator Controller and a single Animator Component, but can use many animation files. (6) ‘Clip Count: 3’ reflects that three Animation Clips have been added to Wolf (For me, this information was only updated after playing the game.)

We want Wolf to go from 2 to 4 feet, then run on 4 feet, then go from 4 feet to 2 feet, and then repeat.
The Animator Controller is in charge of managing these transitions (and other things), with help from the Animation State Machine. At any given time in a game, a character is engaged in some kind of ‘action’ (where an ‘action’ can be doing nothing).
These actions are referred to as states.
For example, if you ask ‘What state is Wolf in?’ (in a more elaborate game) the answer might be:

• going from 2 to 4 feet
• running on 4 feet
• going from 4 to 2 feet
• jumping
• idling

and so on. Characters may have restrictions on their next state, based on their current state.

For example, we don't want Wolf going from 2 to 4 feet, and then running on 2 feet.
However, going from 2 to 4 feet and then running on 4 feet is fine.

The options for the next state that a character can enter from its current state are called state transitions. Taken together, these three items form a state machine:

• states: the set of states
• state transitions: the set of state transitions
• current state variable: a variable to remember the current state

Animator Window Double-click WolfController.controller. The Animator Window will open. See (1) at right. The Animator Window allows you to create, view and modify Animator Controller assets. My initial view in the Animator Window had stuff hidden. Click in the Animator Window and press the ‘a’ key (for All) to see everything. See (2) at right. Layout Area of the Animator Window The main section with the dark grey grid is the Layout Area. The Layout Area is used to create, arrange and connect states. You can click the ‘eye’ (see (2)) to expand the Layout Area. Then, click the ‘squinting eye’ (see (3)) to restore the original view. In the Layout Area, you see a graph diagram: Nodes/Rectangles Represent States Each node (rectangle) represents a state. When you dragged the Animation Clips onto Wolf, the 2To4, 4Run, and 4To2 states were created. Entry, Exit and Any State are automatically supplied. Arrows Represent Transitions Arrows between nodes represent transitions. One arrow, from Entry to 2To4 (which was the first Animation Clip dragged to Wolf) has been supplied for you. Think of the current state (of Wolf) as a marker placed on one of the nodes. This marker is only allowed to move along an arrow to reach another node. Default State There is always a default state. Unity chose the first Animation Clip dragged onto Wolf as the default state (but this can be changed). The default state is colored orange; there is always an orange arrow from Entry to the default state. To Change the Default State Right-click on a node; select Set as Layer Default State from the dropdown menu.

(1) After double-clicking WolfController.controller, the Animator Window opens. However, there are things hidden outside this view. Click in the Animator Window and press the ‘a’ key (for ‘all’) to see everything. (2) Here's what it looks like after pressing the ‘a’ key. Click the ‘eye’ to expand the layout area. (3) Click the ‘squinting eye’ to restore the original view.

Rearrange the Layout Area Click and drag nodes to make the Layout Area more meaningful to you. The visual layout is for your benefit only—it changes nothing in the game. Arrange your nodes to look something like (4) at right. Create New Transitions To make a new transition from node A to node B: Right-click on A. Select Make Transition from the dropdown menu. (An arrow will appear, attached to your cursor.) Click on B. Create the ‘transition loop’ shown in (5). (Note: There is a transition from 4To2 back to 2To4.) Play the game again to see your loop of Animation Clips!

(4) Click and drag nodes to make the Layout Area more meaningful to you. (5) Create the ‘transition loop’ shown here. Play the game again to see your loop of Animation Clips!

Unity's default settings for my states and transitions worked okay, but not great. A few tweaks (keep reading!) made the animation better. I wanted Wolf to bend down (2To4) and get back up (4To2) a bit slower. I also wanted Wolf to run (4Run) faster. In the Animator Window, click on a node to adjust a state. See (1) at right. Speed has a default value of $\,1\,.$ Change this value to play the associated Animation Clip faster/slower. For example: $\text{speed} = 2\,$ makes it twice as fast $\text{speed} = 0.5\,$ makes it half as fast $\text{speed} = 1.5\,$ makes it $\,1.5\,$ times as fast; and so on I set: 2To4-Speed to $\,0.6\,$ 4To2-Speed to $\,0.6\,$ 4Run-Speed to $\,1.5\,$

(1) Click on a node to adjust a state. Speed has a default value of $\,1\,.$ Speed greater than $\,1\,$ makes it faster. Speed (strictly) between $\,0\,$ and $\,1\,$ makes it slower. Reset (restore defaults) using the dropdown in the upper right. Click where indicated to adjust the transition to the next state.

(2a) To adjust a transition, you can click an arrow in the Layout Area. Or, use the method indicated in (1) at right. Depending upon the Animation Clips being joined, you may want one to ‘merge’ into the next, rather than completely ending one and then abruptly starting the next. Or, you may want a clip to play more than once before going on to the next. You can do all this (and more). For a particular transition/arrow, I use this terminology: current is at the beginning of the arrow next is at the end of the arrow (2b) For us, if Has Exit Time is unchecked, then the current state will not exit. It will just keep playing over and over again. Try it! Suppose Has Exit Time is checked, and Fixed Duration is unchecked. (Note: You may need to expand the Settings menu.) Then: The value in Settings-Exit Time determines the percentage of the current Animation Clip that plays before starting the ‘merge’ with the next clip. For example, $\,0.9\,$ means that $\,90\%\,$ of the current clip plays before starting the ‘merge’. I want Wolf to run three times as long as the 4Run Animation Clip. Therefore, I set: Settings-Exit Time to $\,3\,$ For my other transitions, I set: Settings-Exit Time to $\,1\,$ Since $\,1 = 100\%\,,$ all the frames in the current Animation Clip will play. The value in Settings-Transition Duration (%) determines the percentage of the current Animation Clip used for the ‘merge’. ‘Merges’ don't make much sense with very few frames. (For example, 2To4 and 4To2 only have 5 frames each.) So, for all my transitions, I set: Settings-Transition Duration (%) to $\,0\,$ (2c) Drag the indicated marker to preview the animation. This is much easier than repeatedly playing your game to see how different settings work. Remember, you can use your scroll wheel in Preview to make the character bigger. Wolf is now moving, but it is only moving in place. Wolf isn't changing its position on the screen. Getting Wolf to change position is an opportunity to enter the world of scripting!

(2a) You can click an arrow to adjust a transition. (2b) Has Exit Time (when checked) is used to control how much of the current Animation Clip is played before ‘merging’ with the next. (2c) Drag the indicated marker to preview the animation. Reset (restore defaults) using the dropdown in the upper right.