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
L'archive contient la demo (visible ici).
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
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});
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*/]);
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'...}]);
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});
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});
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);
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'});
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')});
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()});
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();
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 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/