Let’s create a simple melee combo system!

The first game that comes into my mind when it comes to combos is Devil May Cry franchise. You can destroy a swarm of enemies with a single combo. The game is all about combat combos, you unlock skills that adds more moves to your combos, you breath combos, the game even rates your combos. So I thought to myself, why don’t I create one in Unity.

So, lets break down the problem, as usual, to smaller problems and tackle them one by one:

  1. Animations… We have to have animations that will make our combo.
  2. We need to create a state machine in Unity Animator so that the animations transition from one to another based on the player’s input.
  3. Speaking of input, we need to capture the player’s input (Mouse clicks) and as long as the player clicks the button within a certain time during the animation play, the next animation plays. If the player does not click the mouse with certain time, the character resets back to the idle state.

Sounds simple right? It is actually a pretty simple problem. Lets explore the solution step by step.

1. Getting the Animations:

I am not an animator. I know the basics on how to animate characters, but I don’t have that artistic sense on making super cool animations, especially for fighting games. The best tool you can use to get free animations is mixamo.com. You can visit that site, create an account for free and download as many animations as you like. The key thing here, is to make sure that the animations you are selecting for your combo match; which means, if the player character starts the combo by swinging a sword, then delivers a kick; you need to make sure that sword swing animation leads to the kick. Otherwise, the combo will look bad. This is very important, it is not purely technical, but a bit more of an artistic sense. The animations I picked are as follows:

Figure 1: The animations of the combo

You can also download the character models from mixamo.com as well and they are all rigged animations with Humanoid rigs. which is pretty cool.

I have also downloaded a Katana sword from GameDevHQ’s legendary filebase. After putting the Katana at the right place of the rig, we are ready to jump into the animations.

2. Creating the animation state machine

Unity’s animation system offers a very powerful tool to plot the way animations will work. Using Unity’s Animator you can create a state machine to link different animations together based on certain conditions. Now, lets think about how the combo will work. As you can see in figure 1, we have 5 attack animations and an idle animation. The player will always start at the idle animation which means that we will make the idle animation our default state. Then the combo, in its perfect state, will flow like this:

Idle > Attack1 >Attack2 > Attack3 > Attack4 >Attack5 >Idle

If the player keeps pressing the input buttons at the right time, the animations will play as per the diagram above, but if the player misses an input, at any attack state, the animation should then move to the idle state. This means that with every Attack state, we want to link that state with a transition to the idle state that gets played if the player does not press on the mouse button within the designated time frame. The state machine will look like this:

Figure 2: The combo state machine

As you can see, each animation has a two transitions, one to the next animation and another to the idle state. But, how do we do the transition. We need some kind of a trigger that we can set to trigger the transition to any animation. Luckily, Unity allows us to create parameters that we can call from the code and create conditions based on those parameters to transition from one animation to another. The best parameter I could think of to make this work is to use trigger parameters and set them when needed. If the parameter is set, the transition to the corresponding animation will play, if not, then the animation will transition to the idle state.

Figure 3: The trigger parameters for the animation transitions

Since we have five attack animations, I created five trigger parameters, each correspond to each animation; and within each transition I set the transition going to an attack animation to run if its corresponding attack trigger is set, all the transitions that are going from the attack animations to the idle animation are player on Exit Time. Here is an example of both.

Figure 4: The transition from the idle animation to the first attack animation
Figure 5: The transition from the first attack animation to the idle animation

As you can see in figures 4 and 5, when moving towards an attack animation the trigger parameter has to be set. If the animation finishes playing, then the animation state goes to idle.

With the animation state machine set, lets control the flow of animations through code.

3. Controlling the combo animation through code

On the player character, I created a script called ComboManager; this script handles the combo transitions and the user input. I started by creating the following variables:

Figure 6: The variables of the ComboManager

The first variable is an instance of the animator so we can call in the triggers and set them to do the animation transitions. The Combo Delay variable is the maximum amount of time the player can press the input key before the combo resets to the idle state. The numClicks variable counts the number of clicks the player has pressed to determine the animation state the character should move to. The lastClickTime captures the last time the player has pressed the input key.

In the Update() function then looks like this:

Figure 7: The ComboManager’s Update() function

I start by checking whether the time of the last input press has exceeded the threshold or not, if it did, I reset the number of clicks to zero that none of the animation events gets triggers (this will be shown later in the article)

Then I check for user input. For this demo, I use the mouse left click. If the left click is pressed we do multiple things:

  1. We capture the time in which that click was pressed, so we can compare it to the time threshold.
  2. increment the number of clicks to 1.
  3. Play the first attack animation but setting the trigger parameter “Attack1”. now the first attack animation is playing (Use a bit of your imagination to follow with the next part)

Finally I am just clamping the value of numClicks to be between 0 and 5 since I only have 5 animations for now.

