Creating an 2.5D Side Scrolling Game
Creating the 2D Player Sprite
Now that we have tested the Player Prototype and that the functions are all working as intended, we are going to go ahead and further develop the player by adding in the 2D sprite along with animations. The required animations that we are going to setup are as follows:
1. Running Animation
2. Jumping Animation
3. Attacking Animation
4. Idle Animation
Drawing the Sprites:
Just like how we drew the Canned Tuna Collectable, we are going to draw the 2D sprites in Adobe Illustrator. Since this is a 2D layout we can do the animations via frame by frame sprite sheets.
A sprite sheet is basically every single frame of the animation displayed in a single sheet, usually in an grid layout.
Before I started this project, I have already visualized that the player is going to be in a shape of a cat, an orange cat. My reference is basically my family cat named Mel. I wanted an simple and yet easy to animate character that I am able to animate within a few frames in Unity.
After a few trails and prototyping I decided to end up with this round like design with a very very stoic feature facial expression.
To start the frame by frame, I started with an grid so that each frame is set within the same box. This way when I import back to Unity, Unity can easily splice each drawing without issue.
When planning the Running/Movement animation I only wanted several parts to individually move to convey movement. Therefore I had the stubby legs move back and forth, the tail to move up and down and finally the ears to sway just a bit.
For the Jumping animation, due to the fact that I can only showcase 1 frame for jump, I only need one drawing.
For the attacking animation, there will be two types of animations occurring. 1st will be the player attack pose where the character will have a lean back figure. 2nd there will be quick swipes in the air that will convey “scratches”.
The character pose will end up have only 1 frame, but the air scratches will have several frames.
The final sprite sheets will looks like this:
Animating the Player:
Back in Unity, after importing the PNG file to the projects tab, we have to convert the file to a Sprite (2D and UI) format. Then if you don’t have the Sprite Editor installed, you can get it from the Unity Package Manager > Sprite 2D.
With that installed we can edit the sprite inside the editor.
First we need to splice the image, since we did the sprite sheet in a grid format, we can use the “Auto Splice” tool to quickly divide the image. Once you are happy with the sliced sections click save and return back to unity.
Select the first image/frame of the 2D character and drag it as a child object of the player. We are going to make it so that the animator and sprite renderer are children of the player so we can quickly swap the image in the future without affecting the actual player settings.
In the Sprite Renderer component we are going to add in the Animator so we can start working on the animations.
In the animations tab, we are going to create an new Animation and name it according to the animation style. (aka, if it is an running animation we will name the file “Running_anim”). Then we are going to draw and drop the sprites that are based on the running animation.
Next we are going to apply the same for each and every other animation sequence. For the Attack Sequence since this involves more than just the player sprite renderer it will require some proper setup.
The Attack animation sequence is going to be based on several different components. First is the overall animation of both the cat/player, then there is the actual frame by frame animation of the scratches. Finally is the invisible box collider hit box that will make contact with the overworld.
We first need to create an 3D cube as a child object of the Player. This will be our attack collider. Make sure that the Renderer is turned off.
Because it is a child object of the player, we can adjust it within the Animator without issue or conflict. We want the collider box and the swipe graphics to match in position and frame action.
To prevent unneccesary collision with the attack collider, I also animated when the collider is active and when it shouldn’t be active. I set it so that that first frame of the animation, the collider is unactive, and only at the second frame the collider is set active. This also happens vice versa near the end of the animation.
As for the jumping animation, since it is only one frame, I decided to just create the animation and drag the timer to 0.05 seconds so there is a default set timer.
After we have setup all the timeline animation, it is time to link everything together within the Animator tab. We need to set an new default Animation, which is typically assigned to the “Idle”. Then we are going to web together each of the different animation like the example shown below.
We need to make sure that certain animation states needs to return back to the default “Idle state”. An example would be the Running state, once the player finishes or stops moving, we want the character to return back to Idle. Both the Jump and Attack State are going to be triggered by the “Any State” because they can be triggered anytime any where along the Animated sequence.
Finally after the web connections, we are going to set up some parameters to prevent the state from triggering other states by mistake.
The Speed Parameter is an “Float Value”
The Attack and Jump are both “Triggers values”.
An example of setting up parameters is playing them under the “Conditions” section. If the Float value “Speed” is greater than 0.1 then we can transition from the Idle stat to the Running state. This also happens vice versa when the Float value “Speed” is less than 0.1. This way the only time the character is able to display the running animation is when there is an adjustment to the speed value.
The same can be done with the Trigger parameter for both the Jump and Attack state.
Toggling the Animation During Runtime:
To start, within the player movement script, we are going to gain access to the Animator.
Then to be able to toggle the animation during playtime we need to access the player movement script again. In each point of input action, we are going to insert the animation parameter triggers.
To the the Movement script, we need to pay attention to the fact that there needs to be left and right animation movement. To make sure that both directions get animated, we are going insert “Mathf.Abs” before we set in the direction.
Back in Unity, we should be able to test our our new Player!
