Obelisk.js : concevoir des objets isométriques pixelisés

Compatibles avec les canvas HTML5

Le 27 mars 2014 à 09:30, par vermine

0PARTAGES

Obelisk.js : concevoir des objets isométriques pixelisés
Compatibles avec les canvas HTML5

Obelisk.js est un moteur JavaScript permettant de créer des objets isométriques pixelisés.

Avec une API simple et flexible, vous pouvez facilement ajouter des éléments isométriques comme des briques, des cubes, des pyramides, etc. sur des canvas HTML5. Obelisk.js respecte consciencieusement un modèle de pixelisation.
Pour la partie technique : il y a un agencement des lignes d'un pixel de 1:2 conduisant à un angle de 22,6 degrés.

En pratique, ça donne ceci. Pour dessiner un cube, vous devez obtenir une instance d'une dimension, de la couleur et de la primitive Cube. La bibliothèque utilise ses propres classes pour les couleurs et les dimensions afin de définir correctement l'effet isométrique :

Code javascript :

Sélectionner tout

1
2
3
4
5
6
7
var point = new obelisk.Point(270, 120); 
var pixelView = new obelisk.PixelView(canvas, point); 
  
var dimension = new obelisk.CubeDimension(120, 200, 60); 
var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY); 
var cube = new obelisk.Cube(dimension, color); 
pixelView.renderObject(cube);

Vous trouverez sur le site des démonstrations ainsi que des tutoriels expliquant les différentes possibilités que l'outil offre. L'auteur explique d'ailleurs que ce n'est pas uniquement ludique et que ça peut avoir d'autres utilités.

Démonstrations :