We need then to set certain conditions to tell the animation controller to either transition to the next attack animation, or to the idle animation. Here is the problem. I want the player to press the mouse button before certain frames in the animation so they can land the next attack successfully. This means that within the animation we want to track the user input within certain key frames. How can we trigger some code when we reach to a certain key frame in Unity? The answer is, Animation Events.

Animation events allow you to enter an event in the animation dopesheet in which if the Unity at that key frame will execute a function of your choosing. Selecting where to put that animation event depends on your animations and where you want to transition to your combo attack. Simply move the animation cursor to the key frame you want and click on the Add Event button in the Animation tab. This is demonstrated in the figure below:

Figure 8: Adding an animation event in the dopesheet

As you can see, I am creating an event in the first attack animation so I can check for input to move to the second attack animation. What I did I figure 8 is that I picked the right key frame where I think will blend well with the next animation and created an animation event. Then in the top right corner, I selected a function called ComboAttack1Transition(). What is that function and what does it do?

In the ComboManager() script I created the following function:

Figure 9: The ComboAttack1Transition() function

This function does only one thing, to check whether the player at that point has clicked the left click two times or greater. If the condition is true, the “Attack2” trigger is set and the animation controller will transition to the second animation If not, then the first attack animation will continue playing until it finishes and then it will move back to the idle animation automatically. This same thing is done for all the other animations. In the second attack animation I picked the right key frame that blends well with the third attack animation, set an event and call the function ComboAttack2Transition() to check for the user input. The transition functions in the ComboManager script look like this:

Figure 10: The transition functions that are called from the animation events

The reason why we do not have a fifth transition function is because when the fifth attack animation is playing, we want it to transition to the idle animation when it finishes. That’s why on the transition from the fifth attack to the idle animation, the condition is set to run on Exit Time.

With that we have a working melee combo system.

Figure 11: The Combo System in Action

Devlog 2: Level Design

One of the challenges I had when creating the levels is art. It is a skill that I am working on improving but at the same time I need to be productive and take a fast run in order to finish the game on time. I had to find a solution that can make my life a bit easier when it comes to the arts.

To start, I used the sprites that Jonathan used in his course “The Ultimate Guide to Mobile Game Development” and I used the skills I learned in that course to build a tile-map for the first level. Now I have a simple level where I used the dungeon sprites that were provided in that course. Then I decided to build another level with the same tileset, but I was thinking that I shouldn’t have all the levels having the same dungeon-y theme. I need to create levels with variable themes so that levels won’t be boring.

Level 2 of Insanity
Level 2 of Insanity

Thankfully a friend of mine, who is a graphic designer, referred me to a website called Freepik. This website has a big set of sprites that you can use to build your own 2D game varying from 2D characters with their animations to tilesets to GUI items and a lot more. Basically what I did is that I downloaded almost all the tilesets from that website and I had to find my way through Adobe Illustrator to extract those tiles, make a sprite sheet with the correct sizes so I can slice them properly in Unity and create the tilemaps. I have to admit, the results turned out to be great! So if you are a game developer who is not good at art like me, I recommend that you use this website as a good start.

Then it came the time to decide which traps should I implement to make the game challenging and at the same time fun. The idea that I have is that I wanted the player to advance through the game bit by bit. I don’t want level one to have tough traps and tricky jumps, otherwise, the player will get bored from the game; but rather, let’s start with an easy level and get tougher the more the player advances through the game. The traps that I am initially thinking about are the following:

  1. Spikes (of course)
  2. Circular Saws (stationary and moving).
  3. Fire (bring the heat!)
  4. tracking missiles? (not yet sure whether I should include this or not.)

When it comes to the behavior of those traps, I tried as much as I could to make the behavior of those traps modular. So basically I have built a universal class called TrapDamageBehavior. This class is responsible for killing the player if it collides with the trap. This class can work with any trap that I can think of. Now some of those traps are not stationary. For example, The Circular Saws tend to move back and forth in their tracks at the level. For this scenario, I wanted to do some OOP. Basically, I have created a generic parent class called MovableObject that Inherits from MonoBehavior. Here is its code:

public class MoveableObject : Monobehavior
{
    #region Private Protected Variables

    /// <summary>
    /// The object's point A
    /// </summary>
    [SerializedField] protected Transform pointA;

    /// <summary>
    /// The object's point B
    /// </summary>
    [SerializedField] protected Transform pointB;

    /// <summary>
    /// The movement speed
    /// </summary>
    [SerializedField] protected float _movementSpeed;

    #endregion
}

This class has two points, A and B, where the object can move between and a movement speed variable. Now I can create another class called OscillatingMovement that defines the movement of any object that needs to move between two points. That class will inherit from MovableObject and use points A and B and the movement speed variable. This class has a function called Movement where the object is moved from one point to another back and forth. The code of the function is this:

