XEngine est un composé de 3 moteurs :
Vous trouvez ici des démonstrations pour chacun des moteurs de XEngine.
Télécharger XEngine
Voici quelques exemple pour dessiner des formes simples telles que des recangles, des cercles et des ellipses, et comment définir pour chaque forme sa couleur de remplissage ou les couleurs et la direction d'un dégradé, la taille et la couleur des bordures.
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());
/* On définit une ellipse de couleur rose de 128px par 60px */
var ellipse = new cloneObject(XDisplay_Geo, true);
ellipse.setColor('rgb(255, 0, 255)');
ellipse.setCoords(0,10);
ellipse.setEllipse(128, 60, true);
xde.addObject(ellipse);
/* On définit un rectangle aux bordures oranges de 2px et de taille 60px par 50px */
var rect = new cloneObject(XDisplay_Geo, true);
rect.setColor('rgb(255, 128, 0)');
rect.setStrokeWidth(2);
rect.setCoords(10,80);
rect.setRect(60, 50, false);
xde.addObject(rect);
/* On définit un rectangle avec un dérgadé horizontal du jaune au noir et de taille 80px par 30px */
var rect2 = new cloneObject(XDisplay_Geo, true);
rect2.setGradient('horizontal', 'rgb(255, 255, 0)', 'rgb(0, 0, 0)');
rect2.setCoords(10,160);
rect2.setRect(80, 30, true);
xde.addObject(rect2);
/* On définit un cercle de couleur verte de 40px de diamètre */
var circle = new cloneObject(XDisplay_Geo, true);
circle.setColor('rgb(100, 255, 0)');
circle.setCoords(80,80);
circle.setCircle(40, true);
xde.addObject(circle);
/* On définit un cercle avec un dégardé vertical du bleu foncé vers le bleu clair et de 60px de diamètre */
var circle2 = new cloneObject(XDisplay_Geo, true);
circle2.setGradient('vertical', 'rgb(0, 0, 255)', 'rgb(200, 200, 255)');
circle2.setCoords(100,140);
circle2.setCircle(60, true);
xde.addObject(circle2);
/* On définit un texte de couleur bleu clair écrit avec la police Geneva en taille 12 */
var text = new cloneObject(XDisplay_Text, true);
text.setColor('rgb(100, 255, 255)');
text.setCoords(80,140);
text.setFontSize('12');
text.setFontFamily('Geneva');
text.setText('Test !');
xde.addObject(text);
function display() {
xde.display();
}
displaying = setInterval(display, 1000/xde.fps);