2011-04-21 128 views
1

用帆布完美的像素碰撞我覺得我靠近就這一個,但我有一些困難,找出我缺少具體是什麼。我試圖在Canvas中進行「像素完美」碰撞檢測。代碼可在Github https://github.com/AlexChesser/jsSpritehttp://chesser.ca/jsSprite/13-more-pixel-detection.php麻煩與HTML5

假設我已經確定發生微不足道的衝突,下一個階段是檢查重疊區域的像素級別。

到目前爲止,我爲這個測試代碼是:

 // 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,我知道我肯定能遍歷圖像中的每個像素,我是什麼無法弄清楚爲什麼我在array1中的索引處的像素與array2中的像素之間的比較似乎沒有重疊。

任何人都可以看到我要去哪裏錯了地方?也許在這裏有一個邏輯錯誤,也許我沒有閱讀我認爲我得到的廣場或什麼。

我會一直罵個不停和更新,如果我找到,但往往不是,斯塔克的比我聰明很多:)

+1

我真的想看看這個,當我有一個免費的第二,如果它仍然是一個問題 – 2011-04-26 13:42:45

+0

嗨西蒙,這仍然是一個問題,同樣我這個週末分心,這個問題看起來有點'不可逾越' 。想着我會看看websocket,node.js和多個迷你電腦,而這個在我腦海中轉過身來。 (我也可能試圖在Github上找到一個JS遊戲引擎,它具有像素衝突並查看他們在做什麼)。我敢肯定這一個接近! – 2011-04-26 15:20:16

+1

上週我瀏覽了一篇關於此的博客文章(http://www.wildbunny.co.uk/blog/2011/04/20/collision-detection-for-dummies/),可能會有幫助。 – robertc 2011-04-27 22:09:22

回答

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;     
     } 

我拉錯了個別畫布對象的區域。