XEngine est un composé de 3 moteurs :
Vous trouvez ici des démonstrations pour chacun des moteurs de XEngine.
Télécharger XEngine
Voici un exemple d'utilisation de XPhysics pour détecter les collisions entre différents éléments graphiques.
Utilisez les flèches du clavier pour vous déplacer
var c_x = 0, c_y = 0, COMP_XY = 4;
var canvas = $('#game');
canvas = $(canvas)[0];
var context = canvas.getContext('2d');
/* Moteur physique */
xpe = XPhysics_Engine,
xpe.setDisplayDimensions($(canvas).width(), $(canvas).height());
/* Moteur graphique */
xde = XDisplay_Engine;
xde.setContext(context);
xde.setDimensions($(canvas).width(), $(canvas).height());
/* Rectangle controlé par le jouer */
var rect = new cloneObject(XDisplay_Geo, true);
rect.setColor('rgb(255, 128, 0)');
rect.setName('player');
rect.setCoords(0,20);
rect.setHitbox('circle',60);
rect.setCircle(60, true);
//ajout au moteur graphique
xde.addObject(rect);
//ajout au moteur physique
xpe.addObject(rect);
/* Rectangle basique */
var rect2 = new cloneObject(XDisplay_Geo, true);
rect2.setColor('rgb(255, 0, 255)');
rect2.setName('rect');
rect2.setCoords(60,60);
rect2.setHitbox('rect',60,50);
rect2.setRect(60, 50, true);
//ajout au moteur graphique
xde.addObject(rect2);
//ajout au moteur physique
xpe.addObject(rect2);
/* Rectangle basique */
var rect3 = new cloneObject(XDisplay_Geo, true);
rect3.setColor('rgb(10, 255, 10)');
rect3.setName('rect2');
rect3.setCoords(140,100);
rect3.setHitbox('rect',60);
rect3.setRect(60, 50, true);
//ajout au moteur graphique
xde.addObject(rect3);
//ajout au moteur physique
xpe.addObject(rect3);
/* Rectangle basique */
var circle = new cloneObject(XDisplay_Geo, true);
circle.setColor('rgb(10, 255, 10)');
circle.setName('circle');
circle.setCoords(200,160);
circle.setHitbox('circle',50,50);
circle.setCircle(50, true);
//ajout au moteur graphique
xde.addObject(circle);
//ajout au moteur physique
xpe.addObject(circle);
var text = new cloneObject(XDisplay_Text, true);
text.setColor('rgb(255, 0, 0)');
text.setName('collision');
text.setCoords(0,280);
text.setText('');
//ajout au moteur graphique
xde.addObject(text);
/* Composantes de déplacement x et y suivant les touches appuyées */
$(document).keydown(function(event){
switch(event.keyCode)
{
case 38:
c_y = -COMP_XY;
event.preventDefault();
break;
case 40:
c_y = COMP_XY;
event.preventDefault();
break;
case 37:
c_x = -COMP_XY;
event.preventDefault();
break;
case 39:
c_x = COMP_XY;
event.preventDefault();
break;
}
}).keyup(function(event) {
switch(event.keyCode)
{
case 38:
case 40:
c_y = 0;
break;
case 37:
case 39:
c_x = 0;
break;
}
});
function display() {
xde.display();
rect.x += c_x;
rect.y += c_y;
//collision ?
var collisions = xpe.check_collision(rect);
text.setText('Collision(s) : '+collisions.length);
}
displaying = setInterval(display, 1000/xde.fps);