Development Blog #16 – Combo System (VFX Rework)

The combat mechanic works but now needs to look great and show the player which buttons are needed to be pressed to advance the combo. The way I’ve decided to this is by using a texture sheet particle system.

By using a texture sheet, it allows me to mange each frame of the animation in one texture. To start, I created a new Photoshop file with 1000x1000px dimensions.

I made the background black so that I can see what I’m doing easier and created a new guide layout with the settings shown below.

This gave me a blank canvas like this.

The grid lines allow me to snap images to them. This helps with aligning the frames of the animation so that they work perfectly and there is no random jumping of frames.

I imported one of the sprites that Alex created and duplicated 4 more times. I then aligned them correctly on the grid and changed the opacity of each sprite by 20% (20%, 40%, 60%, 80%, 100%).

Finally, I repeated this step with the other sprites that Alex had made to make the final texture sheet.

Before exporting to a png, I removed the black background so that it can be read correctly in unity.

After creating the texture sheet, the next step was to set up the particle material in Unity. I created a new material called ComboSprites, and set the shader type to “Particles/Priority Additive”. I added the newly created texture sheet into the slot and applied the material

I created a new particle system as a child of the enemy and added the material to it.

I adjusted the settings of the system as shown below.

The most important setting is the Texture Sheet Animation. I set the mode to ‘Grid’ which seperates each sprite into it’s own frame. I set the tiles to 5×5 as I had that many sprites in the sheet. By using the ‘Single Row’ option, it allows me to play each row as it’s own animation instead of looping through the whole sheet. The Row setting is what I would need to change in scripts.

This is what the particle looks like.

I now needed to adjust the ComboController script to change the shape and colour of the particle system during play.

public ParticleSystem comboParticles;

private void Update()
{
    comboParticles = plos.target.transform.GetChild(2).GetComponent<ParticleSystem>();

}

In the global variables, I made new ParticleSystem called comboParticles. I then set that variable to the Particle System object for the currently locked on target.

var comboTextureSheet = comboParticles.textureSheetAnimation;

        if (enemyController.combo[currentIndex] == "A")
        {
            comboTextureSheet.rowIndex = 1;
        }
        else if (enemyController.combo[currentIndex] == "B")
        {
            comboTextureSheet.rowIndex = 2;
        }
        else if (enemyController.combo[currentIndex] == "X")
        {
            comboTextureSheet.rowIndex = 3;
        }
        else if (enemyController.combo[currentIndex] == "LTA")
        {
            comboTextureSheet.rowIndex = 4;
        }
        else if (enemyController.combo[currentIndex] == "LTB")
        {
            comboTextureSheet.rowIndex = 5;
        }

In the Combo() method, I created a new variable called comboTextureSheet and set it to the Texture Sheet Animation section of the particle system. (This is similar is the same as what I needed to do to access the main section in the preach script)

I then made a large if statement that checks what the current button in the combo is, and then changes the row of the texture sheet to match that button.

Now that I had created the main bulk of the particle effect, I needed to tweak the system when the player is performing a perfect combo. This is to show the player that they are not only getting the combo right, but also performing it within the right rhythm.

My first attempt of this was to duplicate the particle system and make the effect blue instead of yellow. Then I would’ve disabled the yellow system when the player is correct and play the blue one instead. I soon realised that this was a very convoluted way and would be much easier to just change the colour of the particle effect in the script.

I made a new bool called isPerfect and would set this to true in the perfect check if statement.

bool isPerfect;

if (currentButton == enemyController.combo[currentIndex])
        {          
           if ((elapsed > 0.75f) && (elapsed < 1.25f))
           {                
               isPerfect = true;                            
           }
           else
           {
               isPerfect = false;
           }
       }

I then added a new if statement that checks whether the isPerfect value is true.

if (isPerfect)
{
    comboMain.startColor = Color.cyan;
}
else
{
    comboMain.startColor = Color.yellow;
}

I wanted to use this method as it is always checking whether the player is perfect and also allows me to easily access the bool from other scripts if necessary.