javascript - 如何為大量的sprite添加碰撞檢測框?

Question

我有一張精靈表，裡面的每個畫面都有不同的尺寸，如下圖：

現在我想為它們添加碰撞檢測框，但圖片較多，而且碰撞的位置不限於圖片邊框，請問這種情況
如何添加檢測框，是否需要按需求添加每個幀？完成完成後又如何取得碰撞框的位置？有沒有工具可以實現？非常感謝~

Answer 1

基本上遊戲開發最困難的部分之一就是碰撞檢測了，你如何選擇碰撞檢測請務必根據你項目的需求來決定，一般對於多邊形用得比較多的是分離軸定理（SAT），像你這種如果要求不是特別高的話用正常等大的矩形檢測就好了，如果非要變化的話就為每個狀態保存一個碰撞檢測框用於碰撞檢測，比如說：

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也是可以的，不过麻烦了点

當然我這裡僅給你參考意見，我不是主攻遊戲開發，以前有興趣的時候自學過一段時間，如果有什麼地方有問題歡迎指出來，就這樣吧。