1.0.5 • Published 3 years ago
@dreamcolt/pixi-matter v1.0.5
Matter-js for pixi.js
The physics engine for pixi.js@4.x, 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);
});