javascript - How to add collision detection boxes to a large number of sprites?

Question

I have a sprite sheet, and each frame in it has a different size, as shown below:

Now I want to add collision detection boxes for them, but there are many pictures, and the collision position is not limited to the picture border. In this case,
how to add detection boxes, do I need to add them as needed for each frame? How to get the position of the collision box after adding it? Is there any tool to achieve this? Thank you very much~

Answer 1

Basically one of the most difficult parts of game development is collision detection. How you choose collision detection must be decided according to the needs of your project. Generally, the Separating Axis Theorem (SAT) is used more for polygons, like yours If the requirements are not particularly high, just use normal rectangles of equal size for detection. If it must change, save a collision detection frame for each state for collision detection, for example:

var monster = {
    steps : {
        "walk" : {
            "width" : "", //碰撞检测时用于计算的宽度
            "height" : "", //高度
            "imgs" : [] //精灵，可能"walk"这个动作中包含了多帧，进行游戏循环的时候需要逐步变化
            "idx" : 0 //用于判断imgs当前到哪个步骤的下标索引
        },
        "jump" : {
            //同样的
        },
        "run" : {
            //等等
        }
        //........
    }, //保存不同状态下的显示效果和碰撞边框
    "currentStatus" : "walk", //当前的状态，方便相关功能的载入
    "setup" : function(){
        this.x += "";
        this.y += '';
        //用于计算和更新位置
    }，
    "draw" : function(){
        //用于绘制
    }
    //......
};
//碰撞检测一般都在游戏循环里单独调用一个方法，通过循环获取活动对象的x,y,width,height来进行检测，这里你可以通过判断一个矩形是否存在一个顶点在另一个矩形内部来得知是否碰撞，当然用sat也是可以的，不过麻烦了点

Of course, I’m just giving you reference advice here. I’m not focusing on game development. I studied by myself for a period of time when I was interested. If there are any problems, please point them out. That’s it.