在另一个精灵周围旋转精灵

我正在建造一个水池游戏,我想让这个提示围绕着白色的球旋转。

这里是实时代码:

http://199.26.84.223/nocol.html

这是白球的代码:

balls = game.add.group(); balls.enableBody = true; balls.physicsBodyType = Phaser.Physics.P2JS; wball = balls.create(350, 240 , 'ballW'); wball.body.setCircle(15); wball.body.setCollisionGroup(wballCollisionGroup); wball.body.collides([wballCollisionGroup, ballsCollisionGroup , sidesCollisionGroup , holesCollisionGroup , playerCollisionGroup]); game.physics.p2.setImpactEvents(true); 

这是cue的代码,我称之为player

  player = game.add.sprite( 0 , 0 , 'player'); game.physics.p2.enable(player , true ); player.enableBody = true; player.body.setCollisionGroup(playerCollisionGroup); player.body.setZeroVelocity(); player.body.createBodyCallback(wball, ballHit , this); player.anchor.setTo(-0.5, 0.5); player.pivot.x = wball.x +150; player.pivot.y = 0; player.body.x = wball.x ; player.body.y = 240 ; 

问题是,所有的枢轴或锚点确实是改变精灵图像的位置。 我得到的提示出现在正确的地方,通过使用枢轴/锚点,它似乎工作正常…提示围绕球旋转,但启用debugging模式后,我看到:

游戏的调试模式

基本上只有图像的位置已经改变,但精灵依然围绕红色部分的中心旋转。 如果我运行这个代码,球和线索已经发生碰撞,球没有玩家做任何事情。

我怎样才能旋转球的提示,而不会碰撞?

我从来没有使用Phaser,但快速浏览了文档。 你正在使用的Achor.set似乎只是抵消了纹理,所以它不是你所需要的。

我无法在文档中find任何“vector”或“matrix”,但应该使用提示角度创建旋转matrix。 像这样的东西:

 var myMatrix = Matrix.RotationY(userDefinedAngle); 

然后用一些向量可以得到新的提示位置。

 var offsetVector = Vector2(distanceToBall, 0); var newpos = Vector2.Transform(offsetVector, myMatrix); 

现在创建一个从提示位置指向球的向量。

 var direction = ballPos - newpos; direction.normalize(); 

这个方向vector是你在玩家射击时应用的方向vector,而不是像你今天所做的那样仅仅增加到x。

 if (cursors.down.isDown ) { player.body.velocity += direction * someSpeedValue; } 

请注意,我不知道方法或对象是否像这样工作,但如果Phaser中没有类似的东西,我会感到非常惊讶。

编辑。

PIXI.Matrix似乎是你需要的对象,请看看。

你正在操纵精灵 ,但不是基础的身体 。 精灵影响视觉外观,而身体影响物理行为。


有很多方法可以解决这个问题:

快速入侵: 我不知道这是否会起作用,我建议使用其他解决scheme之一,但是这可能会以最less的努力获得您想要的结果:

每次用pivot和/或anchor,调整精灵时anchor,调用setRectangleFromSprite()来将物理体与新的精灵位置重新alignment。

 player.anchor.setTo(-0.5, 0.5); player.pivot.x = wball.x +150; player.pivot.y = 0; player.body.setRectangleFromSprite(); player.body.setCollisionGroup(playerCollisionGroup); // setRectangleFromSprite() may reset the collision groups 

稍微优雅的解决scheme: 利用提示杆和提示球之间的简单关系来避免一些有毛的三角函数。

  • 继续使用pivotanchor来直观地显示提示旋转/移动,但不要将物理体添加到这个精灵。
  • 根据提示的速度和方向,在“击中”的时间内手动增加一个力量,以处理提示和白球之间的碰撞。
  • 使用wball.body.applyImpulse(...)wball.body.applyImpulseLocal(...)取决于你如何计算碰撞的位置(相对于世界或母球?)

物理上最准确的解决scheme:

而不是修改player.anchorplayer.pivot来移动提示杆,修改player.body 。 精灵会自动调整以与其物理主体一起移动/旋转。

  • 而不是anchor ,更改player.body.xplayer.body.y来改变提示杆的位置。
  • 而不是pivot ,更改player.body.angleplayer.body.rotation来改变提示棒的旋转。
  • 让球杆绕着球旋转不会像使用anchorpivot.那么简单pivot. 这将需要一些三角函数计算将提示杆放在相对于母球的适当位置和角度!

如果您将x / y设置为白球的发送者,然后添加填充(不是很多,但足以使其在白球外部平衡)。 或者不用填充,使提示有一个未使用的空间的小面积,只是足以使它在白球的外面平衡

当你的精灵在想要的位置,你应该尝试手动为它定义一个碰撞体。

 player.body.clearShapes(); player.body.addRectangle(300, 20, 0, -150); // trial an error the values player.body.updateCollisionMask(); 

addRectangle方法使用以下参数:

 addRectangle(width, height, offsetX, offsetY, rotation) 

看到这里 。