Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par vermine

0PARTAGES

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

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de 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
1  0 
Avatar de LittleWhite
Responsable 2D/3D/Jeux https://www.developpez.com
Le 07/04/2014 à 10:34
Super sympa Paul TOTH
0  0