HTML5遊戲開發-Box2dWeb應用(一)-創建各種各樣的剛體

本篇開始，會介紹lufylegend-1.4.0的新功能，怎麼結合box2dweb創造一個物理世界以及這個物理世界裡的各種剛體

#準備工作

首先你需要下載html5開源程式庫件lufylegend-1.4.0

http://blog.csdn.net/lufy_legend/article/details /7644932

box2dweb你可以到這裡下載

http://code.google.com/p/box2dweb/downloads/list

準備三張圖片，

分別用來建立圓形，矩形和三角剛體。

準備結束，現在開始製作。
下面是利用lufylegend.js中的LLoadManage類別來讀取圖片

r​​rreee

LGlobal.setDebug(true);是開啟debug模式，這樣在創建剛體的時候，會將box2dweb所創建的debug剛體也一起顯示出來，發布成品的時候，應該關閉debug模式。

LLoadManage類別有三個參數，$list,$onupdate,$oncomplete，

$list是要讀取的圖片數組，$onupdate是讀取中需要呼叫的函數，$oncomplete是讀取完成時呼叫的函數

LoadingSample3類別是lufylegend.js庫件中的進度條顯示功能，除了LoadingSample3類別之外，還有LoadingSample1類別和LoadingSample2類別

在建立剛體之前，先建立上下左右四面牆，來控制之後將要建立的剛體的移動範圍。

init(10,"mylegend",800,400,main);
var backLayer,cLayer,wallLayer,bitmap,loadingLayer;
var imglist = {};
var imgData = new Array(
		{name:"bird1",path:"./images/bird1.png"},
		{name:"bird2",path:"./images/bird2.png"},
		{name:"stage01",path:"./images/stage01.png"}
		);
function main(){	
	LGlobal.setDebug(true);	
	backLayer = new LSprite();	
	addChild(backLayer);	
	
	
	loadingLayer = new LoadingSample3();
	backLayer.addChild(loadingLayer);	
	LLoadManage.load(
		imgData,
		function(progress){
			loadingLayer.setProgress(progress);
		},
		function(result){
			imglist = result;
			backLayer.removeChild(loadingLayer);
			loadingLayer = null;
			gameInit();
		}
	);
}

不知道LSprite的用法的童鞋請翻閱我之前的文章，這裡不囉嗦了。

addBodyPolygon（w,h,type,density,friction,restitution）是給LSprite加上一個矩形body,參數分別是，（寬，高，靜態或動態，密度，摩擦，彈性）

如果第3個參數設定body為靜態，則後面的參數可以省略，這裡是將四面牆設為靜態。

然後，給backLayer加上滑鼠點擊事件，準備在滑鼠點擊的時候，加入一個剛體

wallLayer = new LSprite();
	wallLayer.x = 400;
	wallLayer.y = 0;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(800,10,0);
	wallLayer = new LSprite();
	wallLayer.x = 0;
	wallLayer.y = 200;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(10,400,0);
	wallLayer = new LSprite();
	wallLayer.x = 400;
	wallLayer.y = 400;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(800,10,0);
	wallLayer = new LSprite();
	wallLayer.x = 800;
	wallLayer.y = 200;
	backLayer.addChild(wallLayer);
	wallLayer.addBodyPolygon(10,400,0);

在add方法中加入剛體，先來個最簡單的，加入一個圓形剛體，加入圓形剛體程式碼如下

backLayer.addEventListener(LMouseEvent.MOUSE_UP,add);

addBodyCircle(radius,cx,cy,type,density,friction,restitution)是為LSprite加上一個圓形body ，參數分別是，（半徑，圓心座標x，y，靜態或動態，密度，摩擦，彈力）

好了，運行程式碼後，不斷點擊滑鼠得到下面結果

測試URL

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index.html

#接下來，修改add方法，除了加入圓形剛體的同時，有一定幾率加入矩形剛體，如下

	cLayer = new LSprite();
	cLayer.x = 50 + Math.random()*700;
	cLayer.y = 50;
	backLayer.addChild(cLayer);
	bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
	cLayer.addChild(bitmap);
	cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);

addBodyPolygon方法上面已經介紹過了，是給LSprite加入矩形剛體。

執行程式碼後，不斷點擊滑鼠得到下面結果

#測試URL

#http://lufy.netne.net/lufylegend -js/lufylegend-1.4/box2d/sample01/index2.html

#最後，是加入三角剛體，起始可以是任意多邊形剛體，用到的是LSprite的addBodyVertices方法，

addBodyVertices(vertices,cx,cy,type,density,friction,restitution)是根據頂點數組來添加任意多邊形剛體，參數分別為（頂點數組，中心坐標，靜態或動態，密度，摩擦，彈性）

要提的是這個方法有個小bug，就是令LSprite的座標變成（0,0），所以需要用SetPosition方法重新給LSprite設定一下座標，這個bug在lufylegend.js下次更新的時候會解決，這次加入三角剛體程式碼如下

	var rand = Math.random();
	if(rand < 0.5){
		cLayer = new LSprite();
		cLayer.x = 50 + Math.random()*700;
		cLayer.y = 50;
		backLayer.addChild(cLayer);
		bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
		cLayer.addChild(bitmap);
		cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);
	}else{
		cLayer = new LSprite();
		cLayer.x = 50 + Math.random()*700;
		cLayer.y = 50;
		backLayer.addChild(cLayer);
		bitmap = new LBitmap(new LBitmapData(imglist["stage01"]));
		cLayer.addChild(bitmap);
		cLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,5,.4,.2);
	}

執行程式碼後，不斷點擊滑鼠得到下面結果

測試URL

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index3.html

本篇結束，奉上最終程式碼，請期待下一篇教學

cLayer = new LSprite();
backLayer.addChild(cLayer);
bitmap = new LBitmap(new LBitmapData(imglist["bird2"]));
cLayer.addChild(bitmap);
var shapeArray = [
[[0,54],[27,0],[54,54]]
];
cLayer.addBodyVertices(shapeArray,27,27,1,.5,.4,.5);
cLayer.box2dBody.SetPosition(new LGlobal.box2d.b2Vec2((50 + Math.random()*700)/LGlobal.box2d.drawScale,50/LGlobal.box2d.drawScale));

以上是HTML5遊戲開發-Box2dWeb應用(一)-創建各種各樣的剛體 的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#