Aller au menu - Aller au contenu
Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

[Moteur JS] Odge

Licence MIT - v0.2 (MàJ 26/09/10)

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
En ligne MaxguN # Posté le 19/08/2010 à 04:13:09
Ka-BOOM
Avatar
Flux RSS
close

Ville : Evry
Pays : France métropolitaine
Études : Université d'Evry Val d'Essonne (UEVE)
Bonjour à tous!

Certains d'entre vous connaissent peut-être déjà IdemK. IdemK est une petite équipe amateur de développement de jeux vidéos. Nous n'avons pour l'instant aucune réalisation concrète et finie mais nous y travaillons d'arrache pied. Pour ma part je suis le développeur principal d'IdemK.

Aujourd'hui je viens vous présenter le fruit de quelques mois de travail: Odge.


Un tour d'histoire


Au commencement, un projet innovant


Il faut remonter un peu dans le temps pour comprendre d'où vient Odge. Au commencement il y a Innov'game 2010, Kaltorac le Game Designer et fondateur d'IdemK a une idée pour le concours, un univers lui trottait déjà dans la tête depuis quelques temps, en y ajoutant un gameplay atypique nous avions ODO-TCG, un browser game basé sur le principe d'un TCG. Malheureusement nous ne fûmes pas retenus pour Innov'game, et au final ODO était de bien trop grande envergure pour un délai de réalisation imposé aussi court.

Au final nous avons décidé de continuer sur notre lancée en terme de gameplay et d'aller vers des choix techniques innovants. Parmi tous ces choix, la partie graphique. Naturellement la balise canvas introduite par HTML5 était toute choisie. Et c'est là qu'au fil du temps Odge est né.


Que le plateau soit et ODGE fut


ODO utilise un plateau en 2D isométrique. Les personnages représentant les cartes sont placés dessus et doivent pouvoir se déplacer. Le joueur doit pouvoir accéder à son tapis de cartes et à sa main pour jouer. Outburst Divine Graphics Engine, autrement dit ODGE (prononcer "odji"), est un moteur qui gère tout ça. Il permet assez simplement de générer un terrain, d'y placer des éléments actifs, de créer une interface et de générer des actions possibles.


Un tour d'ODGE


Parlons technique


Odge est réalisé en Javascript. Il génère une balise canvas et l'utilise pour y afficher le terrain. Niveau compatibilité, il tourne au moins sur les dernières versions de Safari, Firefox, Opera et Chrome. Le test avec IE9 preview 4 qui est censé gérer les canvas n'a pas été concluant. Niveau performances, Chrome génère le meilleur rendu suivi de pas trop loin par Opera. Safari s'en sort pas trop mal bien que l'utilisation soit laborieuse à force et Firefox n'est pas très loin derrière.

Pour l'instant Odge utilise le contexte 2D du canvas, à l'avenir je pense rendre possible l'utilisation de webGL pour le rendu ce qui aurait pour effet d'améliorer les performances... tout en réduisant la compatibilité. Concrètement, le moteur affiche actuellement environ 30 ips avec Chrome sous linux et une résolution de 1440x900. Pour ce qui est du plus bas, Firefox plafonne à 6-8 ips sous windows. si 20 ips est suffisant pour rendre ODO fluide, il n'en ira pas forcément de même avec d'autres jeux utilisant Odge. C'est pourquoi un gain de performance est primordial.


Parlons pratique


Un jour je me suis demandé ce qu'il se passerait si les jeux par navigateur pouvaient être plus dynamiques, totalement à l'image des jeux classiques. C'est alors que j'ai décidé de rendre ce moteur disponible à tous. Odge est distribué sous licence MIT. Le choix de l'open source a été fait pour pouvoir en faire profiter le plus de monde possible mais aussi pour avoir des retours sur l'implémentation et dynamiser le développement de l'outil.

Pour ce qui est de l'utilisation, je vous poste un petit exemple ici mais vous trouverez de plus ample détails sur la page d'hébergement d'Odge dont le lien se situe en bas de page.

