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

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.

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

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

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.

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 

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.

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

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 !

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

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.

Quelques nouvelles : j'ai continué à rédiger le cours sur le site d'Openclassroom et j'ai enfin réussi à produire un code personnel pour gérer les collisions, mais pour l'instant, c'est seulement avec les coordonnées d'une tuile, mais pas avec le tableau de map ni le numéro de la tuile.

Le résultat est visible ici. Il y a quelques bugs et bizarremen, il faut cliquer dans le canvas pour pouvoir utiliser les flèches, mais je crois que mon approche des collisions commence à être à peu près correcte.

J'ai appris dernièrement que le "javascript vanille" était du javscript pur sans ajout de librairies ou autre. Je crois que c'est ce que je fais pour l'instant...

J'aurais bien besoin de quelqu'un qui corrige mon code pour les exemples du tuto, car je ne suis pas sûre qu'il soit impeccable et très logique. J'essaie surtout de diviser chaque partie de manière relativement indépendante des autres mais ce n'est pas si simple.

Toujours personne pour m'aider pour les collisions ? La version 4-4 fonctionne à peu près, mais ça bloque un peu par endroits. J'aimerais bien savoir ce qui ne va pas.

Sinon, je viens de partager ce que j'ai déjà écrit dans le courselab : Un mini-RPG en javascript pour les débutants, c'est possible!

J'espère que maintenant, le lien sera accessible et que j'aurai des retours.

J'ai avancé un peu sur le code pour les collisions, même si ce n'est pas parfait. Les essais sont visibles sur la page tuto de mon site.

J'essaie également de travailler la rédaction du tuto sur Openclassroom mais aujourd'hui, rien de ce que j'ai écrit n'a pu être sauvegardé, ce qui est très frustrant.

Est-ce parce que je l'ai mis dans le Courselab ou parce que ma connexion est moyenne, je ne sais pas. J'aimerais bien savoir ce qui ne va pas.

En attendant, je commence à rédiger la suite avec le logiciel Zest writer, ce qui me permettra de faire du copie-coller plus rapidement dès que l'outil d'édition d'Openclassroom redeviendra utilisable.

-
Edité par doudoulolita 2 novembre 2017 à 0:41:45

Pas de messages d'autres personnes, c'est triste en ce début d'année...Je souhaite quand même à tous ceux qui passeraient sur ce topic une année 2018 pleine de projets et que tout ce qu'ils souhaitent se réalise !

J'ai quand même avancé sur le tuto publié dans le courselab avec la partie expliquant comment écrire du texte et ajouter un cadre.

Sur mon site Guyana-Dream, j'ai aussi pas mal avancé sur le code simplifié du jeu.

J'ai dû faire des petits changements sur mon code en rédigeant le tuto, il va donc falloir que je veille à les changer aussi dans mon jeu d'exemple.

J'en suis au début du chapitre 3 : Déplacer une image. Ça n'avance pas si mal maintenant que mon code est prêt.

Commentaires bienvenus !

Bonjour,
En faisant des recherches sur comment créer un jeu en Javascript, je suis évidement tombé sur le cours incomplet pour créer un mini RPG. Puis en cherchant un peu plus loin j'ai vu ce sujet, et je suis ravi de voir qu'il est toujours actif aujourd'hui !
Et le mieux dans tout ça, c'est de trouver un cours en cours de création. Donc merci de prendre du temps afin que d'autres puissent comprendre ! Je vous en suis très reconnaissante !

Voila ! Je pensais que ça valait le coup de le dire !

Bon courage et merci encore !!!

Oui, ça me fait très plaisir de lire ton message, je commençais à me dire que j'allais laisser tomber le tuto, et juste faire mon jeu pour moi toute seule. Et pourtant, j'aime beaucoup partager.

Si tu as le temps de faire des commentaires sur le jeu et surtout sur le cours, ce serait encore mieux. Savoir si mon jeu d'exemple fait assez RPG (ça manque de combats et de donjons !), si le plan est bon, si c'est écrit clairement, des choses comme ça.

Je ne suis pas une pro du javascript, donc il y a sans doute des améliorations à apporter, mais j'apprends au fur et à mesure.

Je me demandais aussi si je dois laisser l'inventaire (les fruits attrapés) en dehors du canvas ou s'il faut mieux le mettre dedans. Pareil pour le choix des persos, je crois que normalement, on fait ça au début du jeu, et qu'on change d'écran après.

Comme je ne suis pas joueuse, je n'ai pas en tête beaucoup d'exemples pour m'inspirer, qui soit facile pour moi à réaliser en javascript.

Si tu souhaites que j'incorpore certaines idées dont tu as envie pour ton propre jeu, je pourrai faire des essais. Tant que ce sont des principes de base qui peuvent être utiles aux autres, je suis preneuse.

Merci en tout cas pour tes encouragements.

Un petit mot pour dire que j'avance doucement mais sûrement sur les essais qui permettront d'avoir tout le jeu dans la balise canvas, et non pas dans le HTML comme c'est le cas actuellement pour le choix des persos et l'inventaire.

J'ai un problème de variables sur cet essai : L'énergie et le temps continuent à baisser même quand l'écran de fin de jeu s'affiche. Peut-être qu'il faut que je fasse une boucle while plutôt que for, mais j'ai peur de faire une boucle infinie accidentellement.

Le compte des fruits (items de l'inventaire) n'est pas facile à faire non plus. Le numéro des tuiles contenant des fruits sont dans un tableau, c'est leur place dans le tableau qui définit le nombre de points qu'elles donnent, c'est un peu simpliste. Si on marche sur 2 tuiles contenant le même fruit, ça ajoute une deuxième fois le fruit, au lieu de comptabiliser le nombre total de ce fruit.

Par contre, j'ai ajouté pas mal de choses qui font qu'il y a un petit challenge : il faut attraper les fruits avant avant un temps défini. L'énergie baisse au fil du temps et réduit la vitesse. En récupérant les fruits, on reprends de l'énergie et de la vitesse.

Pour tous les essais où j'ai un décor assez lourd à charger, il ne s'affiche pas directement, il faut réactualiser la page. La partie chargement des images est un problème assez compliqué, donc je n'ai pas encore intégré ça, mais il va bien falloir que je le fasse pour la version finale du jeu !

Côté tuto,j'en suis à la partie 4-2 : Ajouter un canvas.

Jam-jam, qui avait commencé ce topic, l'a relu, mais les commentaires qu'il avait mis dans le courselab ne se sont pas affichés. Il va me les envoyer directement via un autre biais.

Merci de laisser vos commentaires, critiques, conseils... ici ou sur le course lab.

S'ils ne s'affichent pas bien dans le courselab, merci de me prévenir afin que j'avertisse les administrateurs d'Openclassroom.

Encore des avancées sur le jeu, qui vont me servir pour le tuto : http://usf.tuxfamily.org/guyana-dream/tuto2/tuto6-4/

Pour le tuto, j'en suis au début des collisions : vérifier si le perso touche une image

J'espère que j'aurai un peu de retours sur ce que j'ai fait. Pour l'instant, il n'y a que jam-jam qui m'a donné des conseils.

Merci d'avance à ceux qui passent par ici de me mettre au moins un petit mot...

Encore moi, je ne désespère pas de finir mon jeu et le tuto qui va avec, et d'avoir quelques personnes qui passent ici... :-(

J'ai cependant un problème : J'ai une version de mon jeu avec 2 singes . Si le singe choisi touche le perroquet, celui-ci affiche "trouve les fleurs". Ensuite, sur la 2ème carte (vers la droite), quand il passe sur les fleurs, le perroquet affiche "tu as trouvé les fleurs" et l'énergie augmente de 10 points.

Sur ma version avec 3 singes, cela ne fonctionne plus. J'ai dû changer quelque chose dans mon code qui a désactivé la condition.

Mon code commence à se complexifier pas mal, je ne sais donc pas trop où j'ai fait l'erreur. Rien ne s'affiche dans la console indiquant une erreur.

Y a-t-il un moyen de débuguer mon code de manière pas trop compliquée ?

Bonjour à tous,

Je suis ravi de voir qu'un topic sur le mini-RPG en JavaScript est toujours en vie.

Je dois réaliser ce projet dans le cadre du cursus Développeur d'Application Frontend.

Merci à toi doudoulolita de continuer ce projet et d'en faire un autre tuto. À propos de ton problème d'affichage à débugger: je jetterai un coup d’œil à ton code histoire de voir ou se trouve le problème. Pour l'instant le meilleur conseil que je peux te donner c'est d'utiliser Git, ça te permettra de voir toutes tes modifications et revenir en arrière si besoin.

De mon côté, je viens d'initialiser le projet, j'essayerai de poster régulièrement à propos de son avancé. Je pense également faire une série de vidéos tuto après la soutenance.

-
Edité par evodfears 29 août 2018 à 10:02:05

Ah, enfin quelqu'un d'autre que moi sur ce topic !   Je commençais à penser que ça ne valait pas le coup de continuer le jeu et encore moins le tuto...

J'ai déjà un Github mais je ne l'ai pas mis à jour depuis longtemps, j'ai un peu de mal à comprendre comment faire un push avec tous les nouveaux dossiers en une seule fois. Je vais essayer ce soir.

Fais attention à ce que j'ai mis sur le tuto, car je suis totalement autodidacte, donc il peut y avoir des erreurs. Je vais t'envoyer le tuto de jam-jam (pas fini) par MP, ça peut t'être utile, il a une autre approche pour la gestion des cartes.

En tout cas, si tu peux me mettre des commentaires sur le tuto, et/ou échanger ici, ce sera cool. Et si tu le souhaites, n'hésite pas à me piquer ou à me demander des graphismes, j'ai pas trop de temps mais j'aime bien ça !

Ravi si ma réponse ta donné envie de continuer et merci pour toutes ces ressources.

Je vais regarder ton Github, ton tuto et celui de jam-jam au fur et à mesure.

Pour ajouter tous tes dossier d'un coup : "git add *", puis "git commit" et "git push". Attention cependant aux fichiers volumineux et/ou inutile qui pourrait atterrir dans ton repo, un fichier gitignore sera peut-être nécessaire.

Je vais essayer de poster ici au maximum, j'ai déjà bien commencé ce projet de mini-rpg (multijoueur), mais en POO pour ma part :

Les classes que j'ai terminées :

• Autoloader
• Tileset
• Character
• Map

Gestion du jeu et des données - terminés :

• générateur de cartes aléatoire
• dessin des assets (tiles et player)
• limitation du tour par tour : trois cases par joueurs
• affichage du joueur en cours

Gestion du jeu et des données - en cours de dev :

• gameplay à la souris
• affichage des zones jouables par le joueur en cours
• gestion des collisions
• ajout des armes, de leur specs et de leurs logique (nom, dégâts, design, ramassage par échange)

J'apporterai toutes les précisions de mon projet finalisé via une série de vidéo.

Aperçu visuel du jour :

Merci d'avoir pris le temps de répondre à mon post.

-
Edité par evodfears 1 septembre 2018 à 3:58:40

Merci de partager ton expérience !

J'espère avoir un peu de courage pour avancer soit sur mon jeu soit sur le tuto ce week-end !

Ce qui serait bien, ce serait de savoir ce que d'éventuels lecteurs du tuto ont besoin : le B-A-BA, la POO, ou entre les deux...

-
Edité par doudoulolita 7 septembre 2018 à 22:08:21

Je n'ai pas lâché l'affaire pour mon jeu : j'ai mis à jour le code sur github et essayé de trouver de l'aide pour mieux structurer mon code.

Pour le tuto, j'hésite un peu à le changer tant que je n'ai pas un code au top, mais ça peut aussi m'aider à y voir plus clair quand j'essaie d'expliquer ce que je fais.

J'ai aussi fait un essai en POO, juste pour afficher une image, ce que je n'arrivais pas à faire toute seule, avec l'aide de LDD, temps de rencontre où on se réunit pour faire du code.

Ce sujet n'est donc pas clos

-
Edité par doudoulolita 31 octobre 2018 à 18:22:51