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;

这就是如何在不依赖图像文件的情况下创建平台的方法.我看过一些教程使用文件而不是生成平台,我认为这是一种浪费.

此外,我认为你需要将矢量转换为位图是因为矢量物理在硬件上相当沉重(或者看起来如此).

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