Question

我正在尝试在我的画布游戏中实现像素完美碰撞检测，但是我似乎无法从我的精灵中获取像素信息。

我需要精灵的每个像素的x和y值，从我读过的内容中我使用getImageData()方法来做到这一点。

然而，这不起作用：

this.sprite = new Image();
this.sprite.src = 'img/player.png';
console.log(this.sprite.getImageData());

我可能使用了错误的精灵类型吗？因为我在控制台中收到此错误：

未捕获的TypeError：对象＃没有方法 'getImageData'

Answer 1

以下是如何使用精灵的像素数据进行像素完美的点击测试

首先，在可见画布上正常绘制精灵。

enter image description here

在隐藏的画布上创建精灵的红色蒙版副本。此副本的精确尺寸与精灵相同，但仅包含透明或红色像素。

enter image description here

跟踪可见精灵的边界框。单击边界框时，计算鼠标点击相对于精灵边界框的X / Y（与画布无关）。

然后，参考红色遮罩的精灵，看看那个X / Y处的相应像素是红色还是透明。如果像素为红色，则表示像素完美。如果像素是透明的，则不会命中。

在此图中，假设蓝点是X / Y点击位置。由于红色遮罩画布中相应的X / Y像素为“红色”，因此这是一个HIT。

enter image description here

以下是创建红色遮罩精灵的代码。我没有在这里显示命中测试的代码，但如果你尝试并且无法对命中测试进行编码，我也会花时间对命中测试进行编码。

重要说明：要运行此代码，必须避免跨域安全限制。请确保您的图片来源位于您的本地域中，否则您将遇到跨域安全违规并且不会绘制屏蔽图像...因此您无法为您的精灵来源执行此操作：{ {3}}！

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid blue;}
</style>

<script>
    $(function(){

        var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");

        var img=new Image();
        img.onload=function(){
          ctx.drawImage(this,100,25);

          // make a red-masked copy of just the sprite
          // on a separate canvas
          var canvasCopy=document.getElementById("canvasCopy");
          var ctxCopy=canvasCopy.getContext("2d");
          canvasCopy.width=this.width;
          canvasCopy.height=this.height;
          ctxCopy.drawImage(img,0,0);

          // make a red-masked copy of the sprite on a separate canvas
          var imgData=ctxCopy.getImageData(0,0,c.width,c.height);
          for (var i=0;i<imgData.data.length;i+=4)
            {
                if(imgData.data[i+3]>0){
                    imgData.data[i]=255;
                    imgData.data[i+1]=0;
                    imgData.data[i+2]=0;
                    imgData.data[i+3]=255;
                }
            }
          ctxCopy.putImageData(imgData,0,0);         

        }
        img.src = "houseIcon.png";

    }); // end $(function(){});
</script>

</head>

<body>
    <p>Original sprite drawn on canvas at XY:100/25</p>
    <canvas id="canvas" width="400" height="300"></canvas>
    <p>Red-masked on canvas used for hit-testing</p>
    <canvas id="canvasCopy" width="300" height="300"></canvas>

</body>
</html>

要在2个精灵之间进行像素完美的碰撞测试，您会：

为精灵＃1和精灵＃2创建一个红色蒙版画布。

首先测试2个精灵的边界框是否发生碰撞。如果边界框没有碰撞，则2个精灵不会发生碰撞，所以你可以在这里停止命中测试。

如果2个精灵可能使用边界框测试碰撞，请为碰撞测试创建第三个画布。

你将使用canvas的合成方法，通过在第三个画布上绘制精灵＃1和精灵＃2来测试精灵＃1和精灵＃2之间的碰撞。使用合成，只会在第三个画布上绘制2个精灵的 COLLIDING 像素。

以下是与“destination-in”合成的方式：现有的画布内容保留在新形状（精灵＃2）和现有形状（精灵＃1）内容重叠的位置。其他一切都变得透明。

因此...

将精灵＃1 处于变形状态绘制到第三个画布中（变换可以是移动，旋转，缩放，倾斜 - 任何东西！）。

将globalCompositeOperation设置为destination-in。

context.globalCompositeOperation = 'destination-over';

将精灵＃2 处于转换状态绘制到第三个画布中。

在此绘制之后，第三个画布仅包含精灵＃1和精灵＃2的碰撞部分

测试第三个画布中的每个像素是否有非透明像素。如果你发现任何不透明的像素，那么2个精灵正在融合。

根据您想要在碰撞时采取的行动，当您找到第一个碰撞像素时，您可能会挽救。

从画布精灵获取图像像素数据

1 个答案: