Partage

[big-tuto] Créer un RPG avec HTML5

Qui voudrais compléter le tutoriel existant ?

24 octobre 2016 à 9:42:04

A quand la suite du tuto ?
La doc, c'est comme le PQ, ça sert à se démerder tout seul.
7 novembre 2016 à 1:43:15

Malheureusement, je n'ai plus de nouvelles de jam-jam68140 qui avait démarré ce projet, mais qui ne souhaite pas qu'il soit publié en l'état, il voudrait le revoir plus tard.

Je suis en train de repartir du tuto initial de Sebcap26 car lui m'a donné la permission de le réutiliser. J'avais fait une version reprenant son code avec mes propres images (sur une autre version où j'ajoute du texte sous le canvas : ça bugue), mais je l'avais trouvé compliqué la première fois que je l'avais réalisé, donc j'aimerais en faire une version simplifiée, avant d'implémenter une suite, si j'y arrive.

J'ai ajouté aujourd'hui dans la page liens de mon jeu Guyana-Dream d'autres essais de code que j'ai faits, en simplifiant celui de Sebcap26 et en commentant le code au maximum. Ils sont au-dessus du petit tileset avec un arbre et du singe. Le plus avancé, jeu-sd5 ne montre qu'une map avec juste une image de singe fixe dessus, il faut relancer la page si l'image du singe n'apparait pas immédiatement, car je n'ai pas encore fait de pre-loader.

Une fois que j'aurai plus avancé, je pourrai mettre quelque chose en ligne, mais ça prend beaucoup de temps et c'est frustrant de ne pas avoir d'aide  de personnes plus calées que moi pour être sûre de ne pas donner de mauvais conseils.

Je t'envoie par MP ce qu'avait fait jam-jam68140, il est d'accord pour ça.

-
Edité par doudoulolita 7 novembre 2016 à 2:01:56

15 janvier 2017 à 19:51:53

Bonne année au cas où quelqu'un reviendrait sur ce topic...  :)

En attendant de pouvoir poursuivre le tuto ou de trouver quelqu'un pour le faire (ça intéresse quelqu'un ?), je cherche encore des liens intéressants sur HTML5, javascript et la balise canvas que j'ajoute aujourd'hui dans la page de liens de Guyana-Dream.

J'avais depuis longtemps un problème de chargement de mes images, et j'ai trouvé ce vieux topic sur lequel ils expliquent comment préloader les images :  https://openclassrooms.com/forum/sujet/charger-des-images-13139. J'espère avoir le temps de le tester bientôt.

J'essaierai aussi de mettre en ordre et de commenter tous ces liens pour que ce soit plus facile à utiliser.

Outre phaser, j'ai vu aussi des tutos sur pixi, sans même parler de la librairie jquery, je ne sais pas si c'est mieux de travailler avec ou s'il faut mieux continuer avec juste javascript et la balise canvas. Il y a aussi pas mal de tutos qui utilisent des classes (avec prototype, par ex), mais c'est plus compliqué à comprendre quand on débute.

12 avril 2017 à 18:15:49

Toujours personne ici, mais voici quand même quelques nouvelles :

Je continue à avancer sur mon jeu Guyana-dream en travaillant le jaguar, sur Blender pour la modélisation et la texture (lors du Blender User Group de mars) et en 2D pour étudier l'animation. Mais ceci n'est pas le plus utile pour ceux qui s'intéressent à ce topic.

J'ai participé 2 fois à des réunions de "JavaScript Les Doigts Dehors". Ce sont pour la plupart des développeurs pros, très sympas.

A chaque réunion, chacun expose un problème en javascript à résoudre, très concret, et ceux qui le souhaitent peuvent aider les autres. Puis on présente le résultat, fini ou non, et on refait le même ou un autre problème. Certains m'ont ainsi aidée à débuguer mon code.

Cette manière de faire en s'aidant les uns les autres et/ou en s'obligeant à faire des recherches précises est très formatrice, on se disperse moins.

Je continue à mettre l'avancée du code du jeu dans les liens : par exemple, sur jeu-sdj2b j'ai supprimé le comportement de scrolling par défaut des flèches du clavier qui  faisait bouger le canvas en même temps que le perso. Maintenant, il faut que le curseur de la souris reste bien situé dans le canvas pour que le déplacement du perso fonctionne. Ce serait sans doute plus simple de changer les touches de déplacement !

Je ne sais pas si j'arriverai un jour à finir le tuto ou si quelqu'un d'autre viendra le faire, mais au moins, je vois où je dois progresser : j'ai encore du mal sur la requête XMLHttpRequest() car je n'ai pas encore bien compris la fonction callback.

Je réviserai ce point plus tard, car je dois faire moins d'ordi (ça m'a provoquée de la tendinite ...)

15 mai 2017 à 15:46:10

Bonjour,

Même si c'est encore expérimental essai peut être de partir sur l'API fetch qui remplace avantageusement XMLHttpRequest ;). Ce n'est plus des callback mais des promises, peut être plus facile à appréhender (du moins dans leur utilisation).

Un petit +1 si je vous ai aidé est toujours appréciable :).
14 juillet 2017 à 21:56:55

Je n'ai pas eu beaucoup le temps de venir sur le forum depuis longtemps, merci pour le lien. Pas d'avancée sur mon jeu non plus, trop de boulot et de projets persos.

J'avais quand même fait un changement sur la page Tuto, mais je dois revoir encore pas mal de choses, et surtout bien comprendre si un jour je veux bien expliquer.

Un ami m'a conseillé aussi de voir la théorie des collisions, pour mieux comprendre comment ça marche.

19 juillet 2017 à 11:48:36

Salut la compagnie !

Je viens de suivre ce cours trouvé un peu par hasard et c'est vrai qu'on a une sacrée envie de poursuivre le tuto pour le finaliser. J'ai fais un tour sur ton site doudoulolita et je suis assez intéressé par le plan de ton tutoriel. C'est assez complet, on aborde toutes les parties intéressantes et de manière à bien comprendre les choses en profondeur. 

J'ai l'impression qu'il ne manque plus que la rédaction. 

Besoin d'aide ? Je me propose :)

30 juillet 2017 à 17:40:29

Est-ce qu'il y a encore une personne qui bosse sur la suite du tuto ? Parce que personnellement sa me serait extrêmement utiles ?
19 août 2017 à 16:02:39

Merci TakCastel, Je serai heureuse d'obtenir de l'aide car j'ai du mal à avancer. Je suis contente que le plan que je propose te convienne. Comme il me reste encore quelques jours de vacances, je comptais m'amuser un peu sur mon jeu et ajouter des choses sur le site.

Le tuto qu'avait commencé jam-jam68140 était bien, mais il ne voulait pas le publier tel quel. J'ai du repartir de celui de sebcab26 qui lui, m'avait donné son autorisation de le continuer. J'ai ensuite mélangé un peu les 2 et fait le reste à ma sauce. J'essaie en ce moment de retravailler mon code de manière plus logique avec des commentaires qui pourraient servir pour le futur tuto.

BrokJade , si j'ai de l'aide de quelqu'un qui s'y connaît mieux que moi, ça avancerait beaucoup plus vite. J'apprends juste en faisant mon jeu et en cherchant d'autre tutos. Je te suggère de faire pareil en attendant ! Je peux t'envoyer par MP ce que jam-jam68140 avait fait, ça, il est d'accord, si tu ne le publies pas.

Le tuto de sebcap26, malgré ses qualités, me semblait compliqué pour des débutants. J'ai essayé pas mal de choses (à voir dans les liens) et j'ai aussi appris comment bloquer un scrolling gênant quand on est sur le canvas sur jeu-sj2b.

Mon tout dernier essai est jeu-sdj-v4 j'ai ajouté du texte sur le canvas. Il permettra d'expliquer les collisions de manière progressive, avec le petit singe capucin et la fougère "bloquante" qui font la même hauteur qu'une tuile, puis en utilisant l'atèle, plus grand, et le palmier Tucum sur 4 tuiles.

J'ai simplifié les maps en indiquant dans le tableau tuileInterdite, le n° des tuiles sur lesquelles on ne peut pas marcher (dans le fichier evenements.js). Mon tileset a changé pour pouvoir être utilisé en tout petit (1 ou 2 lignes) puis plus grand. Dans le tuto, il faut aussi que le canvas soit d'abord petit puis + grand.

A noter qu'il y a plusieurs façon de faire les choses, par exemple, jam-jam68140 souhaitait faire les changements de maps avec php, alors que sebcap26 utilise un fichier json et le récupère avec Ajax (moi, j'ai des problèmes avec l'asynchronie) et il utilise des classes et la programmation objet très vite dans le tuto.Pour les collisions, les arbres peuvent être sur une autre map, ou sur un autre tileset, je ne sais pas ce qui est le mieux.

J'avais pensé à un moment à essayer de faire une version bien avancée du jeu et à juste donner les explications du code (cf explcations-code.html où on a les explications en cliquant sur les flèches), mais je n'ai pas terminé et j'ai beaucoup changé mon code depuis.

Sinon, il faut faire chaque étape, montrer les bases, presque fonction par fonction puis expliquer comment les faire fonctionner ensemble, et c'est beaucoup plus long.

19 août 2017 à 18:12:55

Y a-t-il un cours ouvert dans le courseLab ?

Pour ma part je suis en train de travailler sur un autre cours pour développer un petit jeu de rôle narratif par navigateur avec reactJS. Si vous aimez la façon dont je présente mon cours (vocabulaire, présentation des étapes, la plume en soit ^^), je suis prêt à faire pareil pour votre cours, ça serait sympa qu'on se contact par MP ou autre pour discuter de ça ensemble.

Perso la semaine prochaine je suis en vacances, je serais plutôt dispo à partir de la rentrée, tenez moi au courant ;)

20 août 2017 à 6:52:32

Je n'ai encore rien mis sur le courseLab tant que le tuto et le jeu ne sont pas au point. Je n'ai pas le niveau en programmation, je pense. C'est plus ça qui me pose problème que la rédaction.

Je ne fais pour l'instant que quelques essais en HTML pour le début du tuto, que je mets en lien sur le site Guyana-Dream : tuto00.html pour les bases du HTML et tuto01.html qui présente le remplissage de couleur du canvas. J'en suis vraiment au début ! Ça me permet jusqu'ici de les montrer à d'autres personnes pour correction et d'y aller doucement.

Aujourd'hui, j'ai trouvé une vidéo sur l'animation des personnages qui m'a permis de mieux comprendre comment ça fonctionne et de le refaire à ma sauce. J'ai aussi remis à jour ma page de liens. 

J'ai lu le début de ton tuto (je me permet de te tutoyer, si ça ne te dérange pas) et ça me semble bien écrit et clair, même si ton tuto est à un niveau plus élevé que ce que je souhaite faire pour l'instant. Je désirerais quelque chose d'assez facile, avec juste du javascript, et la possibilité de changer les variables facilement en tête de fichier js.

J'aimerais bien que le tuto soit en licence CC-BY-SA, même pour les utilisations commerciales (afin que ce soit vraiment une licence libre), est-ce que ça te convient et est-ce que c'est encore possible sur Openclassrooms ?

Pour ma part, le fait de faire moi-même les recherches en vue de ce tuto me permet de m'améliorer, mais pour les personnes intéressées par la réalisation de leur propre RPG, comme BrokJade , le temps d'attente commence à devenir une éternité !

Si tu préfères faire la suite du tuto de sebcap26 et partir de ce qu'il a fait, c'est peut-être plus intéressant pour toi ? En gros, il suffit de commencer à la partie Collision de ma feuille de route, mais lui a déjà des Classes presque depuis le début du tuto. Je suis arrivée à refaire son tuto avec mes images, mais j'ai eu du mal. J'ai ensuite fait une version avec un code un peu simplifié mais je n'ai pas terminé et je bute sur certaines choses comme les collisions.

A part les images de Guyana Dream, tu peux trouver pleins de spritesheets et de tilesets sympas sur OpenGameArt si besoin. J'en ai mis pour ma part quelques-uns.

On en reparle après tes vacances. Moi, je profite des quelques jours qui me restent pour m'amuser jours et nuits sur javascript !

31 août 2017 à 23:08:00

Re :)

Malheureusement, je n'ai pas beaucoup de temps à consacrer à un tuto, ni à mon moteur. J'ai repris le développement très récemment, et il s'approche de ce qu'il faut pour le core d'un RPG. Voilà les fonctionnalités déjà implémentés:

  • Chargement d'images , de fichiers JSON, de sons
  • gestion basique des évènements souris, clavier et tactiles
  • gestion des sprites
  • gestion des particules (sans collisions)
  • gestion des tilemaps, avec collision et scrolling
  • système de sauvegarde

Du coup, je commence à connaitre ces sujets et je pense pouvoir aider. Si quelqu'un veut me MP je pourrais essayer de filer un coup de main :)

7 septembre 2017 à 3:07:41

Pas mal de nouveautés sur le jeu en page d'accueil du site Guyana-Dream, avec 2 aras qui volent au-dessus du décor. Mon code n'est pas aussi pratique que je le souhaiterais, je n'arrive pas à leur donner des vitesses différentes, par exemple.

Dans la page tuto du site, je viens d'ajouter un nouvel essai simplifié montrant les collisions suivant les coordonnées x et y d'une tuile (et non le numéro de la tuile). Il y a sans doute des erreurs dans mon code, mais les collisions sont ce qui me pose le plus de problèmes.

Je me suis basée sur mes codes précédents, très simples, qui permettent d'afficher la carte et d'animer le perso.

L'animation bugue un peu, et si on reste appuyé sur les flèches du clavier, le perso finit par sauter par-dessus les éléments qui sont censés le bloquer...

J'ai commencé à rédiger un cours sur Openclassroom mais c'est encore le début. J'ai fait le plan et écrit comment on met en place la page HTML avec la balise canvas.

Je le mettrai dans le CourseLab quand j'aurais un peu plus avancé à la fois sur mon code et sur la rédaction des explications de base.

[big-tuto] Créer un RPG avec HTML5

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown