javascript - PhaserJS：将物理添加到图形对象

Question

大多数示例使用精灵来添加物理，但我想将物理添加到使用 Graphics 类创建的对象中。例如：

var square = game.add.graphics( 0, 0 );
//some definitions

game.physics.arcade.enable( square );

这根本不适用于图形，但它立即适用于精灵。为什么会这样，我怎样才能做到这一点？

提前致谢。

Answer 1

我不得不进行大量调查，因为这似乎不是标准（至少在教程方面），但您必须创建一个 BitmapData 对象并使用画布来绘制图形。这不像使用 game.add.graphics 来创建圆圈和 poligons 等那样有趣，但它运作良好。

这是您创建平台的方式：

//creates the BitmapData object, you can use it to create figures:
var floor = game.add.bitmapData( 400, 20 ); //width, height

//this fills the whole object with a color:
floor.fill( 200, 100, 0, 1 ); //Red, Green, Blue, Alpha
//floor will have a canvas context object to draw figures. 
//Here are some more examples:
//http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

//after you finish drawing, you need to convert the object to a sprite:
var floorSprite = game.add.sprite( 100, 500, floor );

//this adds physics to the object and adds a .body property:
game.physics.arcade.enable( floorSprite );

//stops the object in place and prevents other objects from displacing it:
floorSprite.body.allowGravity   = false;
floorSprite.body.immovable      = true;

这就是您无需依赖图像文件即可创建平台的方式。我看过一些使用文件而不是生成平台的教程，我认为这是一种浪费。

另外，我认为您需要将矢量转换为位图是因为矢量物理在硬件上非常繁重（或者看起来如此）。

希望这可以帮助更多的人！

Answer 2

也许它适用于此：

anySprite.addChild(yourGraphicsObject);

在那之后：

game.physics.arcade.enable(anySprite);