XEngine démos

XEngine est un composé de 3 moteurs :

Vous trouvez ici des démonstrations pour chacun des moteurs de XEngine.
Télécharger XEngine

<== Retour à InfoD74

Exemple d'animations

Voici 2 exemples d'affichage de sprites animés avec XEngine.

Sprite personnage - Sprite boué

Pour définir un sprite animé il faut utiliser la méthode setAnimation qui prend 3 paramètres : l'indice de l'animation, le nombre d'images de l'animation et la durée de l'animation en millisecondes.

L'indice de l'animation indique sur quelle "ligne" aller chercher l'animation dans le sprite :
Indice d'animation des sprites
XEngine va multiplier l'indice (en rouge) par la hauteur du personnage (en vert) pour retrouver dans l'image la coordonnées y de l'animation :

Code javascript

var canvas  = $('#game');
canvas = $(canvas)[0];
var context = canvas.getContext('2d');
  	
/* Moteur graphique */
xde = XDisplay_Engine;
xde.setContext(context);
xde.setDimensions($(canvas).width(), $(canvas).height());
/* Charge le sprite qui contient les animations */
var img = new Image();
img.src = 'img/player.png';
/* Joue les 4 animations du sprites */
for(var i=0; i<4; i++)
{  	  
  var object = new cloneObject(XDisplay_Img, true);
  object.setName('player'+i);
  object.setDimension(32, 48);
  object.setImg(img);
  object.setCoords(i*32, 10);
  object.setAnimation(i, 4, 1000);
  xde.addObject(object);
}
    
var img2 = new Image();
img2.src = 'img/life_ship.png';	  
var object = new cloneObject(XDisplay_Img, true);
object.setDimension(128, 128);
object.setImg(img2);
object.setCoords(0, 60);
object.setAnimation(0, 4, 500);
xde.addObject(object);
  	
function display() {
  xde.display();
}
  	
displaying = setInterval(display, 1000/xde.fps);
	
});