首頁  >  文章  >  web前端  >  HTML5遊戲開發-Box2dWeb應用(二)-碰撞以及各種連接

HTML5遊戲開發-Box2dWeb應用(二)-碰撞以及各種連接

黄舟
黄舟原創
2017-03-02 13:58:402415瀏覽

上次介紹了用box2dweb創建各種剛體,這次來介紹如何用滑鼠拖曳剛體,剛體之間的碰撞,以及剛體之間的各種連接。


一,滑鼠拖曳剛體

使用lufylegend.js庫件後,拖曳剛體變得很簡單,只需呼叫LSprite的setBodyMouseJoint(true);方法即可,修改上一節的add方法如下

function add(){
	var rand = Math.random();
	if(rand < 0.33){
		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);
		cLayer.setBodyMouseJoint(true);
	}else if(rand < 0.66){
		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));
		cLayer.setBodyMouseJoint(true);
	}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);
	}
}

可以看到,我只在加入小鳥的時候,加入了滑鼠拖拽,下面是測試連接

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

#二,碰撞偵測

使用以下程式碼來加入碰撞偵測事件

LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);

這時的碰撞是所有剛體之間的碰撞,包括靜止的和動態的

為了方便,我在這裡使用lufylegend.js中的debug方法來驗證

function beginContact(contact){
	if(contact.GetFixtureA().GetBody().GetUserData().name == "bird" && 
			contact.GetFixtureB().GetBody().GetUserData().name == "bird"){
		trace("bird and bird");
	}
	trace("bird and other");
};

以上方法就是碰撞的檢測,意思是當兩隻小鳥之間發生碰撞的時候,輸出"bird and bird",小鳥和其他剛體,或其他剛體之間發生碰撞的時候輸出"bird and other"

這裡是測試連接

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

以下是運行結果



#三,剛體之間的各種連結

最後,我們來看看剛體之間的各種連接,這部分目前沒有封裝在lufylegend.js裡,以後會陸續封裝進去,不過現在我們先來看看如何手動實現這些連接

##1,距離鏈接(b2DistanceJointDef) b2DistanceJointDef可以用來約束兩個body之間的距離,用法如下

function add(){
	cLayer = new LSprite();
	cLayer.name = "bird";
	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);
	cLayer.setBodyMouseJoint(true);
	return cLayer;
}
var bird1 = add();
var bird2 = add();
var distanceJointDef = new LGlobal.box2d.b2DistanceJointDef();
distanceJointDef.Initialize(bird1.box2dBody, bird2.box2dBody, bird1.box2dBody.GetWorldCenter(), bird2.box2dBody.GetWorldCenter());
LGlobal.box2d.world.CreateJoint(distanceJointDef);

這裡有測試連接

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

下面是運行結果


2,旋轉連結(b2RevoluteJointDef)b2RevoluteJointDef可以為兩個body設定一個軸心,讓兩個body繞這個軸心旋轉,用法如下

var bird = new LSprite();
	bird.name = "bird";
	bird.x = 200;
	bird.y = 200;
	backLayer.addChild(bird);
	bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
	bird.addChild(bitmap);
	bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,0);
	
	var pig = new LSprite();
	pig.name = "pig";
	pig.x = 200;
	pig.y = 150;
	backLayer.addChild(pig);
	bitmap = new LBitmap(new LBitmapData(imglist["pig2"]));
	pig.addChild(bitmap);
	pig.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);

	var revoluteJointDef  = new LGlobal.box2d.b2RevoluteJointDef();
	revoluteJointDef .Initialize(pig.box2dBody, bird.box2dBody, bird.box2dBody.GetWorldCenter());
	LGlobal.box2d.world.CreateJoint(revoluteJointDef );

這裡是測試連線

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

#下面是執行結果


3,滑輪連結(b2PulleyJointDef)b2PulleyJointDef類似滑輪效果,用法如下

var bird = new LSprite();
	bird.name = "bird";
	bird.x = 200;
	bird.y = 200;
	backLayer.addChild(bird);
	bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
	bird.addChild(bitmap);
	bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);
	bird.setBodyMouseJoint(true);
	
	var bird01 = new LSprite();
	bird01.name = "bird";
	bird01.x = 400;
	bird01.y = 150;
	backLayer.addChild(bird01);
	bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
	bird01.addChild(bitmap);
	bird01.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);
	bird01.setBodyMouseJoint(true);

	var anchor1 = bird.box2dBody.GetWorldCenter();  
    var anchor2 = bird01.box2dBody.GetWorldCenter();  

    var groundAnchor1 = new LGlobal.box2d.b2Vec2(anchor1.x, anchor1.y - (100 / LGlobal.box2d.drawScale));
    var groundAnchor2 = new LGlobal.box2d.b2Vec2(anchor2.x, anchor2.y - (100 / LGlobal.box2d.drawScale));

    var ratio = 1.0;  

    var pulleyJointDef = new LGlobal.box2d.b2PulleyJointDef();  
    pulleyJointDef.Initialize(bird.box2dBody, bird01.box2dBody, groundAnchor1, groundAnchor2, anchor1, anchor2, ratio);  
    pulleyJointDef.maxLengthA = 300 / LGlobal.box2d.drawScale;  
    pulleyJointDef.maxLengthB = 300 / LGlobal.box2d.drawScale; 

    LGlobal.box2d.world.CreateJoint(pulleyJointDef);

這裡是測試連線

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

下面是執行結果


其餘的連接還有,b2GearJoint,b2PrismaticJoint,b2LineJoint,b2WeldJoint等多種鏈接,這些等以後封裝到lufylegend.js後再詳細介紹,這裡不細說了,想了解的朋友可以查閱一下相關資料

最後給出這兩次內容的所有原始碼

http://fsanguo.comoj.com/download.php? i=box2d_sample01.rar

注意,上面只是源碼,如果想要在本地運行這些源碼的話,需要自己下載lufylegend.js庫件以及box2dweb,然後進行配置


 以上就是HTML5遊戲開發-Box2dWeb應用(二)-碰撞以及各種連結 的內容,更多相關內容請關注PHP中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn