1

私は現在、衝突しない 2 つのスプライトを持つ基本的な JavaScript ゲームに取り組んでいます。ただし、透明で衝突として「カウント」されないスプライトの部分があるため、基本的なバウンディング ボックスの衝突では十分ではありません。私が抱えている問題の解決策を見つけましたが、それを機能させることができません。私がやりたいのは、スプライトの透明部分を計算し、透明部分が重なっている場合、衝突が検出されないことを確認することです。これが私が見つけた問題を解決するものです。

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

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

そして、画像データを計算するために：

    /**
     * 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 に何を渡すべきかということです。Images を渡そうとしましたが、メソッドから返された imageData を渡そうとしましたpixelCheckが、同じエラーを受け取りました: object または image has no method 'getImageData'. 私は何を間違っていますか？

4

1 に答える 1

0

これには 2 つの問題があります。

関数を作成しました：

function createImageData(image){...}

しかし、あなたが呼んでいるのは：

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

ドットは、オブジェクトのプロパティを表します。オブジェクトの一部ではない関数を呼び出そうとしました。いくつかの簡単な修正があります。

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

これが役に立ったことを願っています。

于 2013-01-08T03:48:04.523 に答える