자바 스크립트, 캔버스 및 알파 감지로 충돌 감지

Question

현재 충돌하지 않는 두 개의 스프라이트가있는 기본 자바 스크립트 게임에서 작업 중입니다. 그러나 기본 경계 상자 충돌은 투명하고 충돌로 '계산되지 않는'스프라이트 부분이 있기 때문에 충분하지 않습니다. 내가 가지고있는 문제에 대한 해결책을 찾았지만 제대로 작동하지 않습니다. 내가하고 싶은 것은 스프라이트의 투명한 부분을 계산하고 투명한 부분이 겹치면 충돌이 감지되지 않았는지 확인하는 것입니다. 여기 내가 문제를 해결하는 것으로 나타났습니다.

/** 
    * Requires the size of the collision rectangle [width, height] 
    * and the position within the respective source images [srcx, srcy] 
    * 
    * Returns true if two overlapping pixels have non-zero alpha channel 
    * values (i.e. there are two vissible overlapping pixels) 
    */ 
    function pixelCheck(spriteA, spriteB, srcxA, srcyA, srcxB, srcyB, width, height){ 
    var dataA = spriteA.getImageData(); 
    var dataB = spriteB.getImageData(); 

    for(var x=0; x<width; x++){ 
     for(var y=0; y<height; y++){ 
     if((dataA[srcxA+x][srcyA+y] > 0) && (dataB[srcxB+x][srcyB+y] > 0)){ 
      return true; 
     } 
     } 
    } 
    return false; 
    } 

그리고 이미지 데이터를 계산하기위한

http://blog.weeblog.net/?p=40#comments

:

/** 
    * creating a temporary canvas to retrieve the alpha channel pixel 
    * information of the provided image 
    */ 
    function createImageData(image){ 
     $('binaryCanvas').appendTo('body'); 
     var canvas = document.getElementById('binaryCanvas'); 
     var ctx  = canvas.getContext("2d"); 

     ctx.drawImage(image, 0, 0); 
     var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     var imageData = [image.width]; 

     for(var x=0; x<image.width; x++){ 
     imageData[x] = [image.height]; 
     for(var y=0; y<image.height; y++){ 
      var idx = (x + y * image.width) * 4; 
      imageData[x][y] = canvasData.data[idx+3]; 
     } 
     } 
     $("#binaryCanvas").remove(); 
     return imageData; 
    } 

문제는 내가이 솔루션을 구현하거나하는 방법을 알고하지 않는 것이이에 대한 최상의 솔루션의 경우 내 문제. 내가 뭘 찾고 있니? 그렇다면 어디서이 방법을 사용합니까? 내가 가장 혼란스럽게 생각하는 것은 내가 spriteA와 spriteB에 전달해야만하는 것입니다. 나는 이미지를 전달하려고 시도했는데 pixelCheck 메서드에서 반환 된 imageData를 전달했지만 동일한 오류가 발생했습니다. 즉 해당 객체 또는 이미지 has no method 'getImageData'. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

두 가지 문제가 있습니다.

function createImageData(image){...} 

그러나 당신이 전화하는 것은 :

spriteA.getImageData(); 
spriteB.getImageData(); 

도트는 객체의 속성을 notates

당신은 함수를했다. 객체에 결코 포함되지 않은 함수를 호출하려고했습니다. 몇 가지 간단한 수정이 있습니다.

생성자에 createImageData를() 함수를 추가

function Sprite(){ 
    ... 
    this.createImageData = function(image){...}; 
    ... 
} 

나 :

Sprite.createImageData = function(image{...}; 

하거나 올바르게 전화 :

createImageData(spriteA.image); // or whatever the image is 

둘째, 함수는 요구 이미지 매개 변수를 제공하지만 사용자가 제공하지 않습니다. 이미지를 호출 할 때 이미지를 제공해야합니다. 매개 변수를 제거하고 함수 내에서 이미지를 가져올 수도 있습니다. 이 같은의

정렬이 도움이

function Sprite(){ 
    ... 
    this.createImageData = function(){ 
     var image = this.image; 
     // or just use this.image, or whatever it is 
     ... 
    } 
    ... 
} 

희망.