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

Compatibles avec les canvas HTML5

Le 2014-03-27 09:30:34, par vermine, Expert éminent sénior

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 :

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 :

animation en gif : http://codepen.io/nosir/details/mdiHe ;
input text : http://codepen.io/nosir/details/IxBJn ;
dessin en pixel : http://codepen.io/nosir/details/rzaLA ;
un bloc : http://codepen.io/nosir/details/ganrh.

Le site officiel.
D'après un article sur DailyJS.

Et vous ?

Pour quel type d'application cet outil pourrait-il vous intéresser ?

Utilisez-vous une bibliothèque du genre ? Laquelle et pourquoi celle-là ?

Discussion forum

2 commentaires

Paul TOTH
Expert éminent sénior

Ah d'accord, je ne comprenais pas le rapport entre un moteur isométrique et la pixellisation.

je me suis amusé il y a quelques temps à faire ce genre de chose pour tester l'objet canvas, c'est du pur javascript sans bibliothèque externe avec un pathfinding intégré, quand on clique le personnage, il se déplace en respectant le décors vers la destination.

http://www.execute.re/isomap3.htm

le 05/04/2014 à 13:41
LittleWhite
Responsable 2D/3D/Jeux

Super sympa Paul TOTH

le 07/04/2014 à 10:34