Matter-js for pixi.js

The physics engine for [email protected], Its easy to use!

created by dreamcolt

Usage

import Matter from '@dreamcolt/pixi-matter'

//导入poly-decomp以便针对凹变形碰撞检测，详见https://github.com/schteppe/poly-decomp.js    
var decomp = require('poly-decomp');

Example

stage = PIXI.app.stage; //这是你的舞台stage;
 

Matter.setPixiApp(PIXI.app); //将PIXI Application的实例传给Matter
Matter.setUp(); //初始化物理引擎
Matter.start(); //开启物理引擎
//创建地面，假设你的整个PIXI画布大小为1920 * 1080:
let ground = new Matter.Rect({
	posX: 1920 / 2,
	posY: 1000,
	width: 1920,
	height: 100,
	isStatic: true,
});
stage.addChild(ground.displayObj);
Matter.addToWorld(ground);

stage.interactive = true;
let str = ["Woo!", "哇~", "What?", "Cool!"];
stage.on("pointertap", (evt) => {
	let mono;

	let rands = Math.floor(Math.random() * 4);
	switch (rands) {
		case 0:
			//创建圆形刚体
			mono = new Matter.Circle({
				posX: evt.data.global.x,
				posY: evt.data.global.y,
			});
			break;
		case 1:
			//创建矩形刚体
			mono = new Matter.Rect({
				posX: evt.data.global.x,
				posY: evt.data.global.y,
				width: 200,
				height: 100,
			});
			break;
		case 2:
		    //创建正多边形刚体
			mono = new Matter.Polygon({
				posX: evt.data.global.x,
				posY: evt.data.global.y,
				sides: 5,
				radius: 80,
			});
			break;
		default:
		    //创建异多边形刚体
			mono = new Matter.Vertices({
				posX: evt.data.global.x,
				posY: evt.data.global.y,
				vertices: [
					{ x: 0, y: 0 },
					{ x: 180, y: 0 },
					{ x: 100, y: 100 },
				],
			});
			break;
	}
		let color = "0x" + Math.random().toString(16).substr(2, 6).toUpperCase();
		//mono.displayObj是一个Container，它是一个容器，默认里面有一个Graphics实例，颜色是红色。
		mono.displayObj.children[0].graphicsData[0].fillColor = color;
		//访问刚体，直接获取自定义对象mono的body即可
		//console.log(mono.body, mono.body.frictionAir);
		let text = new PIXI.Text(str[rands], { fill: 0x000000, fontSize: 50 });
		text.anchor.set(0.5, 0.5);
		
		//在这个容器里加一些其他元素
		mono.displayObj.addChild(text);
		
		//将物体添加到stage上显示出来
		stage.addChild(mono.displayObj);
		//最后将mono刚体添加到物理世界，让它有物理效果
		Matter.addToWorld(mono);
 
});