今天带来phaser3-p2physics物理引擎之元素点击事件

预览效果：

介绍：

主要是给物理元素绑定点击事件，如果点击到物理元素则根据这行代码获得命中

var bodies = game.physics.p2.hitTest(pointer.position, [ contra, bunny, block, wizball ]);

然后根据 bodies.length 判断是否点击空白或者物理元素本身进行业务逻辑

以下代码有详细介绍：

代码实列：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

	game.load.image('contra2', 'assets/pics/contra2.png');
	game.load.image('bunny', 'assets/sprites/bunny.png');
	game.load.image('block', 'assets/sprites/block.png');
	game.load.image('wizball', 'assets/sprites/wizball.png');

	game.load.physics('physicsData', 'assets/physics/sprites.json');

}

var contra;
var bunny;
var block;
var wizball;

var result = 'Click a body';

function create() {

	//	Enable p2 physics
	game.physics.startSystem(Phaser.Physics.P2JS);

	contra = game.add.sprite(100, 200, 'contra2');
	bunny = game.add.sprite(550, 200, 'bunny');
	block = game.add.sprite(300, 400, 'block');
	wizball = game.add.sprite(500, 500, 'wizball');

	// 在所有精灵上启用物理实体并启用可视化调试器
	game.physics.p2.enable([ contra, bunny, block, wizball ], true);

	//	凸多边形，这个方法是利用加载json数据进行物理描边
	contra.body.clearShapes();
	contra.body.loadPolygon('physicsData', 'contra2');

	bunny.body.clearShapes();
	bunny.body.loadPolygon('physicsData', 'bunny');

	//	Circle
	wizball.body.setCircle(45);

	game.input.onDown.add(click, this);

}

function click(pointer) {

	//	你可以对一组精灵，一组相位器进行命中测试。Phaser.Physics.P2.Body，或者什么都不给
	//	在这种情况下，它将检查全世界的每一个元素。

	var bodies = game.physics.p2.hitTest(pointer.position, [ contra, bunny, block, wizball ]);

	if (bodies.length === 0)
	{
		result = "You didn't click a Body";
	}
	else
	{
		result = "You clicked: ";

		for (var i = 0; i < bodies.length; i++)
		{
			//	返回的是 p2.Body 对象.
			//      这个父级对象是一个 Phaser.Physics.P2.Body具有名为“sprite”属性的实体
			//	这与我们先前创建的精灵有关。
			//	“key”属性只是纹理名称，在这个演示中效果很好，但在实际游戏中可能需要一些更健壮的东西。结果=结果+实体[i]。父母亲(传说中的)精灵钥匙

			if (i < bodies.length - 1)
			{
				result = result + ', ';
			}
		}

	}

}

function update() {

	bunny.body.rotateLeft(2);

}

function render() {

	game.debug.text(result, 32, 32);

}

物理描边数据一览

在初始化时候加载物理描边数据配置表

game.load.physics('physicsData', 'assets/physics/sprites.json');

利用 contra.body.loadPolygon('physicsData', 'contra2'); 进行对应精灵绑定对应数据主要原理是循环描边属性 shape