Code : JavaScript
1
2
3
4
5
6
7
8
9
var odo = new Odge({debug:true,drawfps:true,maxfps:30});
odo.map([/*ici les données du terrain*/]);
odo.images([
       {label:'herbe',data:'images/herbe.png',bind:0,def:true,collides:false},
       {label:'arbre',data:'images/arbre.png',bind:1,collides:true,offset:{x:20,y:-104}
]);
odo.addActiveElt(12,15,'MaxguN','images/nainguerrier.png',{x:40,y:-58});

odo.start();




Un tour pour la fin


Voilà, j'espère que Odge vous plaira. Gardez simplement à l'esprit que pour l'instant Odge est en version 0.2, il y a encore des bugs, tout n'est pas implémenté (loin s'en faut), même le code est peu commenté, il reste donc beaucoup à faire. Malgré ça, toutes les remarques, propositions, contributions, invitations et autre push d'idées sont les bienvenues.

Pour information, j'ai hésité dans le choix de la licence... Distribuer Odge en tant que Beerware m'aurait bien intéressé mais que voulez-vous, il faut savoir rester sérieux parfois. Enfin sachez que je ne rechigne pas à l'invitation du verre ;)




Infos pratiques


Maintenant que j'espère vous avoir mis l'eau à la bouche, voici tout ce qu'il vous faut. La page d'Odge contient une documentation sommaire qui permet d'essayer le moteur. Elle commence à s'étoffer un petit peu et permet d'avoir quelques rendus assez sympa. L'utilisation d'un générateur de documentation est prévue dans quelques versions. Le prototype d'ODO utilise une vieille version d'Odge, bien avant sa restructuration. Vous pouvez voir le code, vous verrez la différence ;) .



Mises à Jour


26.09.2010


Sortie de la version 0.2 de Odge. Une nouvelle version de la page web contenant la doc.
Parmi les nouvelles fonctionnalités on a les gestionnaires d'évènement sur l'interface et le plateau, optimisation de l'affichage sur les déplacements, ajout de paramètres pour la taille et le positionnement de la fenêtre du jeu, possibilité de paramétrer la taille des cases du terrain et quelques bug fixes aussi notamment sur la sélection d'éléments actif ou bien le chargement des images (pas totalement réglé).


Page web: http://odge.idemk.fr/
Téléchargement: Odge 0.2
Démonstration d'Odge: http://odge.idemk.fr/demo/
Prototype d'ODO: http://www.outburstdivine.fr/Partie/proto/
Blog d'Idemk: http://blog.idemk.fr/ (j'y parle souvent d'Odge)
Édité le 26/09/2010 à 23:51:01 par MaxguN
Image utilisateur & Prost Warsiut & Image utilisateur & Odge

SdZ: Outburst Divine Online TCG - Odge
Misc: Homepage - wBoard
 
Publicité # Posté le 19/08/2010 à 04:13:09

Hors ligne Galip # Posté le 19/08/2010 à 17:34:47

Hello,

Bonne présentation, ça fait plaisir de voir une présentation si bien construite.
Maintenant, concernant le moteur, j'ai testé la démo et je tournais à entre 4 et 5 fps. Je ne sais pas si cela est du à mon navigateur (Firefox 3.6.8 sous Ubuntu) ou à une mauvais conception, d'où ma question :
Avez-vous utilisé des techniques d'optimisation ? Même basique comme le fait de ne pas afficher la carte non visible à l'écran.

Bonne continuation
Image utilisateur
 
Hors ligne Link01 # Posté le 19/08/2010 à 17:58:38
▃▄▅▆LINK▆▅▄▃
Avatar
close

Super sa prend forme quelques difficulté aux mouvements mes c'est bien fait.

Ps: ça me fait penser a dofus un peu non? :-°
En cliquant ici
Secret (cliquez pour afficher)
La légende prend vie
projet 45%

▌▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥<couleur nom="rouge">▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▥▌55%

|͇ ͇ ͇ ͇
 
Connecté MaxguN # Posté le 19/08/2010 à 18:28:34
Ka-BOOM
Avatar
Flux RSS
close

Ville : Evry
Pays : France métropolitaine
Études : Université d'Evry Val d'Essonne (UEVE)
@Galip: je suis content de voir que la présentation est apprécieé :). Pour ce qui est des performances, j'en parlais justement dans le "Parlons Technique", Firefox obtient le plus mauvais score, 6-8fps sous linux chez moi et surtout un framerate instable. Je crois que c'est dû à la manière dont je gère le rafraichissement de l'image, j'ai l'impression que FF n'aime pas trop l'overflow avec setInterval (surtout avec un affichage fullscreen). Des améliorations sont prévues mais comme j'utilise Chrome pour vérifier mes rendus cela ne me gène pas pour l'instant. Bien sûr je m'en occuperai avant la sortie publique de ODO.
En ce qui concerne l'optimisation, j'ai amélioré quelques petites choses depuis la première version et j'ai vu un gain sur tous les navigateurs mais en effet la carte entière est calculée à chaque fois. Il faut quand même savoir que ces calculs sont rapides, ce qui prend le plus de temps reste l'affichage en tant que tel et tout ce qui est en dehors de la zone de dessin n'est pas "affiché". Pour illustrer ce que je veux dire, déplace la totalité du terrain en dehors de la zone de dessin
tu verras que le framerate remonte (20-25 chez moi).
Chrome a vraiment implémenté les choses de manière optimale pour la façon de je me sert de javascript, il va falloir que je trouve comment adapter tout ça pour que ça convienne à tous les navigateurs.

@Link01: Pour le rapprochement avec Dofus, si tu parles du prototype d'ODO oui c'est normal, cependant le style graphique est en train d'évoluer, donc il y a des ressemblances mais nous cherchons aussi notre propre identité.
Image utilisateur & Prost Warsiut & Image utilisateur & Odge

SdZ: Outburst Divine Online TCG - Odge
Misc: Homepage - wBoard
 
Hors ligne Shivaan # Posté le 19/08/2010 à 18:49:54
JS Addict
Avatar
close

Ville : Coux et bigaroque
Pays : France métropolitaine
Salut,

Alors l'idée est super, ça a l'air bien avancée, mais le côté technique, je trouve que vous avez mal prévu le coup.

Canvas, ça permet de faire plein de choses. Mais c'est pas du tout prévu pour afficher des centaines d'images, et les gérer en même temps (ça vient du fait qu'il faut d'abord générer les images dans le DOM puis les implémenter dans le canvas)
Ce qui fait qu'au final, ça rame. Et plus il y aura de choses, plus les navigateurs vont être à la ramasse.

Je pense que l'implémentation qu'on prévu les gens de chez Aves Engine est la mieux. Il ne faut se servir de canvas que pour traiter les images, pas les afficher. Grâce à canvas, on peut découper les images pour supprimer les parties transparentes, ce que rend les clics plus "naturels".
ils expliquent ça mieux que moi ici : http://www.youtube.com/watch?v=Ol3qQ4CEUTo

Si vous adaptiez votre moteur avec cette technique, vous feriez des ravages. Et pour m'intéresser de très près au sujet, je pense que je n'exagère pas.

En tout cas, c'est un gros boulot que vous avez fait là. Je vous encourage à continuer et vous félicite ^^
Ne me contactez plus pour de la modération, pour OnHack ou pour PodZ. Tout ça est derrière moi et y restera.

Node.JS User
Protégez votre liberté. Soutenez la Quadrature du Net
 
Connecté MaxguN # Posté le 19/08/2010 à 21:32:23
Ka-BOOM
Avatar
Flux RSS
close

Ville : Evry
Pays : France métropolitaine
Études : Université d'Evry Val d'Essonne (UEVE)
Merci pour le link Shivaan.

J'ai regardé la vidéo, ouai sympa je vois tout à fait l'idée, et le rendu est bon. Je suis aussi passé sur le blog de Dextrose pour y lire leur argumentaire sur pourquoi canvas n'est pas un choix évident.

Par contre je suis pas vraiment d'accord avec ce qu'il y est dit, ni avec les arguments que tu m'avances. Les images n'ont pas besoin d'être chargées dans le DOM. Pour initialiser une image tu fais var monImage = new Image(); puis monImage.src = "masuperimage.png"; pour la charger. C'est un objet HTMLImageElement, à aucun moment il n'est chargé dans le DOM (à moins que je ne me trompe totallement) et il est utilisable tel quel avec un canvas. Puis pour le nombre d'images, la quantité est identique que ce soit avec CSS comme le Aves Engine ou avec canvas comme Odge.

Le canvas demande à gérer plus de choses là je suis d'accord, simplement parce que ça n'utilise pas le moteur de rendu du navigateur. Je pense que le fait que canvas soit jeune joue en sa défaveur en terme de performances. Notamment les différentes implémentations, le rendu est très bon sous Chrome là où les autres navigateurs affichent des ralentissements. Ok je me base sur une démo qui utilise peu d'images différentes pour l'instant, mais je suis convaincu qu'il est possible d'avoir un très bon résultat en passant par l'utilisation de canvas.

Ma volonté première est vraiment d'aller chercher les innovations qu'on nous présente sur html5 pour en faire quelque chose. Pour l'instant ce sont les canvas dans un context 2D, d'ici quelques temps je passerai au context webgl et là avec une accélération matérielle les performances devraient être au rendez-vous.

Si tu as d'autres arguments à me présenter je suis preneur, je vois bien avec le rendu de l'Aves Engine que les performances en CSS sont au rendez-vous mais je ne suis pas encore convaincu pour quitter mon canvas.

Et pour finir merci encore une fois, pour les encouragements et les félicitaitons ^^.
Image utilisateur & Prost Warsiut & Image utilisateur & Odge

SdZ: Outburst Divine Online TCG - Odge
Misc: Homepage - wBoard
 
Connecté MaxguN # Posté le 26/09/2010 à 23:56:47
Ka-BOOM
Avatar
Flux RSS
close

Ville : Evry
Pays : France métropolitaine
Études : Université d'Evry Val d'Essonne (UEVE)
Bonsoir à tous.

Je viens vous annoncer la mise en ligne de la version 0.2 de Odge.

Parmi les nouvelles fonctionnalités on a les gestionnaires d'évènement sur l'interface et le plateau, optimisation de l'affichage sur les déplacements, ajout de paramètres pour la taille et le positionnement de la fenêtre du jeu, possibilité de paramétrer la taille des cases du terrain et quelques bug fixes aussi notamment sur la sélection d'éléments actif ou bien le chargement des images (pas totalement réglé).

Une nouvelle version de la page de présentation d'Odge est également en place, elle permet de mieux se retrouver dans la documentation succincte et est plus agréable à la vue de manière générale. Une démo est en place dès la page d'accueil pour accrocher les visiteurs ;).


Voilà s'il y a des développeur intéressés pour s'amuser avec ou bien se balader dans les sources n'hésitez pas à me faire signe et à ma rapporter toute suggestion, idée, proposition ou que sais-je encore. Bon le code est toujours pas beaucoup du tout commenté, mais ça va venir je le jure >_<

Voilà, en espérant que ça puisse en intéresser quelques uns.
Image utilisateur & Prost Warsiut & Image utilisateur & Odge

SdZ: Outburst Divine Online TCG - Odge
Misc: Homepage - wBoard
 
Hors ligne Aquarius # Posté le 27/09/2010 à 00:10:53
Indexed Sequential Access Meth
Avatar
Excellent projet , en espérant qu'il va s'améliorer tant sur les performances que sur les nouveautés
Exercices pour débutant sur les tableaux à une dimension , à deux dimensions, sur les fichiers et autre
Conio pour mac et windows en C
 

Retour au forum "Présentation de vos projets" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx


Lire aussi