p2.js 与 createjs 的组合应用

开始前简单说下其他几款js物理引擎

box2d老牌，功能全面，但是效率低下，移动端基不用考虑的

matterjs  效率目前我测试下来最高，但是依然还在开发中(好像还很缓慢)，目前功能局限，而且有bug。（本来项目打算使用，结果局限和bug导致放弃）

 

p2js 移动端推荐使用 （常规体量在目前手机大多数上应用没有问题）

作者github:     https://github.com/schteppe

 

 

阅读此文需要一定的基础知识，这里只讲p2.js 与 createjs 的组合应用

 

坐标系：

　　p2.js与createjs 的x轴是一致的。y轴是相反的

 

 　

 

 

注册点：　　

　　createjs默认在目标bound的左上角

　　p2.js默认在目标bound的中心

 

    

 

相关属性转换

　　createjs.rotation = -p2.angle * 180 / Math.PI;

　　createjs.x= p2.Body.position[0];

　　createjs.y= -p2.Body.position[1];

 

 

使用createjs的movieclip、sprite、img贴图渲染

　　p2js的一大特点就是最基本的库里并没有集成贴图渲染的相关api,一开始觉得很不习惯，使用后觉得真心好用，能满足很多特殊情况　　　　　　　　　　　

　　例如：1 由于模型原因，我们贴图需要稍大于模型，这样才能在渲染时没有缝隙。

　　　　　2 动态刷新贴图（例如我们直接使用createjs的movieclip,多方便）　　

　　其实就是把p2的坐标，角度对应的绑定给createjs的元件来显示。　　

var arrDataShow=[]; //数组管理对应关系

//建createjs元件
var _m=new createjs.MovieClip()
//建p2刚体	
var _p2= new p2.Body(
{
	mass: 1,
	position: [0, 0],
	angle:0.1,
	allowSleep : false
})
world.addBody(_p2);	

arrDataShow.push({data:_p2,show:_m,type:""});//数组管理对应关系


//渲染
stage.addEventListener("tick",function(e)
{
	world.step(1 / 10); //createjs fps 与 p2 word的step 对应关系 自行摸索
	for (var i = 0; i < arrDataShow.length; i++)
	{
		var type = arrDataShow[i].type;
		var data = arrDataShow[i].data;
		var show = arrDataShow[i].show;
		//
		show.x = data.position[0];
		show.y = -data.position[1];
		show.rotation = -data.angle * 180 / Math.PI;
	}
})

　

至于不规则图形，如何在p2中建立刚体官方demo里面也有

注意：

因为不规则所以刚体的重心并不会在bound的中心，所以需要进一步解决这个问题(项目时间原因，暂时还未想到好的办法，待更新)

 

到此 两者的组合应用 算是基本清了！