Developpez.com

Plus de 14 000 cours et tutoriels en informatique professionnelle à consulter, à télécharger ou à visionner en vidéo.

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

Le , par vermine, Responsable JavaScript & AJAX
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 :


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à ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Paul TOTH Paul TOTH - Expert éminent sénior https://www.developpez.com
le 05/04/2014 à 13:41
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
Avatar de LittleWhite LittleWhite - Responsable 2D/3D/Jeux https://www.developpez.com
le 07/04/2014 à 10:34
Super sympa Paul TOTH
Offres d'emploi IT
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)
Ingénieur intégration, validation, qualification du système de drone H/F
Safran - Ile de France - Éragny (95610)
Ingénieur développement fpga (traitement vidéo) H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -