Odge

Odge est un moteur graphique 2D isométrique réalisé en Javascript.

Créé par IdemK pour les besoins de son jeu par navigateur ODO il est distribué sous licence MIT.

Il utilise la balise <canvas> introduite par html5.

Il permet la création d'un plateau ainsi que d'éléments déplaçables sur ce plateau. Il est également possible de mettre en place une interface.


Vous pouvez essayer Odge sur cette petite démo:

Vous pouvez aussi voir un voir une demo d'Odge grand écran

Téléchargement

Dépôt Mercurial:

http://hg.idemk.fr/odge

Dernière version:

Télécharger Odge 0.2

Anciennes versions:

Télécharger Odge 0.1

Utilisation

Contenu de l'archive

L'archive contient la demo (visible ici).




Créer un nouveau projet

Il vous suffit de créer une nouvelle page html qui inclut le fichier odge.js.

Ensuite vous n'aurez plus qu'à écrire quelques commandes pour créer le terrain et y ajouter des éléments soit directement dans la page à l'intérieur d'une balise <script> soit dans un fichier .js à part à inclure après odge.js




Documentation

Instancier Odge

Odge([params]);

params: une liste de paramètres parmi:

Si je veux instancier Odge pour odo en affichant le fps avec un framerate maximum de 30 je ferai:

var odo = new Odge({drawfps:true,maxfps:30});



Charger une map

Odge.map(array)

array: un tableau à trois dimensions. La première correspond à l'abscisse (x), la deuxième corresponde à l'ordonnée (y) et enfin la troisième correspond à la couche et contient un entier qui identifie la ressource image à utiliser (-1 si aucun élément à cet emplacement). Le plateau est considéré comme une superposition de couches ce qui permet de différencier le sol du décor, d'éléments particuliers au sol, des bâtiments etc...

Pour l'instant le tableau doit être généré manuellement, l'implémentation d'un éditeur de niveau est sur ma ToDo list.

Je vous invite à regarder le fichier exemple.js pour comprendre la structure du tableau.

Si je veux charger une carte pour odo je ferai:

odo.map([/*contenu du tableau*/]);



Charger les images

Odge.images(array)

array: un tableau contenant des listes de paramètres comme détaillé juste en dessous.

Odge.addImage(params)

params: une liste de paramètres parmi:

Si je veux charger trois images pour odo je ferai:

odo.images([{label:'herbe'...},{label:'eau'...},{label:'arbre'...}]);



Ajouter des bonhommes

Odge.addActiveElt(ligne,colonne,nom,image,[offset]);

ligne: la ligne du tableau où on veut placer l'élément.

colonne: la colonne du tableau où on veut placer l'élément.

nom: le nom (unique) de l'élément.

image: l'image correspondant à l'élément sur le plateau.

offset: décalage nécessaire (presque systématiquement) pour centrer l'élément sur la case.

Si je veux m'ajouter au plateau je ferai:

odo.addActiveElt(12,5,'MaxguN','images/nainbarbu.png',{x:40,y:-58});



Créer une fenêtre d'interface

Odge.interface.addElement(nom,params);

nom: le nom (unique) de l'élément d'interface.

params: une liste de paramètres parmi:

Si je veux une nouvelle fenêtre pour mon interface je ferai:

odo.interface.addElement('maFenetre', {x:40,y:-58,bg:'images/fond.png',taggable:true});



Ajouter du texte à l'interface

Odge.interface.elements.<nom>.addText(texte,x,y,[tag]);

texte: le texte à afficher.

x: position horizontale depuis le coin haut gauche du fond.

y: position verticale depuis le coin haut gauche du fond.

tag: permet d'identifier quel élément génère un évènement (doit être unique et fenêtre taggable).

Si je veux mon nom sur la fenêtre je ferai:

odo.interface.elements.maFenetre.addText('MaxguN',50,20);



Ajouter une image à l'interface

Odge.interface.elements.<nom>.addImage(image,x,y,[tag]);

image: l'url de l'image à afficher.

x: position horizontale depuis le coin haut gauche du fond.

y: position verticale depuis le coin haut gauche du fond.

tag: permet d'identifier quel élément génère un évènement (doit être unique et fenêtre taggable).

Si je veux ajouter ma photo sur la fenêtre je ferai:

odo.interface.elements.maFenetre.addImage('images/portrait_nainbarbu.png',100,50,'nainbarbu'});



Gérer les évènements d'interface

Odge.interface.elements.<nom>.addEventListener(evenement,tag,callback);

evenement: évènement que l'on veut gérer (click uniquement).

tag: le tag correspondant à l'élément déclenchant l'action.

callback: fonction à éxecuter lorsque l'évènement est généré.

Si je veux fermer la fenêtre et donner la possibilité de me déplacer quand je clique sur ma photo je ferai:

odo.interface.elements.maFenetre.addEventListener('click','nainbarbu',function(){
odo.interface.elements.maFenetre.close();odo.move('MaxguN')});



Gérer les évènements

Odge.addEventListener(evenement,activeElt,callback);

evenement: évènement que l'on veut gérer (click uniquement).

activeElt: élément actif dont on veut gérer l'évènement.

callback: fonction à éxecuter lorsque l'évènement est généré.

Si je veux ouvrir la fenêtre quand je me clique dessus je ferai:

odo.addEventListener('click','MaxguN',function(){odo.interface.elements.maFenetre.open()});



Démarrer le moteur

Odge.start([params]);

params: une liste de paramètres parmi:

Si je veux lancer Odge pour odo avec les paramètres définis à la construction je ferai:

odo.start();

À Propos

Des Questions?

Vous pouvez m'envoyer vos questions et remarques par mail: maxgun [-at-] idemk.fr

Vous pouvez également me trouver sur twitter, mes commits y sont reliés, vous pourrez avoir des nouvelles de Odge par ce biais.



IdemK

IdemK est une équipe amateure de création de jeux vidéo. Nous développons plusieurs outils pour nous aider dans la création de nos jeux. Vous pouvez trouver des informations sur ces divers outils et sur toutes nos activités sur notre blog: http://blog.idemk.fr/