使用JavaScript，画布和Alpha检测的碰撞检测 [英] Collision Detection with Javascript, Canvas, and Alpha Detection

问题描述

我目前正在开发一个基本的javascript游戏，有两个sprite不会碰撞在一起。然而，基本边界框碰撞将不足以满足，因为精灵的部分是透明的，并且不会计数为碰撞。我找到了解决我的问题，但我不能让它工作。我想做的是计算精灵的透明部分，并确保如果透明部分重叠，则没有检测到冲突。这是我发现解决问题的方法。

I'm currently working on a basic javascript game that has two sprites that are not to be collided together. However, basic bounding box collision won't suffice as there are portions of the sprites that are transparent and wouldn't 'count' as colliding. I found a solution to the problem that I am having, but I can't get it to work. What I would like to do is calculate the transparent portions of the sprites and make sure that if the transparent portions overlap, that there is no collision detected. Here is what I found that solves the problem.

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

并且用于计算图像数据：

And for calculating the image data:

    /**
     * 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，我已经尝试传递从 pixelCheck 方法返回的imageData，但接收相同的错误：对象或图像没有方法'getImageData'。我做错了什么？

The problem is that I don't know how to implement this solution, or if this is the best solution to my problem. Is this what I'm looking for? And if so, where do I put these methods? The thing that I'm most confused about is what I should be passing to spriteA and spriteB. I've tried passing Images and I've tried passing the imageData returned from the pixelCheck method, but receiving the same error: that the object or image has no method 'getImageData'. What am I doing wrong?

推荐答案

这有两个问题。

您创建了一个函数：

function createImageData(image){...}

但你打电话是：

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

点表示对象的属性。你试图调用一个从不是对象的一部分的函数。有一些简单的修复。

The dot notates a property of an object. You were trying to call a function that was never part to the objects. There are some simple fixes.

向您的构造函数添加createImageData（）函数：

add the createImageData() function to your constructor :

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

或：

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

或只是正确地调用：

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

其次，你的函数调用一个图像参数，但是你不提供。

Second, your function calls for an image parameter, but you aren't supplying one. Simply remember to supply the image when you call it. You could also remove the parameter and get the image from within the function.

这样排序：

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

希望这有帮助。

这篇关于使用JavaScript，画布和Alpha检测的碰撞检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！