Home

Obelisk – De la 3D isométrique avec javascript

Amis développeurs qui savez apprécier les bienfaits du JavaScript, voici une bonne petite bibliothèque pour vous. Obelisk.js ne vous aidera pas à livrer un menhir, mais plutôt à créer des objets isométriques 100% en pixels.

Des cubes, des pyramides et toutes sortes de parallélépipèdes en canvas HTML5 simplement avec quelques lignes de JS.

js Obelisk   De la 3D isométrique avec javascript

Il suffit d’appeler la bibliothèque

<script src="//path/to/obelisk.min.js"></script>

Puis en Javascript, ça se présente comme ceci :

// create a canvas 2D point for pixel view world
var point = new obelisk.Point(200, 200);
 
// create view instance to nest everything
// canvas could be either DOM or jQuery element
var pixelView = new obelisk.PixelView(canvas, point);
 
// create cube dimension and color instance
var dimension = new obelisk.CubeDimension(80, 100, 120);
var gray = obelisk.ColorPattern.GRAY;
var color = new obelisk.CubeColor().getByHorizontalColor(gray);
 
// build cube with dimension and color instance
var cube = new obelisk.Cube(dimension, color, true);
 
// render cube primitive into view
pixelView.renderObject(cube);

On détermine un point d’ancrage, puis on donne les dimensions et la couleur de l’objet et hop la magie opère. Et on peut faire des choses assez chiadées comme ce Flappy Bird ou cesprite.

flappy Obelisk   De la 3D isométrique avec javascript

Notez que plusieurs tutos sont disponibles pour prendre en main Obelisk.

Plus d’infos ici.

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :