Forums Développement Multimédia

Aller au contenu

* * * * * 1 note(s)

[HTML5/JS] Jeux à base de tuiles

TUTO

25 réponses à ce sujet

#1 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 09 July 2012 - 14:14 PM

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.

#2 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 09 July 2012 - 14:25 PM

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 ;-)
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#3 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 09 July 2012 - 15:23 PM

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 ...


#4 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 09 July 2012 - 15:39 PM

Voir le messageblitz, le 09 July 2012 - 14:25 PM, dit :

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

Voir le messageblitz, 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.

Voir le messagemetaroid, 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 ;)

#5 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 09 July 2012 - 16:53 PM

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 :P

#6 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 09 July 2012 - 17:20 PM

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]

:-)

#7 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 09 July 2012 - 17:40 PM

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 :)

#8 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6917 messages

Posté 09 July 2012 - 19:17 PM

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.

#9 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 09 July 2012 - 20:14 PM

Voir le messagemetaroid, 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.

#10 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 09 July 2012 - 20:46 PM

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...)

:roll: :arrow:
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#11 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 09 July 2012 - 20:52 PM

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 :)

#12 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 09 July 2012 - 20:54 PM

Voir le messageblitz, 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...)

:roll: :arrow:

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" ;).

#13 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 09 July 2012 - 20:55 PM

Voir le messagedldler, 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 :mrgreen:
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#14 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 09 July 2012 - 21:34 PM

@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 ;)

#15 Kosic

    Ceinture Noire

  • Community Manager
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 09 July 2012 - 21:42 PM

"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 !
"La beauté est dans dans l'œil comme le doigt du sage qui montre la lune de l'idiot qui regarde."
J'me comprends…

Illustrator and I

#16 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 10 July 2012 - 12:42 PM

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

#17 sebastien.portebois

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 3876 messages

Posté 10 July 2012 - 13:10 PM

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 !

#18 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 20 July 2012 - 09:12 AM

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.

#19 frangois

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 224 messages

Posté 20 July 2012 - 10:30 AM

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.
Je suis dispo en free-lance. Et j'ai un blog.

#20 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2530 messages

Posté 20 July 2012 - 10:59 AM

Excellente idée et bonne mise en bouche, vivement la suite.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#21 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 20 July 2012 - 12:14 PM

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 :)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#22 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 20 July 2012 - 18:44 PM

Voir le messagefrangois, 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.

Voir le messageNataly, 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 :) !

#23 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 20 July 2012 - 20:49 PM

Voir le messagenicolas.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.
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#24 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 20 July 2012 - 21:09 PM

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.

#25 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 21 July 2012 - 19:02 PM

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

#26 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 21 July 2012 - 19:19 PM

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.
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP