Question

我认为我很接近这一点，但我特别难以弄清楚我错过了什么。我正试图在Canvas中进行“像素完美”碰撞检测。该代码在Github https://github.com/AlexChesser/jsSprite和http://chesser.ca/jsSprite/13-more-pixel-detection.php

中提供

假设我已经确定了琐碎的碰撞正在发生，下一阶段是检查重叠区域的像素级别。

到目前为止，我的测试代码是：

        // Ok, compute the rectangle of overlap:            
        if (bottom1 > bottom2)  {   over_bottom = bottom2; 
        } else {                    over_bottom = bottom1; }

        if (top1 < top2)        {   over_top = top2; 
        } else {                    over_top = top1; }

        if (right1 > right2)    {   over_right = right2; 
        } else {                    over_right = right1; }

        if (left1 < left2)      {   over_left = left2; 
        } else {                    over_left = left1; }

        if (Sprite.debug == 1) {
            // again for the purposes of global debuggery I thought it'd be nice to be able to 
            // draw the area of overlap, but without ruining all other tests
            MainContext.fillStyle = "rgb(200,0,0)";
            MainContext.fillRect (over_left, over_top, over_right-over_left, over_bottom-over_top);
        }
        overlap_width = over_right-over_left;
        overlap_height = over_bottom-over_top;

        if (Sprite.Xpos > obj.Xpos) {
            // read the data start at the sprite's right side
            var sprite_data_x_start = Sprite.Xpos   +Sprite.width   -overlap_width;
            var obj_data_x_start    = obj.Xpos;
        } else {
            // read the data from the sprites left.
            var sprite_data_x_start = Sprite.Xpos;
            var obj_data_x_start    = obj.Xpos  +obj.width          -overlap_width;             
        }

        if (Sprite.Ypos > obj.Ypos) {
            // read the data start at the sprite's right side
            var sprite_data_y_start = Sprite.Ypos   +Sprite.height  -overlap_height;
            var obj_data_y_start    = obj.Ypos;
        } else {
            // read the data from the sprites left.
            var sprite_data_y_start = Sprite.Ypos;
            var obj_data_y_start    = obj.Ypos  +obj.height         -overlap_height;                
        }


        // 1. get the coordinates of the overlapped area for box object1
        // 2. get the coordinates of the overlapped area for this Sprite
        // 3. get the data for each into an array using GETIMAGEDATA
        //      eg:
        var sprite_overlap_image = Sprite.ctx.getImageData( sprite_data_x_start, 
                                                            sprite_data_y_start, 
                                                            overlap_width, 
                                                            overlap_height);
        var obj_overlap_image = obj.ctx.getImageData(       obj_data_x_start, 
                                                            obj_data_y_start, 
                                                            overlap_width, 
                                                            overlap_height);


        //soid  = sprite_overlap_image.data;
        soid = sprite_overlap_image;
        GlobalWatchSOID = sprite_overlap_image;
        GlobalWatchOOID = obj_overlap_image;            
        ooid    = obj_overlap_image;

        //MainContext.putImageData(sprite_overlap_image.data, 100, 100);
        //MainContext.putImageData(obj_overlap_image.data,  400, 400);

        for (idx in soid.data) {
            if (!isNaN(idx)) {
                if ((soid.data[idx] == 0 && ooid.data[idx] == 0)) {
                    return true;
                    //console.log(idx + ' ' + soid.data[idx] + ' omg hit! ' + ooid.data[idx]);
                }
            }
        }
        return false;

通过检查Chrome调试器中的DOM，我知道我肯定能够遍历图像中的每个像素，我无法弄清楚为什么我在index1中对array1中的像素进行比较array2中的像素似乎永远不会重叠。

有人能看到我出错的地方吗？也许这里有一个逻辑上的错误，也许我不会在正方形中阅读，我认为我正在得到的东西。

如果我找到的话，我会继续罢工并更新，但更多的时候，Stack比我聪明得多：）

Answer 1

我已经破解了它。

        if (Sprite.Xpos > obj.Xpos) {
            // read the data start at the sprite's right side
            //var sprite_data_x_start = Sprite.Xpos -Sprite.width   -overlap_width;
            var sprite_data_x_start = Sprite.width  -overlap_width;             
            var obj_data_x_start    = 0;
        } else {
            // read the data from the sprites left.
            var sprite_data_x_start = Sprite.Xpos;
            var obj_data_x_start    = 0         -overlap_width;             
        }

        if (Sprite.Ypos > obj.Ypos) {
            // read the data start at the sprite's right side
            var sprite_data_y_start = Sprite.height -overlap_height;
            var obj_data_y_start    = 0;
        } else {
            // read the data from the sprites left.
            var sprite_data_y_start = 0;
            var obj_data_y_start    = obj.height            -overlap_height;                
        }

我正在拉动各个画布对象的错误区域。

在html5中使用canvas进行完美像素碰撞的麻烦

1 个答案: