hitTestRectangle(spriteOne, spriteTwo)
如果它们重叠,hitTestRectangle将返回true。您可以使用hitTestRectangle与if语句来检查两个精灵这样的之间的冲突:
if (hitTestRectangle(cat, box)) { //There's a collision } else { //There's no collision }
正如你将看到的,hitTestRectangle是进入庞大宇宙的游戏设计的前门。
在collisionDetection.html文件examples夹中运行该文件,获取如何使用的工作示例hitTestRectangle。使用箭头键移动猫。如果猫碰到盒子,盒子变红,“打!由文本对象显示。
你已经看到了创建所有这些元素的所有代码,以及使猫移动的键盘控制系统。唯一新的东西是在函数hitTestRectangle内部使用的方式play来检查冲突。
function play() { //use the cat's velocity to make it move cat.x += cat.vx; cat.y += cat.vy; //check for a collision between the cat and the box if (hitTestRectangle(cat, box)) { //if there's a collision, change the message text //and tint the box red message.text = "hit!"; box.tint = 0xff3300; } else { //if there's no collision, reset the message //text and the box's color message.text = "No collision..."; box.tint = 0xccff99; } }
因为该play函数每秒由游戏循环调用60次,所以这个if语句不断地检查cat和box之间的冲突。如果hitTestRectangle是true,文本message对象用于setText显示“Hit”:
message.text = "hit!";
然后通过将框的tint属性设置为十六进制红色值,将框的颜色从绿色更改为红色。
box.tint = 0xff3300;
如果没有冲突,消息和框保持在其原始状态:
message.text = "no collision..."; box.tint = 0xccff99;
这段代码很简单,但是突然间,你创建了一个似乎完全活跃的互动世界。它几乎像魔术!也许,令人惊讶的是,你现在有所有你需要的技能开始制作游戏与Pixi!
hitTestRectangle函数
但是hitTestRectangle功能怎么样?它做什么,它是如何工作的?关于如何工作的碰撞检测算法的细节略微超出了本教程的范围。最重要的是你知道如何使用它。但是,仅供参考,如果你好奇,这里是完整的 hitTestRectangle函数定义。你能从评论中知道它在做什么吗?
function hitTestRectangle(r1, r2) { //Define the variables we'll need to calculate var hit, combinedHalfWidths, combinedHalfHeights, vx, vy; //hit will determine whether there's a collision hit = false; //Find the center points of each sprite r1.centerX = r1.x + r1.width / 2; r1.centerY = r1.y + r1.height / 2; r2.centerX = r2.x + r2.width / 2; r2.centerY = r2.y + r2.height / 2; //Find the half-widths and half-heights of each sprite r1.halfWidth = r1.width / 2; r1.halfHeight = r1.height / 2; r2.halfWidth = r2.width / 2; r2.halfHeight = r2.height / 2; //Calculate the distance vector between the sprites vx = r1.centerX - r2.centerX; vy = r1.centerY - r2.centerY; //Figure out the combined half-widths and half-heights combinedHalfWidths = r1.halfWidth + r2.halfWidth; combinedHalfHeights = r1.halfHeight + r2.halfHeight; //Check for a collision on the x axis if (Math.abs(vx) < combinedHalfWidths) { //A collision might be occuring. Check for a collision on the y axis if (Math.abs(vy) < combinedHalfHeights) { //There's definitely a collision happening hit = true; } else { //There's no collision on the y axis hit = false; } } else { //There's no collision on the x axis hit = false; } //`hit` will be either `true` or `false` return hit; };