Développement de jeux HTML5-Application Box2dWeb (2)-collision et diverses connexions-Tutoriel H5-php.cn

Développement de jeux HTML5-Application Box2dWeb (2)-collision et diverses connexions

黄舟

Libérer： 2017-03-02 13:58:40

original

2459 Les gens l'ont consulté

La dernière fois, j'ai présenté comment utiliser box2dweb pour créer divers corps rigides. Cette fois, je vais vous présenter comment faire glisser des corps rigides avec la souris, la collision entre les corps rigides et les différentes connexions entre les corps rigides. .

1. Faites glisser le corps rigide avec la souris

Utilisez lufylegend Bibliothèque .js Après avoir ajouté le fichier, faire glisser le corps rigide devient très simple. Appelez simplement la méthode setBodyMouseJoint(true); Modifiez la méthode add dans la section précédente comme suit

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);
	}
}

Copier après la connexion

Vous pouvez voir. que je n'ai ajouté que lors de l'ajout de l'oiseau, le glissement de la souris a été ajouté. Ce qui suit est la connexion de test

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

Deuxièmement, la détection de collision

Utilisez le code suivant pour ajouter l'événement de détection de collision

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

Copier après la connexion

La collision à cette fois, c'est parmi tous les corps rigides Collisions entre objets, y compris statiques et dynamiques

Pour plus de commodité, j'utilise la méthode de débogage dans lufylegend.js pour vérifier

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

Copier après la connexion

La méthode ci-dessus est la détection de collision , ce qui signifie qu'en cas de collision entre deux oiseaux, "oiseau et oiseau" est affiché. Lorsqu'une collision se produit entre un oiseau et d'autres corps rigides, ou entre d'autres corps rigides, "oiseau et autre" est affiché

<. 🎜>Voici la connexion test

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

Voici les résultats en cours

Trois liens divers entre corps rigides

Enfin, jetons un coup d'œil. Les différentes connexions entre corps rigides ne sont actuellement pas encapsulées dans lufylegend.js, et le seront à l'avenir. Mais voyons maintenant comment implémenter manuellement ces connexions

1, Lien de distance (b2DistanceJointDef)

b2DistanceJointDef peut être utilisé pour contraindre la distance entre deux corps. L'utilisation est la suivante

<🎜. >Voici la connexion de test

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);

Copier après la connexion

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

Voici les résultats en cours d'exécution

Voici les résultats en cours

2, lien de rotation (b2RevoluteJointDef)

b2RevoluteJointDef peut définir un axe pour deux corps et laissez les deux corps tourner autour de cet axe, l'utilisation est la suivante

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 );

Copier après la connexion

Voici la connexion de test

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

Voici les résultats en cours d'exécution

3, poulie lien (b2PulleyJointDef)

b2PulleyJointDef est similaire à l'effet poulie, l'utilisation est la suivante

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);

Copier après la connexion

Voici la connexion test

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

Ce qui suit est le résultat actuel

Le reste des connexions inclut b2GearJoint, b2PrismaticJoint, b2LineJoint, b2WeldJoint et d'autres liens. Ceux-ci seront discutés plus tard, je le présenterai en détail après l'avoir encapsulé dans lufylegend.js. Les amis qui souhaitent en savoir plus peuvent consulter les informations pertinentes

Enfin, tous les codes sources de ces deux contenus sont donnés

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

Notez que ce qui précède n'est que le code source. Si vous souhaitez exécuter ces codes sources localement, vous devez télécharger vous-même la bibliothèque js et box2dweb. configurer

Ce qui précède est l'application de développement de jeux HTML5-Box2dWeb (2) - Contenu de collisions et connexions diverses. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !