What's up Game Developers? CouchFerret here, and today we'll make an archer character and teach him how to move around. We'll use some scripting to change his position by pressing the arrow keys, and then we'll give him running animation with a sprite sheet and an animator controller. If it sounds interesting, then stay with me, and consider subscribing so you won't miss any future progress on this game. Cool, let's begin! Let's open up Unity, and create an empty scene. I chose 2D as the template when I created the project, so a few things are already set up. Let's go to File/New Scene, then File/Save Scenes and name it BasicMovementAndAnim. Before importing the sprite sheet, let's just change the background color. We need to select the scene's Main Camera, set Clear flags to Solid color and Background to this greenish color #84BB67. Okay, let's continue with the sprite sheet. An animation sprite sheet is an image which consists of multiple frames of an animation. We can create the illusion of movement by rendering frames in quick succession, like in cartoons. Let's import the sprite sheet! First, we need to create a folder for graphics, and to import anything into Unity, we can just drag and drop it into the desired folder. Before we can start using the sprite sheet, we have to make sure to set the necessary parameters. Without it, the image would look ugly. For pixel art we have to set Filter Mode to Point (no filter) and Compression to None, then we hit "Apply". Okay, it looks good now, but for Unity it's still just an image and not a sprite sheet. To solve this issue, we need to change the Sprite Mode to Multiple, this means that this is an image which consists of multiple images. Then we have to go to the Sprite Editor, hit Slice and set it to Grid by cell size of 30x30 pixels, then Slice and Apply. What was a single image before, is now multiple images. Now, let's create our little archer and name it Keith. We'll make Keith run around in our grassy world. The first step is to make the archer move left and right without playing the animation. He will just slide. Let's drag and drop the BasicMovement_2 sprite into the scene. He's a bit small so we have to decrease the Size of the Main Camera to 1.8, which makes everything bigger. For clarity, let's create a folder for scripts as well. Okay, now we can open up a new C# script. We'll access the Left and Right Arrow Key from code with Input.GetAxis("Horizontal"), this gives back a value between -1.0 and 1.0 depending on which arrow key we press. To move Keith horizontally, we have to change his transform.position on the X axis. His position is a 3 dimensional vector representing a point in space, so to add the movement to his current position we have to make sure the movement itself is also a Vector3. (Types should always match) Let's create a Vector3 variable which will represent the movement. Vector3 horizontal = new Vector3(Input.GetAxis("Horizontal"),0.0f,0.0f); The X coordinate contains Input.GetAxis("Horizontal") and the Y,Z coordinates are zeroes. Now we can change Keith position with transform.position = transform.position + horizontal but because this code is in the Update() function, it means that it will run in every frame. So a Time.deltaTime multiplier is required for horizontal to smooth the movement out. Our script is ready. Let's attach this BasicMovement script to Keith. Now when we hit play, and press the arrow keys, Keith will move. Let's try it out! Cool! But we still have work to do. Previously we imported the sprite sheet, but to use it we have to make Animation objects out of it. We need to select Keith in the Hierarchy window and open Window/Animation/Animation. Let's hit Create and create a folder for Animations, then save his first animation as RunLeft. By hitting Create, Unity also created an Animator Component for Keith. Okay, let's drag the sprites from 0 to 5 and drop it to the timeline of the animation. Now if we press Play then it will be really fast, Keith is running like a madman. Let's slow him down a bit. We need to change the sample rate to 12, which means that the animation will be played at 12 frames per second. Now, the animation looks much better. We have to make sure that the animation is set to loop. In the Animation window, let's create a new Clip called RunRight. We need to drag and drop from 6-11 similarly to last time and also change the sample rate. The last animation today is an Idle one, it's just a standing still image of Keith. We'll use the number 2 frame from the sprite sheet, and also change the sample rate. We also have to make sure that both animations are set to loop. So we've made all the necessary animations to animate Keith. We have RunLeft, RunRight, and Idle. Now it's time to tell Unity which animation it should play and when. In Unity, the logic behind character animation is handled by an Animator Controller asset. The first time when we hit Create to make the first animation, Unity also created an Animator Controller asset, and assigned it to Keith's Animator Component. The Animator Controller is a state machine. A State Machine is an abstract machine that can be in exactly one state at any given time. The State Machine can change from one state to another in response to some external inputs; the change from one state to another is called a transition. A State Machine is defined by a list of its states, its initial state, and the conditions for each transition. In Unity, every animation is a state, and the current state that the machine is in will govern the character. So if the machine is in the RunRight state then Keith will look like he is running to the right. Let's select Keith and open up Window/Animation/Animator. Let's set the Idle animation as the Layer Default. It means the machine or animator controller will start in the Idle state, so Keith won't start running around without us hitting the arrow keys. Let's reorganize the states and add a float Parameter named Horizontal. This will be the input for the state machine to make transitions from one state to another. The Animator Controller has special states, the Any State is a shorthand way of adding the same outward transition to all states in your machine, and Exit will forward us to Entry in this case, and then to Idle. Now we need to create a transition from Any State to RunLeft, and select it to uncheck Fixed Duration, set Transition Duration to 0 and also uncheck Can Transit To Itself. Every state can now transition to RunLeft if we set the conditions correctly. The Horizontal Parameter will be negative if Keith moves to the left, and positive if he moves to the right. We have to add a Condition with Horizontal Less than 0. It means, if Keith moves Horizontally with less than 0, then the State Machine should be in the state RunLeft, and by that the RunLeft animation will be played. Then, to make him stop running at some point, we need to create a transition from RunLeft to Exit, and uncheck Has Exit Time and Fixed Duration, and also set Transition Duration to 0. The transition's condition should be Horizontal Greater than -0.001. It's a bit weird because it should be greater than and equal 0, but there is no equality operator here for floats, so we can just pick an arbitrary negative number really close to 0. By doing the same things for the other side, except the two conditions, Keith will be almost ready to run. The first condition should be Horizontal Greater than 0, and the second should be Less than 0.001. If we tested it now, no animation would play, because we haven't set the animation parameter's value. Let's go back to the code editor, and declare an animator variable, so we can access Keith's animator component. We need to set the Horizontal Animation Parameter to Input.GetAxis("Horizontal"). But before hitting Play, we have to drag Keith's animator component to his BasicMovement component's variable to fill the declared animator variable. Finally, Keith is ready to run around the world. Fantastic! That's it for today folks! Next Saturday, we will continue with Top Down character Movement and Animation, so be sure to subscribe and leave a thumbs up! If you have any questions from today, feel free to ask and I'll try to answer all of them. See you next time!
