Comment créer des jeux 2D avec Box2D

5 avril 2020

0 3 331

Ce qui rend les jeux réels, c’est la physique. Angry Birds ne se sentirait pas aussi bien et aurait certainement atteint le niveau de popularité qu’il avait, s’il n’y avait pas eu de physique dans le jeu. Les cochons qui roulent, se heurtent aux structures et font tomber des bâtiments en bois entiers sont si naturels. Ceci est rendu possible grâce au moteur physique. Les jeux grand public utilisent des API très avancées comme PhysX et Havok. Les jeux basés sur un navigateur utilisent des bibliothèques JavaScript comme box2web, Ammo.js, Cannon.js, JigLibJSetc. Box2D est un moteur de physique 2D open source qui a été utilisé pour implémenter la physique des jeux 2D sur de nombreuses plateformes. Certains des jeux construits à l’aide du moteur sont Angry Birds, Happy Wheels, Tiny Wings, Crayon Physics Deluxe, Limbo etc. Box2D a été utilisé sur Nintendo DS, Wii, des systèmes d’exploitation mobiles comme Android, BB1O et iOS. Il a également été porté dans de nombreuses langues et nous allons examiner une telle partie – Box2dWeb, un port JavaScript de Box2D.

Pourquoi Box2dWeb?

Premièrement, nous travaillons uniquement avec la physique bidimensionnelle et Box2dWeb est uniquement programmé pour simuler la physique dans un monde bidimensionnel. Son système de contraintes est appelé joints et il est facile à configurer et à utiliser. Même la configuration de la détection de collision est relativement simple car il vous suffit d’ajouter un écouteur à cet objet particulier. Il est assez rapide à exécuter et comme avec tout langage de programmation, seul un mauvais codage peut gâcher cela. L’API est très simple; vous pouvez toujours consulter le manuel d’origine C/C ++ ou le manuel du port Flash si vous trouvez que le manuel JavaScript manque. Dans l’ensemble, il s’agit d’une physique bidimensionnelle riche en fonctionnalités qui est prise en charge sur tous les principaux navigateurs.

Commencer avec une scène simple:

Nous allons d’abord retirer la balise body. C’est juste le canevas dans lequel se déroule la démo.

<body onload=”int();”>
<canvas id=”canvas”width=”600” height=”400”></canvas>
</body>

Maintenant, la toute première chose à faire est de mettre en place un monde dans lequel toutes les actions doivent avoir lieu. Pour ce faire, nous devons créer une instance de b2World qui, à son tour, vous oblige à déclarer un vecteur le long duquel la force de gravité agira sur tous les objets (à la fois en chute libre et pivotants) dans le canevas. Les vecteurs sont définis à l’aide de la fonction b2Vec2, qui est un vecteur de colonne 2D à deux éléments.

var world = new b2World(
new b2Vec2(0,10) //gravity
, true
);

Après avoir téléchargé le fichier, vous pouvez afficher la source en appuyant sur Ctrl + U.

Une fois cela fait, nous ajouterons une surface au sol. Nous créons des objets et définissons leur état à l’aide de b2BodyDef, puis créons des luminaires à l’aide de b2Fixtutre et définissons leurs propriétés physiques comme la densité, le frottement, la restitution, etc. à l’aide de b2FixtureDef. Une liste complète de tous les paramètres pouvant être utilisés et disponibles dans la documentation.

var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var bodyDef = new b2BodyDef;
//create ground
bodyDef.type – b2Body.b2_staticBody;
bodyDef.position.x = 9;
bodyDef.position.y = 13;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(10, 0.5);
world.CreateBody(bodyDef).CreateFixture(fixDef);

Vous pouvez utiliser la même définition pour créer des murs et des obstacles. Nous allons maintenant ajouter des objets qui ont des caractéristiques aléatoires. Nous allons ajouter dix objets et nous allons randomiser leur forme (quadrilatères ou cercles). Plus loin, même la longueur/largeur/rayon sera aléatoire avec les coordonnées où elles doivent être initialisées.

bodyDef.type = b2Body.b2_dynamicBody;
for(var I = 0; I < 10; ++i)    { // creating 10 objects
if(Math.random() > 0.5) { // randomizing shape using a condition
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(
Math.random() + 0.1 // set width of box
,   Math.random() + 0.1 //set height of box
);
} else {
fixDef.shape = newb2CircleShape(
Math.random() + 0.1 //set radius of circle
);
}
bodyDef.position.x = Math.random()
*10; //initial position x-co-ordinate
bodyDef.position.y = Math.random()
*10; //initial position y-co-ordinate
World.CreateBody(bodyDef).CreateFixture(fixDef);
}

Une étape facultative consiste à configurer le débogage, qui peint tous les objets afin que vous puissiez observer les interactions et ensuite déboguer. Vous pouvez également marquer l’objet qui est actif et non actif en utilisant des couleurs différentes.

var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById(“canvas”).getContext(‘2d”));
debugDraw.SetDrawScale(30.0);
debugDraw.SetlineThickness(1.0);
debugDraw.
SetFlag(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
World.SetDebugDraw(debugDraw);
window.setInterval(update, 1000 / 600);

La dernière chose à faire est de mettre à jour le monde chaque fois que des actions sont effectuées. Il peut s’agir d’actions générées par l’utilisateur ou d’actions résultant de collisions accidentelles d’objections dans le monde du jeu.

function update() {
world.Step(
1/60 //frame-rate
, 10    // velocity iterations
, 10   // position iterations
);
world.DrawDebugData();
world.ClearForces();
};

Pour résumer, nous avons créé un monde, implémenté la gravité le long d’un vecteur. Une surface au sol a été ajoutée en tant que corps rigide, puis dix objets aléatoires ont été générés qui tomberaient et entreraient en collision avec le sol. Il s’agit de l’implémentation la plus simple de la bibliothèque JavaScript et nous aimerions voir toutes les œuvres que vous avez créées à l’aide de la même bibliothèque.

Ressources: