How Do I...? A M.U.G.E.N primer

Tutorial Part 2 - Collision boxes

M.U.G.E.N, Elecbyte (c)1999-2009
Updated 17 September 2009

Introduction

In this part, we will talk about how to define collision boxes for the animations in your character's .air file. The documentation for .air files is in air.html. It's a good idea to read it before proceeding with this tutorial.

1. About Collision Boxes

Once you have put together an animation for the character, you can use AirEditor to define collision boxes. There are two kinds of collision boxes:

• Clsn1 - Attack box (red in color)
• Clsn2 - Hit box (blue in color)

2. Using AirEditor

AirEditor is a developer tool, and can be found in the old_tools/ directory of your M.U.G.E.N installation. The instructions for using AirEditor are in airedit.txt. When you are ready, run the airedit executable.

Go to File -> Open and choose the sff file you want to load, followed by the accompanying air file. You will now see your character on the screen:

Let's explain what you see on the screen.

• The big window that you see your character displayed in is called the Display window. The title area shows the current animation action you are looking at, as well as the sprite number of the sprite shown.
• The Info window at the upper-left shows:
  • X,Y coordinates of the cursor, which is displayed as a crosshair in the display window
  • X,Y position of the axis of the sprite, relative to the upper-left corner of the sprite. This is the number you entered in the player-sff.def file used to generate the SFF
  • Coordinates of the two opposing corners of the box you create when you drag the cursor on the display window
• The Navigation window:
  • Current action being displayed. You can scroll through the animation actions in your .air file by pressing the arrow buttons on either side, or you can enter it manually by clicking on the middle button
  • Current element of the action that is being shown. You can scroll through the available elements, or manually enter it, just like the action
  • Click "Play Anim" to preview the animation
• The Collision boxes window:
  • There are buttons here to let you set the bounding boxes for the current animation element
• The Options window:
  • A toggle button to enable/disable display of the Clsn1 (attack) box
  • A toggle button to enable/disable display of the Clsn2 (hit) box
  • A toggle button to enable/disable display of the sprite's axis
• The wide grey box at the very top of the screen beside the menu is the Status bar, which shows you some information, such as your last menu action.
• At the bottom of the screen you see a row of Save boxes. Each of these represents a slot that you can save a box into. The clear button erases them all.

To define a collision box, simply drag the mouse cursor over the region you want to create a box at. This will be displayed as a bright green box. Click without dragging to make the green box go away. Let's start by defining boxes for KFM's standing frame. First, we'll drag a box to represent his body.

Click on the Save1 button at the bottom of the screen to save that box to memory. Now drag a second box for the head and click on Save2 to save that. Notice how the saved boxes appear in a darker color. If you want to go back and correct one of the saved boxes, simply drag a new green box.

Next, you assign the set of boxes to the current animation element. Click on the corresponding "Set" box in the Collision boxes menu. Repeat the procedure for all the elements in the animation action.

When you are done with your changes, remember to save your .air file. Click on the File menu and choose Save.

3. General Tips

• You can quickly load your character by specifying the .sff and the .air filenames at the prompt. For example,
  airedit chars/kfm/kfm.sff chars/kfm/kfm.air
• If you have a lot of frames using the same set of boxes, you can scroll through each element, saving the boxes to the .air file without clearing the boxes each time. Alternatively, you can set the collision box as "Default" to define a default set of boxes for each frame within an action. Click on the "Options" Read air.html for more information on default collision boxes.
• In common cases, try to keep Clsn2 boxes within your Clsn1 boxes. The reason for this is so that it becomes possible to trade hits between players. If you have a Clsn1 box without a Clsn2 box in it, then setting priorities on attacks becomes meaningless, as the attacks would have infinite priority that way.
• Don't be too detailed with your collision boxes. The point is not to make a pixel-accurate representation of the character, but to make one that is game-friendly. For example, boxes for your character on the ground should have Clsn2 boxes that span the space between both legs. In this case, too much detail is actually undesirable.
  
  Here is a picture of a one that is too detailed. You want to avoid this.
  
  
  This next one has a better set. Not only does it take less effort to create, but it better approximates the movement of the character over time. Also, there is less chance that a Clsn1 box from an attack would slip through a gap.
  

Next is Tutorial Part 3

I know it's silly to equate to real life, but the kick would win every time.

Obviously the Guile example is pretty old, but let's go with it. The only reason I can imagine for the attack box to be higher is to counter air attacks. Someone standing's getting hit, someone crouching's getting hit. There isnt a character in the game who's shorter. EVEN if they were shorter, that's even MORE reason to lower the red bar. Maybe Dhalsim's slide in, but if Capcom made his boxes tighter the two wouldnt connect.

BTW, This is supposed to be the guide. Up until now I've never seen a full discussion or set of rules for how high your crouching light punch box should be off the ground. I've only seen guides on how to rip source or heard people complain it's not source. There's no Mugen hitbox discussion that I've seen til this thread.
I doubt it's even possible to try and combine or put together basic thoughts on clsn boxes that arent centered around 1 game.  Even if you could, that game wouldnt be Mugen.
No one will answer why you should be able to punch air.

Now here's my favorite. The hitboxes are not placed right where his legs are. Do you want to know why? Because he wouldn't be able to fucking hit most opponents if I didn't do this! He would be too high off the ground to even hit Ryu unless I put him at an unreasonably low height that would cause him to land faster and not look as good in motion.

Odb718 said, November 17, 2015, 11:41:05 pm

Obviously the Guile example is pretty old, but let's go with it. The only reason I can imagine for the attack box to be higher is to counter air attacks. Someone standing's getting hit, someone crouching's getting hit. There isnt a character in the game who's shorter. EVEN if they were shorter, that's even MORE reason to lower the red bar. Maybe Dhalsim's slide in, but if Capcom made his boxes tighter the two wouldnt connect.

it's there so crouching kicks can go below it; fighting games are a complex game of rock-paper-scissors.

Hit boxes are designed to show motion over time. Not only that they are there to allow for the character to ADJUST his own attack without the sprites to do it. If someone is a little low for your standard kick in real life, do you go through with it anyway, or adjust so as to hit them. This is why the boxes detail certain aspects of the sprite and don't adhere to pixels.

Random gaps and ignoring the movement through the attack that we can't actually see is bad hitbox design.

Hit boxes cater for the things the sprites don't, or can't show. If you ignore those you get something that misses when it really shouldn't, or punishes things that ought to trade hits.

Spoiler, click to toggle visibilty

With this

being what I'm told should happen, I have a hard time taking advice from you. I guess it's obvious Ken should win that one...

They work in tandem but not always 1:1 with each other. To go back to square one with your Sim example, his blue box is like that so that jump ins can actually hit it in MOST instances, because hitboxes are and always will be designed (in fighting games at least) with UNIVERSALITY in mind because that's what makes a strong, stable game that doesn't work in janky ways.
This also has the additional benefit of having your hitboxes EASIER TO UNDERSTAND and lab out punishes for if they're cohesive, simple, and for the most part allow flexible punishing and trades. This creates and enhances the dynamic.

Also the reason Blanka's face and lower legs can't get hit is because the fundamental point of jumping in a fighting game is to avoid being hit and attempting to gain positional advantage or to transition from neutral to advantage, which you can not do if your jump boxes leave you TOO open. Otherwise jumping is too much of a risk to be worth it against anyone with anti airs.

I don't plan on contributing any more points since my stance won't change, I'm simply attempting to explain the reasoning behind these hitboxes. They also did it like this to be efficient as well as productive for the players so it's ultimately incredibly smart design, since drawing rectangular hitboxes actually DOES take some doing for arcade boards and too much of them can cause problems IIRC.

oh yeah, definitely Mai needs a specific clsn for her boobs