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的中心，所以需要進一步解決這個問題(項目時間原因，暫時還未想到好的辦法，待更新)

 

到此 兩者的組合應用 算是基本清了！