从画布精灵获取图像像素数据
Jam*_*son 1 javascript canvas sprite
我正在尝试在我的画布游戏中实现像素完美碰撞检测,但是我似乎无法从我的精灵中获取像素信息.
我需要精灵的每个像素的x和y值,并且从我读过的内容中我使用该getImageData()方法来做到这一点.
但是,这不起作用:
this.sprite = new Image();
this.sprite.src = 'img/player.png';
console.log(this.sprite.getImageData());
我可能使用了错误的精灵类型吗？因为我在控制台中收到此错误:
未捕获的TypeError:Object#没有方法'getImageData'
以下是如何使用精灵的像素数据进行像素完美的命中测试
首先,在可见画布上正常绘制精灵.
在隐藏的画布上创建一个红色蒙版的精灵副本.此副本的精确尺寸与精灵相同,但仅包含透明或红色像素.
跟踪可见的精灵的边界框.单击边界框时,计算鼠标点击相对于精灵边界框(与画布无关)的X/Y.
然后,参考红色遮罩的精灵,看看那个X/Y处的相应像素是红色还是透明.如果像素为红色,则表示像素完美.如果像素是透明的,则不会命中.
在此图中,假设蓝点是X/Y点击位置.由于红色遮罩画布中的相应X/Y像素是"红色",因此这是HIT.
这是创建红色蒙板精灵的代码.我没有在这里显示命中测试的代码,但如果你尝试并且无法对命中测试进行编码,我也会花时间对命中测试进行编码.
重要说明:要运行此代码,必须避免跨域安全限制.确保您的图片源位于您的本地域中,否则您将遇到跨域安全违规并且不会绘制屏蔽图像...因此您无法为您的精灵来源执行此操作:http://otherDomain.com/ picture.jpg!
<!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像素.
以下是与"目标输入"合成的方式:现有的画布内容保留在新形状(精灵#2)和现有形状(精灵#1)内容重叠的位置.其他一切都变得透明.
所以…
将变形状态的精灵#1绘制到第三个画布中(变换可以是移动,旋转,缩放,倾斜 - 任何东西!).
将globalCompositeOperation设置为destination-in.
context.globalCompositeOperation = 'destination-over';
将处于转换状态的精灵#2绘制到第三个画布中.
在此绘制之后,第三个画布仅包含精灵#1和精灵#2的碰撞部分
测试第三个画布中的每个像素是否有非透明像素.如果你发现任何不透明的像素,那么2个精灵正在融合.
根据您想要在碰撞时采取的行动,您可能会在找到第一个碰撞像素时挽救.