• Editor
  • More precise Bounding Box?

Related Discussions
...

Hi,

I'm trying to get started making a game with Godot, grabbed some graphics from Dustforce to try mocking up an action platformer game. Tried the animation in there and it is very awkward for layered frame by frame animation with keyframed collision boxes, as one would like for fighting game or an action platformer. I'm thinking I could try writing a plugin or improving the editor but feels like too much work...

I decided to give Spine a try! Take a look at the attached screenshot, I basically managed to do exactly what I needed to make the attack animation look right, have 2 animated layers and attack and defense bounding boxes.

The only problem is that the bounding boxes are free-form polygons. I couldn't find a way to edit the vertices of the polygon based on numbers. I would rather making the boxes as AABB rectangles for easier collision checks. Circles would also be nice.

Is there any way to achieve precise control of the Bounding Boxes as regular polygons?

Ha, I just posted about hit detection minutes ago:
Corona touch listeners on parts of a spine animation

You're on the right track with AABBs. Unfortunately, as you found, Spine only provides bounding boxes right now, which are arbitrary polygons. We did bounding boxes first, with the expectation that we'd add rectangles and circles soon after, but we got side tracked with so many other big things. I do think it's something we can do in v4.1. We're wrapping up the v4.0 release now, though it'll likely still be a few more weeks.

Until then, there may be workarounds that you find acceptable.

The simplest is to get a bone at runtime and do hit detection from that point, ie use it as the center of a circle or offset a rectangle from there. The downside is that you can't visualize it in the Spine editor.

You could use bounding boxes. They are polygons and the vertices don't currently allow exact/numeric positioning, but still bounding boxes with a low number of vertices (say 4-8) may work for your needs. They have an advantage that they can be deformed, either via bones or deform keys. Note deform keys are generally to be avoided. Deforming a bounding box likely means you don't need as many attachments, since the alternative would be to show different sized bounding box attachments as needed (or AABB or circle attachments).

Lastly, you could mimic AABBs by using a region attachment. For example, create a square image and create region attachments using it. Position these where you want your AABB hit boxes. You may want to put them on the root bone, so they are not transformed by other bones. Or you could create a bone that has inherit rotation and scale disabled, then attach the region attachments to that. This way you can have the AABB region attachments translated, but not rotated or scaled. At runtime, don't draw these attachments. To do hit detection, get all the visible AABB region attachments, compute the world position of one of their vertices, then add the width/height to get the other 3 vertices. We can help you with any of these steps if you like.

Hi, thanks for the very quick and thorough reply. I can try that approach.

Leaving performance aside, for the platformer part, when doing collision against floor and ceiling it's easier with a rectangle, that's the main motivation to have AABB hitbox. For attack/damage purposes there is no way the user could tell so it's fine.

I'm on the trial version so I can't test it. Could I export, edit a text file manually and re-import without loss? That might be the simplest.

[EDIT] I mean drawing mostly rectangular shapes on the editor, and manually fix them in a text file.

Yes, you could export JSON, modify it, and import it again. Be sure to check Nonessential data when exporting, which writes some information that isn't typically needed at runtime but is used when importing back into the Spine editor. Note even with that checked some minor features will not be preserved, such as bone icons.

To be fancy you could write a tool that displays the skeleton and allow manipulation of the bounding boxes. The Skeleton Viewer could be used as a foundation for such a tool.

Or you could write a script to parse the JSON and automatically make the bounding boxes perfectly rectangular. The JsonRollback tool could be used as a foundation for that. Find each bounding box with 4 points and move the points to make a rectangle, then when you bring it back into Spine you could easily move or resize it without losing the perfect rectangle.

Or you could do it by hand of course! :nerd:

Sounds great, good to know about the libgdx runtime.

I got Spine Essential, re created what I had and tried export, manual fix, re-import, it works!

Re-importing into the same skeleton gets messed up, but re-importing as a new project worked perfect. Just saved over previous project after verifying everything is in place. Re-exported and verified nothing changed but the hash at the top so it seems perfectly stable.

Now to try getting this into Godot and making sense into a game!

Thank you very much!


I tried https://github.com/rayxuln/spine-runtime-for-godot and works fine but doesn't integrate Spine's Bounding boxes to Godot.

So with a bit of work I made the SpineSprite behave like a CollisionShape2D or CollisionPolygon2D

Here the PlayerAnimation being a KinematicBody2D needs a direct child to provide a shape:


With my small addition I can set a bounding box from Spine's skeleton to be set as collision shape so the warning is gone:

I made these two Spine icons btw:

For now the shape doesn't render but works fine when moving and colliding. Still need to update it on every frame too. Also need to make the bounding boxes easily accessible for attack collision checks but this proves that it mostly works.

Nice! Super cool you got it working in Godot.

FWIW, for many physics libraries updating the vertices for a physics body is an expensive operation. It may be better to only translate it or maybe to use a scene graph node that is not a physics body.