25 réponses à ce sujet

[nicolas.gauville]

Bonjour à tous,
Je viens vous présenter un nouvel article sur les jeux à base de tuiles isométriques (sa ne doit plus surprendre personne !) en HTML5 et JavaScript à l'aide de la balise Canvas. L'article sera en plusieurs parties, et je viens de terminer le premier chapitre. Vous pouvez le lire ici .

J'aimerais un premier retour de vos impressions sur ce chapitre.
Merci d'avance,

Nicolas GAUVILLE.

[Badwolf]

C'est une bonne entrée en matière, notamment pour les personnes n'ayant jamais utilisé la balise Canvas et ayant peu de connaissance sur les tuiles/iso

plus par curiosité, j'aurais quelques questions:

quel type de jeu comptes-tu développer au long de ce tutorial ?

quels frameworks JS vas-tu aborder ? JQuery, Backbone, Play, createJS(EaselJS) ?

Bonne continuation

[metaroid]

Cool ce genre de tutos, par contre quand tu mets:


"Pour obtenir une tuile de base (un sol), il suffit de dessiner un losange dont la hauteur est égale à la moitié de la largeur.On peut, par exemple, prendre un carré, le faire pivoter de 45 degrés, et diviser sa hauteur par deux pour obtenir ce résultat."
Ça c'est faux ...

[nicolas.gauville]

blitz, le 09 July 2012 - 14:25 PM, dit :

quel type de jeu comptes-tu développer au long de ce tutorial ?

Comment sa ?

blitz, le 09 July 2012 - 14:25 PM, dit :

quels frameworks JS vas-tu aborder ? JQuery, Backbone, Play, createJS(EaselJS) ?

Sa je ne sais pas encore. J'essaie d'éviter l'utilisation des frameworks dans les tutos habituellement, pour ne pas contraindre celui qui le lis (même si moi, j'en utilise). Je réflechi depuis un moment sur leur utilisation ou non dans ce tutoriel, mais j'ai pas encore d'avis définitif la dessus. Il est probable que je les abordes sur des points précis (du genre "avec/sans tel framework"), pour indiquer une fonctionalité simplifiée avec l'un des frameworks, sans pour autant baser le cours dessus.

metaroid, le 09 July 2012 - 15:23 PM, dit :

"Pour obtenir une tuile de base (un sol), il suffit de dessiner un losange dont la hauteur est égale à la moitié de la largeur.On peut, par exemple, prendre un carré, le faire pivoter de 45 degrés, et diviser sa hauteur par deux pour obtenir ce résultat."

C'est la méthode que j'utilise depuis une dizaine d'années, tu es sur que tu as bien compris ce que je voulais dire ? (il faut dire qu'en texte, c'est pas génial pour expliquer ce genre de choses. J'avais fait un schéma d'ailleurs, mais je ne sais plus ou il est, je regarderai dans mes précedents tutos, j'ai déjà du faire des schémas la dessus, depuis le temps que je traite l'isométrie).

Sinon, merci à vous deux

[metaroid]

Il semble que se soit une aberration liée au jeux vidéos (et je connais pas les contraintes de ce domaine). Parles alors de "fausse" perspective isométrique pour les vidéo game, tu éviteras de chiffonner certains graphistes

[dldler]

OK, axonométrique serait plus juste. Mais isométrique est accepté par le commun des mortels (dont certains autres graphistes).

[Boulet mode == ON]
De toute façon, axono ou iso, ce n'est pas de la "vraie perspective", donc, dans tous les cas, vous devriez parler de "fausse perspective". De la vraie, il n'y en a qu'une de recevable : la perspective Escherienne. :-P
[Boulet mode == OFF]

:-)

[metaroid]

on dira pas fausse perspective mais "mode conventionnel de représentation". Je connaissais Escher (travaux..) mais pas l'appelation "perspective Escherienne", pour la "vraie" perspective on parle aussi souvent de "conique" ou "d'aspect".
Pour revenir au sujet, c'est juste que j'ai été surpris de ce genre de méthode, une véritable isométrie à l'oeil serait probablement plus harmonieuse dans le rendu final ... après ce n'est qu'un point de vue purement spéculatif

[Monsieur Spi]

Citation

c'est juste que j'ai été surpris de ce genre de méthode, une véritable isométrie à l'oeil serait probablement plus harmonieuse dans le rendu final

Il s'agit en fait de compromis, il en est souvent question quand on parle de jeu vidéo où le choix qui prime le plus souvent est celui de la technique et des calculs. Une "iso" à 45 degrés et division de hauteur te permet de simplifier tes calculs et de les alléger énormément car c'est alors une simple rotation et division par 2 (ce qui peut se faire avec un simple décalage de bit bien plus rapide qu'une division classique). C'est pourquoi dans les jeux dit "en perspective isométrique" la norme la plus répandue est la rotation par 45 degrés et division de la hauteur par deux. Ce n'est pas exact pour un graphiste mais c'est très largement valable pour le développeur, et comme dans tous les jeux on préfères souvent tricher que d'essayer d'avoir un rendu réaliste pour beaucoup de points c'est devenu une habitude pour beaucoup (joueurs compris)

PS : merci frangois qui avait soulevé ce point sur un autre sujet, si tu passes par là et que tu as des explications plus précises n'hésites pas.

[dldler]

metaroid, le 09 July 2012 - 17:40 PM, dit :

pour la "vraie" perspective on parle aussi souvent de "conique" ou "d'aspect"

Que nenni La perspective conique es à peine plus juste que l'iso. Léonard de Vinci avait déjà franchit le pas en proposant la perspective cylindrique à l'horizontale. Et Mr Escher a franchit* celui de la perspective curviligne en 2 temps : il s'est amusé à retourner la perspective cylindrique à la verticale. Puis il a additionné les 2… Mathématiquement correcte, cinématiquement efficace.

(* ou au moins, s'il n'est pas le premier, il me l'a fait découvrir…)

Je chipote juste parce que j'ai passé des heures à contempler et reproduire certains travaux d'Esher.

Et pour être plus constructif :
il n'y a pas de souci entre perspective iso et axono. L'iso etant un rapport vertical particulier d'axono.
Pratiquement ; on peut fabriquer des tuiles par 45° et 50% d'échelle. Quand on a terminer la construction, il suffit de jouer sur l'échelle verticale (ou horizontale d'ailleurs) du conteneur pour retrouver une iso clasique.

[Badwolf]

Sincèrement ceux qui souhaitent juste profiter du tutorial ne vont rien comprendre à votre débat philosophique, et stérile, qui au final ne changera pas le contenu du tutorial et n'apporte rien de concret au développeur.

ce qui est intéressant c'est simplement le processus des tuiles ou de l'iso en HTML5/JS (le sujet en gros...)

[nicolas.gauville]

D'accord.

Apparement, le sujet est à debattre. Si on peu finir par trouver une réponse claire (je ne m'y propose pas, je ne me suis pas suffisament porté sur le domaine, comme dit plus haut, j'ai une approche "programmeur" de la chose"), ce serais bien de l'ajouter au tuto. Enfin, je veux dire, si on obtient une conclusion concrete sur le sujet, je ne manquerai pas de la synthétiser et de l'ajouter, sa peut toujours être intéressant. J'ai d'ailleurs rédigé un certain nombre de cours sur le sujet (notamment le dessin en isométrie sous flash), ça pourrais donc être très intéressant de les compléter.

En tout cas, c'est très agréable de voir ce genre de débats autour d'un tuto . J'ai fait des nanothéses et autres pour mon école, j'ai rarement eut de retours de personnes connaissant réellement les domaines que j'abordais.

Merci

[nicolas.gauville]

blitz, le 09 July 2012 - 20:46 PM, dit :

Sincèrement ceux qui souhaitent juste profiter du tutorial ne vont rien comprendre à votre débat philosophique, et stérile, qui au final ne changera pas le contenu du tutorial et n'apporte rien de concret au développeur.

ce qui est intéressant c'est simplement le processus des tuiles ou de l'iso en HTML5/JS (le sujet en gros...)

Désolé, j'ai répondus sans voir ta réponse (en même temps quoi).
Pour préciser : je parle d'une petite note (deux lignes, dans l'une des parties), pour préciser la chose. C'est assez habituel chez Médiabox d'être perfectionniste, et étant un peu puriste moi même, je comprends tout à fait que certains veuillent aller au bout des choses. Donc, si tous le monde se met d'accord, on peu mettre "une petite note" .

[Nataly]

dldler, le 09 July 2012 - 20:14 PM, dit :

il n'y a pas de souci entre perspective iso et axono

Si en plus vous causez par apocopes* !




* l'apocope ? ben c'est un métaplasme, vous savez : l'opposé de l'aphérèse.



C'est tout ce que j'ai trouvé pour participer en restant dans le ton

[metaroid]

@dldler: merci , j'ai pas poucé la perspective aussi loin, je vais donc y regarder de plus près
@blitz: stérile ... je trouve pas
En tout les cas, hors débat précédent, j'ai hâte de découvrir la suite

[Kosic]

"Fausse isométrie" ou axonométrique à 50%
Perspective pour l'effet 3D d'illustrator.
Perspective isométrique:

Projection :

Haut
51°
38°
-27°

Gauche
-39°
38°
-27°

Droite
-39°
-38°
27°

Révolution :

Haut
-39°
-38°
26°

Gauche
51°
38°
-27°

Droit
51°
-38°
27

Il en résulte un léger décalage de 0,878°, mais l'effet 3D d'Illustrator, à ma connaissance ne permet pas des réglages en minutes et secondes.

"On dit isométrique car les dimensions dans tous les sens de la perspective sont dans un rapport de 1. Par exemple un cube est formé de trois losanges de dimensions identiques."

Ceci dit j'attends avec impatience la suite de ton tuto… et merci d'avance !

[lilive]

Salut Nicolas,

Encore un gros boulot de ta part je vois, bravo.
Bon, je ne l'ai pas lu, mais j'ai remarqué ça: http://forums.mediab...ost__p__1146859

[sebastien.portebois]

Salut

Le débat iso ou pas a été abordé énormément de fois dans l'histoire du jeu vidéo, au lieu de venir en rajotuer une couche je me permet simplement de compléter le débat avec quelques ressources pour ceux qui voudront approfondir, sans dériver trop longtmeps du sujet initial.

Comme souvent pour des débats classiques de jeu toutes (enfin énormément) les réponses et ressources sont recensées sur le centre d'information d'Amit (Amit's Game programming Information). Pour tout ceux qui veulent approfondir c'est depuis des années une source d'info énorme et pour des questions classique c'est toujours bon à relire !
http://www-cs-studen...prog.html#tiles Je suppose que la plupart des dév de jeu connaissent déjà, mais pour ceux qui auront besoin du tutoriel, ils seront peut être contents de découvrir cette mine d'or en complément.

Exemple de ressources retrouvée la bas pour les projection iso et dimétrique avec les formules mathématiques et les approximations utiles pour le jeu vidéo :
http://www.compuphase.com/axometr.htm

Bonne lecture !

[nicolas.gauville]

Au niveau de l'utilisation de framework, j'y reflechis depuis un moment, et je pense utiliser CreateJS au final, évidemment pour l'utilisation de l'exportation depuis Flash CS6 (ce qui peu être vraiment pratique pour les graphismes, un vecto restant bien plus léger qu'une image), et pour la ressemblance avec l'AS de certaines commandes.

[frangois]

Vous avez tous faux, c'est une dimétrie d'un angle correspondant à tangente inverse de 1/2. On utilise ça parce que en pixels, l'algo de Bresenham fait de plus jolies lignes selon cette angle particulier. Puisque les pixels s'alignent ainsi : http://fr.wikipedia....senham_line.png

Pour l'usage de Canvas, c'est très bien mais ça ne fonctionne pas sur mobiles (ou alors à 2-3 fps). En réalité canvas présentant des perfs extrémement médiocres sur mobiles, il faut utiliser le DOM traditionnellement : faire bouger des div sur la page html. Là vous pourrez faire un "moteur Javascript cross-platform".

Ca reste une excellente contrib, évidemment, je suis taquin.

[dcz.switcher]

Excellente idée et bonne mise en bouche, vivement la suite.

[Nataly]

Oui Nicolas ! Ne te laisse pas impressionner les très forts n'auront pas besoin de ton tuto les autres, dont je suis, y trouveront forcément leur compte surtout avec cette conversation annexée

[nicolas.gauville]

frangois, le 20 July 2012 - 10:30 AM, dit :

Vous avez tous faux, c'est une dimétrie d'un angle correspondant à tangente inverse de 1/2. On utilise ça parce que en pixels, l'algo de Bresenham fait de plus jolies lignes selon cette angle particulier. Puisque les pixels s'alignent ainsi : http://fr.wikipedia....senham_line.png

Pour l'usage de Canvas, c'est très bien mais ça ne fonctionne pas sur mobiles (ou alors à 2-3 fps). En réalité canvas présentant des perfs extrémement médiocres sur mobiles, il faut utiliser le DOM traditionnellement : faire bouger des div sur la page html. Là vous pourrez faire un "moteur Javascript cross-platform".

Ca reste une excellente contrib, évidemment, je suis taquin.

La, NON ! J'ai un iPad et un iPod touch, je fais beaucoup de tests sur les deux, et je tourne bien a 24 fps. Je sais pas comment vous faites, mais en ce qui me concerne, je n'ai aucun problème.

Nataly, le 20 July 2012 - 12:14 PM, dit :

Oui Nicolas ! Ne te laisse pas impressionner les très forts n'auront pas besoin de ton tuto les autres, dont je suis, y trouveront forcément leur compte surtout avec cette conversation annexée

Merci beaucoup pour tes nombreux encouragements réguliers, Nataly, sa me fait toujours plaisir, vraiment !

[Badwolf]

nicolas.gauville, le 20 July 2012 - 18:44 PM, dit :

La, NON ! J'ai un iPad et un iPod touch, je fais beaucoup de tests sur les deux, et je tourne bien a 24 fps. Je sais pas comment vous faites, mais en ce qui me concerne, je n'ai aucun problème.

Ca a été dit et redit , prouvé et reprouvé, qu'à l'heure actuelle, HTML5/JS sur mobile, niveau performance c'est zéro.
juste un exemple facebook a refait entièrement son application mobile (de HTML5/JS à python) car ses utilisateurs se plaignaient de la lenteur.

[nicolas.gauville]

Personnellement, j'ai constaté une belle différence avec la nouvelle app Facebook grâce aux gestes multitouch par exemple, et évidement un gain de vitesse assez logique quand on sait que l.interface n'est plus chargée paŕ exemple.
Par contre, j'ai développé de nombreuses apps en HTML/JS, je développe d'ailleurs un réseau social sous forme de jeu isométrique, et il fonctionne très bien sur mon iPad et mon iTouch, le seul bug que j'ai trouvé pour l'instant c'est sur les sons de plus de 1 mn. Sinon, RAS. Il faut que j'amene des preuves ?

Édit : au passage, j'ai eu des problèmes avec mon mac récemment, et l'ensemble du tuto et de mes projets actuels ont donc été réalisés sur un iPad (bon, avec clavier sans fil quand même, dictée va très bien pour le texte, mais beaucoup moins pour le code). Le code fait sous Diet Coda, les tests sous Chrome et Safari (Chrome ayant pourtant un rendu JS inférieur à celui de safari sur iOS), et les schémas du tuto sous iDraw. Bref, j'ai tout testé sur iOS (autant pour ces tests la que pour des projets plus poussés), jamais aucun problème.

Si vous avez deux minutes, prenez le temps de tester la démo de l'outil d'exportation CreateJS pour flash CS6 sur un iPad, vous verrez que le jeu est parfaitement fonctionnel, les animations parfaitement fluides, etc.
Dans mes jeux, j'utile bien souvent beaucoup de graphismes et effets (parralaxe pour faire un ciel étoilé et une planète qui tourne dans l'un de mes jeux par exemple), et cela marche tout aussi bien sur iPad, par le moindre lague, par le moindre problème d'accéssibilité, bref rien a redire là non plus.

[nicolas.gauville]

Vous pouvez aussi essayer RPGJS sur iOS (fait en HTML5/JS avec Canvas), sa marche très bien également.

[Badwolf]

Après c'est comme tout, ça dépend de la qualité du code et de l'optimisation ainsi que de l'importance de l'application.

je m'appuyais notamment sur cet article : http://www.developpe...-de-trop-lente/

j'ai lu d'autres articles et vu de nombreux témoignages sur diverses applications allant dans ce sens (iOS et Android).

Après cela vient peut être de facteurs extérieurs comme le fait que facebook a juste voulu adapter son réseau social au mobile plutôt que de revoir la chose sous forme de réelle application (web ou native).

plus personnellement les quelques projets que j'ai pu réaliser en HTML5/JS sur mobile n'étant pas de grande envergure, les tests sont forcément positifs.

Mais dans le cadre de développement de client léger, voir lourd, je préfère me tourner vers d'autres technologies comme JAVA ou AIR.

Sinon createJS est super c'est vrai, c'est en plus un vrai pont pour le développeur flash qui souhaite s'orienter vers le HTML5/JS sans perdre ces compétences.

allez place a la suite de ce tutorial très intéressant.