Setting Up a Hitbox Attack System in Unity2D (1): Animated BoxCollider2D and “Attack” Script

Recently worked on this attack hitbox system in the 2D Mobile Adventure game project I’ve been working on for the GameDevHQ course. There are mainly two parts to this: 1) Setting up and animating a BoxCollider2D so that it moves in sync with the player’s attack animation, and 2) Creating and adding an “Attack” script to damage anything with one of the “IDamageable” interfaces I touched on in the previous article.

BoxCollider2D Setup and Animation

From my understanding the hit box will need to be a child of the player avatar sprite (in this case) in order for us to add it to the avatar’s animations. Right click on the avatar and create a new 2D Sprite, then assign something like a “UISprite” to it as well as a BoxCollider2D. The sprite and SpriteRenderer are purely for visualisation purposes, so try to resize the collider so that it matches the UISprite visual.

Ensure the BoxCollider2D has “isTrigger” set to true, and personally I’d recommend disabling the component for the time being (that way, our attack animation can enable the component only when the player attacks).

It’s a bit of a painstaking process, and it probably doesn’t need to be exact, but select the player sprite, lock the animation window using the padlock icon, select the player’s attack animation, hit record, and frame-by-frame position and scale the hit box so that it follows the player’s weapon throughout the animation. The aim is to have a collider which is convincingly in sync with the player’s attack animation.

Also, at the start and end of the attack animation clip enable and disable the BoxCollider2D component respectively. At this stage, you can also remove or simply disable the SpriteRenderer component.

Attack Script Setup

Create a new C# script called something like “Attack” and attach this to the hit box GameObject. The main thing this script will need is an implementation of the OnTriggerEnter2D method. As part of that method, we’ll need to check whether what the hit box has just collided with has (i.e. implements) the IDamageable interface. If it does, we just need to call the Damage method.

To prevent this script from being called multiple times within the same animation, it might also be a good idea to implement a cooldown system of sorts (which can be as simple as calling a coroutine that’ll disable and then enable the attack functionality using a boolean).

I also went back at this point to the IDamageable interface and changed the method so that the Damage method accepts an optional “damageAmount” integer parameter:

This will then allow us to pass in a custom damage amount depending on the value of a serialised private integer, allowing us to, say, have some enemies deal more damage than others (once they implement this hit box and damage logic, that is).

Returning to the Attack script, here’s what I’ve ended up with:

With all of this set up, we should almost have a working, versatile attack system for our player and the game’s enemies to use. We just need to cover the topic of collision layers, which I’ll touch on in the next article 😉