public void Movement()
{
    //positionToMoveTo is initialized in start to pointA

    transform.position = Vector3.MoveTowards(transform.position, positionToMoveTo.position, _movementSpeed * Time.Deltatime);

    if (transform.position == pointA.position)
        positionToMoveTo = pointB;
    else if (transform.position == pointB.position)
        positionToMoveTo = pointA;
}

I was able to use this class to move all the circles saw traps as well as the moving platforms in my game; I even used the same class to move the level target which is the gem in the same manner. All that I have to do is to reference PointA and PointB for any moving object in the scene and define a movement speed and the object will move between Point A and B right away. The reason why I thought of building the movement of those objects in this way is that I am trying as much as I can to reuse the parent class with multiple objects. For example, If I am to implement the missile that I may need to create a child class that only uses point A for example as a spawn point and point B be the player last location upon spawning and the missile can then move towards point B but not in an oscillating movement but rather a one-directional movement.

There is still a lot to consider and to think about when it comes to the traps and I also see opportunities for optimization; but for now, this is how I approached my trap behaviors.

Devlog 1: Insanity

Hello, and welcome to my devlog where I will be documenting my journey in developing my first game, Insanity.

Insanity is a mobile 2D platformer game that is inspired by a game called Super Meat Boy. I am planning to publish it to the play and app stores by the end of 2020. At the beginning I had no idea what game I should be doing. I downloaded some free assets from the asset store and tried to build my own Third Person Controller, then I tried to animate that character and play around with it, but I didn’t really have a solid idea that I can work on from the beginning and take it all the way to release. At that time I was playing Super Meat Boy, and i thought… why not start with something similar to it. 2D and 3D Development are pretty much the same with few differences as per my knowledge with Unity so far. So I decided to start with developing a 2D Platformer game similar to Super Meat Boy but for mobile.

I developed my first level in that game and experimented with the character controller to try to make the player move. Thanks to the course “The Ultimate Guide to Mobile Game Development” that Jonathan Weinberger offered on Unity, I got familiar with tilemaps and with the basics of level design for mobile games, and this is where it all started. I had my notebook with me all the time to write down any idea that I may have for that game. The game is supposed to challenge the player where he/she has to go through multiple levels with obstacles and traps and make it all the way to collect the sacred gem in each level. When I first thought about Insanity, I thought that it should include the following:

  1. Lots of traps that the player has to overcome.
  2. Power ups that can help the player overcome some complex traps easily. The power ups that I thought about so far are an ability to dash and freeze time for the environment.
  3. The game should give the player a feeling of having to push forward. So the over all atmosphere of the game is drive the player forward to try and pass all the levels.
  4. The music should convey that feeling to the player. For now I am using as a pilot the soundtrack of Halo. I still need to work on its soundtracks, but this will do for now.

When you unlock all the levels the game will unload a mode called “Insanity Mode” where the player is challenged to finish the whole game in a single run. No checkpoints, no lives, no mercy. If the player dies, he/she has to start the game all over from the beginning. I am not sure yet if this is a good idea to make or not, but I guess things will be clearer towards the end of development.

Insanity Game
One of the levels in Insanity

One of the challenges that I have when developing this game is the art. When it comes to art, and designing good looking environments and animations I am not that skilled, so i tried as much as I can to get myself comfortable with Photoshop. I also found a great website where you can file some really good tilesets that you can use in your 2D game. The website is www.freepik.com you can find a lot of good sprites over there.

I am also using Unity Advertisements to play ads to the player. I will be talking more about the my approach towards the ads in later posts.

So far I have built only 4 levels, and I keep on expanding on the game’s features. Once I finish all the features that I have planned, I will continue on creating more levels.

Level Selection
Level selection menu in Insanity

I will be sharing more insights on my development journey of Insanity. If you like to give it a try, you down download the apk file from this link and give it a try. This is an initial version just to test how things are going when building it for android. Go ahead… Give it a try!

First Game Development Certificate

Hello Everyone! Today I am excited to share with you an important piece of news.

Today I got my first game development certificate. I finally started to pursuit my dream of becoming a game developer and this is step one. As i mentioned in my previous post, when it comes to video games, my passion just over grows me. I love video games; I love playing them, and i love making them.

This course was an introductory course to Unity engine where it teaches you the basics on have to make some good games. I will continue on expanding my knowledge to this field until i reach my ultimate goal 🙂

My first game ever!!

It has been a very long time since i last posted something on my blog; and it is time to start writing again! I think that there is no greater start than to announce that I have finally started to pursuit my dream of becoming a game developer. I have always been passionate about video games and wanted to create some.

Today I announce the release of my first video game. Galaxy Shooter.

Feel free to download it and leave any comments below if you have any about it. Enjoy it! 🙂

Galaxy Shooter