Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

Qui voudrais compléter le tutoriel existant ?

    5 mai 2015 à 3:19:02

    Salut moi ca m'interesserait beaucoup un tuto pour les rpg car j'ai un gros problème avec le tuto cité a la toute premiere page du topic !
    • Partager sur Facebook
    • Partager sur Twitter
    ~~~ disparition ninja *pouf*
      6 mai 2015 à 13:43:40

      Salut missnika :)

      Je t'ai repondu par MP ;)

      • Partager sur Facebook
      • Partager sur Twitter
        13 mai 2015 à 15:21:04

        @missnika : Le 1er tuto n'est pas évident à suivre et en plus, il n'est pas fini, il n'y a que le début. Celui de jam-jam68140 m'a semblé beaucoup plus facile. Il n'est pas terminé non plus mais j'ai eu l'impression de bien comprendre en le faisant. :)

        As-tu déjà une idée de jeu précise ou est-ce que tu veux juste t'entraîner ?

        @jam-jam68140 :

        Je continue doucement à travailler sur les persos de Guyana Dream en 3D en particulier lors du BUG (Blender User Group) à la Villette tous les 1ers samedis du mois. Je suis maintenant sur le capucin.

        La vue de dessus me semble meilleure quand je la fais avec les persos en 3D et si on décide de passer en 2D pour des parties spéciales, ça me servira.

        Mon atèle a une drôle de démarche mais j'espère m'améliorer sur l'animation, comme j'ai déjà mon armature de faite, je peux faire des changements assez facilement. Tu peux le voir sur tuto/o4.html. Sur cet essai, le saimiri est une copie de l'atèle avec un changement de couleur, ce qui est assez moyen.

        Je n'ai pas eu le temps de finir le cours de javascript d'Openclassroom, il ne me reste pourtant que la dernière partie, mais j'ai aussi un bouquin sur le sujet en cours.

        Peux-tu me dire aussi si tu continues ou pas le tuto ?

        Si j'avais la suite, ça me permettrait d'avancer davantage sur mon jeu ! :soleil:

        Il y a quelques défauts sur la partie que j'ai déjà faite, j'aimerais corriger les bugs comme le blocage sur les bords du canvas et le fait d'être obligée de 'appuyer sur les flèches droite et bas en même temps pour le changement de carte.

        Une fois que j'aurai au moins 2 singes corrects sur le plan du look et de l'animation, il faudra que je réfléchisse à leurs capacités, par exemple, des rapidités différentes sont assez facile à paramétrer. Même si je n'ai pas beaucoup d'animations différentes, il suffit de changer la vitesse de déplacement pour faire comprendre le principe. Dans l'idéal, des animations de courses seraient mieux mais faut pas que je me charge avec trop de choses.

        Je veux aussi pouvoir leur faire attraper des fruits, ce qui leur donnera des points. En principe, je devrais déjà être capable de programmer quelque chose comme ça, mais je ne suis pas très sûre de moi. Là aussi, je dois prévoir l'animation adéquate.

        Sinon, je vais peut être essayer directement en 3D avec babylon.js ou le game engine de Blender, mais je trouve ça un peu dommage de ne pas finir l'apprentissage de javascript et de canvas en 2D.

        -
        Edité par doudoulolita 13 mai 2015 à 15:23:11

        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          13 mai 2015 à 17:59:44

          Je voudrai bien le tutoriel
          • Partager sur Facebook
          • Partager sur Twitter
            14 mai 2015 à 14:36:37

            @samir : MP

            @doudoulolita : je vais voir pour le reprendre oui. J'ai encore quelques trucs à régler mais après je devrais pouvoir m'y remettre :D

            • Partager sur Facebook
            • Partager sur Twitter
              14 mai 2015 à 21:22:15

              Dis-donc, y a du monde qui est intéressé en tout cas ! :)

              J'ai scratché mon ordi, et celui qu'on a trouvé pour le remplacer à un chipset graphique que ma version d'Ubuntu ne reconnait pas. En attendant, je repasse un peu sur Windows et j'attends de l'aide pour remettre mon dual boot.

              Heureusement, mes données sont sauvegardées, que ce soit Guyana-Dream ou ton tuto, si tu en as besoin, avec tous tes exemples.

              Voici le résultat avec le capucin en 3D : o5.html , sa démarche est un peu étrange aussi et il est très penché, ce qui fait qu'il faudrait peut-être placer la caméra un peu différemment. Mais bon, il y a 2 singes en 3D maintenant !

              J'aimerais mettre les fichiers blender des 2 singes sur mon site mais ils sont trop lourds, va falloir que je les héberge ailleurs.

              -
              Edité par doudoulolita 14 mai 2015 à 22:51:06

              • Partager sur Facebook
              • Partager sur Twitter
                17 mai 2015 à 17:56:34

                Je me suis amusée à ajouter un évènement, mon objectif étant de pouvoir comptabiliser les fruits et les feuilles de palmier jaunies que prend le singe.

                Je n'en suis pas encore là mais j'ai réussi à en faire une petite partie sur p.html. Pour l'instant, quand on passe sur certains fruits et palmes, ils disparaissent (remplacés par une tuile verte), le score est incrémenté et 3 images (cachées dans un div grâce aux style) apparaissent. Je vois ça comme un début d'inventaire.

                Mon souci est que le score continue à s'incrémenter quand le singe reste près de la zone. Normal, puisque c'est basé uniquement sur sa position sur le canvas et qu'à chaque rafraichissement, il revérifie sa position et repasse dans la boucle. Je pense que je dois changer le numéro de la tuile dans la map pour qu'il "pense" qu'il n'y a plus de fruit dès le 1er passage.

                Ensuite, il faudra que je repère les tuiles de fruits dans la map en fonction de leur numéro sans avoir à écrire un tableau à la main. L'idéal serait d'avoir des scores pour chaque catégorie, fruit (1 ou 2 d'un coup) ou palme, et que le score ajoute 2 lorsqu'il va sur une tuile à 2 fruits.

                Mais bon, même si le résultat est un peu naze, je suis contente d'avoir avancé toute seule ! :)

                • Partager sur Facebook
                • Partager sur Twitter
                  20 mai 2015 à 1:43:28

                  J'ai nettoyé un peu mon code mais il y a encore un gros souci : q2.html

                  Le problème est que quand on passe à la croisée des chemins, on change bien de dessin de map (gérée par un fichier json) mais pour ce qui est des collisions et de la collecte de fruits, on reste bloqués sur les coordonnées de la map 1. :(

                  En fait, dès que le perso sort de la croisée des chemins, le jeu reprend les coordonnées de collision et de fruits de la map1 car je n'arrive pas à placer les évènements 2 et 3 hors de la fonction qui gère les collisions :

                  function isNextMoveAllow(newPosX, newPosY, mapName) {	
                  	map.evenements2();//on fait les vérifications pour les évènements de changement de carte selon la position du personnage
                  	map.evenements3(); // vérifications pour un passage sur les fruits
                  
                  //on regarde si avec la position de coordonnées (newPosX, newPosY) on n'est pas sur une mauvaise case
                  	var centrePersoX = newPosX+(spriteWidth/2);//on créée un carré virtuel de coté 32 (taille de la tuile et largeur du sprite) et de centre (centrePersoX, centrePersoY)
                  	var centrePersoY = newPosY+(spriteHeight-(tileWidth/2));

                  // reste de la fonction
                  }

                  Voici les évènements placés dans le constructeur Map:

                  	this.evenements2 = function() {
                  		if (posX>=4*tileWidth && posX<=5*tileWidth && posY>=5*tileWidth && posY<=6*tileWidth){
                  			context[0].clearRect(0,0,canvasWidth,canvasHeight);
                  			context[1].clearRect(0,0,canvasWidth,canvasHeight);
                  			drawBackground();
                  			drawMap(mapData.background2, context[0]);
                  			mapName=mapData.map2;
                  			drawMap(mapName, context[1]);
                  		} 
                  	},
                  	
                  	this.evenements3 = function() {
                  			tableauFruitX=[13,2,11,5];
                  			tableauFruitY=[9,2,4,3];
                  		for (i=0; i<tableauFruitX.length-1; i++) {
                  			if (posX>=(tableauFruitX[i]*tileWidth) && posX<=((tableauFruitX[i]+1)*tileWidth) && posY>=(tableauFruitY[i]*tileWidth) && posY<=((tableauFruitY[i]+1)*tileWidth)){
                  				drawTileGround(tableauFruitX[i]*tileWidth,tableauFruitY[i]*tileWidth);
                  				upScore();
                  				afficheFruits();
                  			}			
                  		} 
                  	}	
                  • Partager sur Facebook
                  • Partager sur Twitter
                    20 mai 2015 à 2:07:43

                    Coucou doudoulolita ! C'est un projet personnel que je dois essayer de finir avant la fin des vacances :/
                    • Partager sur Facebook
                    • Partager sur Twitter
                    ~~~ disparition ninja *pouf*
                      21 mai 2015 à 0:06:12

                      Bon courage ! Tu es déjà bien calé en programmation ?

                      De mon côté, j'ai un peu avancé sur mon jeu Guyana Dream, même s'il y a encore beaucoup à faire.

                      Le changement de map se fait à la croisée des chemins. J'utilise un fichier json pour les coordonnées de la map.

                      • Partager sur Facebook
                      • Partager sur Twitter
                        24 mai 2015 à 21:28:33

                        Non je suis novice ! d'ailleurs j'ai besoin de jam-jamm pour m'aider mais il n'est plus disponible :'(
                        • Partager sur Facebook
                        • Partager sur Twitter
                        ~~~ disparition ninja *pouf*
                          25 mai 2015 à 23:09:22

                          Sur quoi tu bloques ? Peut-être puis-je t'aider ou quelqu'un d'autre sur Openclassroom.

                          Si ces sont les changements de map que te posent problème, tu peux peut-être utiliser la technique que j'ai trouvée, avec un fichier json.

                          Sur mon jeu Guyana-Dream, ça fonctionne assez bien maintenant. Bon, je n'ai que 2 maps, mais le principe est là.

                          • Partager sur Facebook
                          • Partager sur Twitter
                            26 mai 2015 à 14:16:55

                            Je fais des essais de présentation de mon code avec des explications, histoire de m'amuser un peu avec la balise <code>

                            -
                            Edité par doudoulolita 26 mai 2015 à 14:41:09

                            • Partager sur Facebook
                            • Partager sur Twitter
                              31 mai 2015 à 1:41:46

                              Encore moi car voici la dernière mouture du jeu. J'ai essayé de mettre un peu d'ordre dans les fichiers javascript, chacun gère un truc (persos, carte, événements) et est nommé en fonction.

                              Je viens d'ajouter un pnj animé (perroquet qui bat des ailes, sans bouger). Le singe peut passer sur lui, ce n'est pas très logique, je n'ai pas la gestion des collisions entre sprites à ce stade.

                              Pour les singes, j'ai revu mon animation dans Blender(elle a encore de petits défauts, mais c'est mieux, je crois) mais dans la spritesheet, je n'ai mis que 4 steps pour la marche, c'est un peu saccadé.

                                        

                              Est-il possible de réduire la vitesse de rafraichissement de l'animation ?

                              J'ai essayé de descendre le chiffre de 1000/60 ci-dessous mais ça n'a pas l'air de marcher.

                              window.requestAnimationFrame = (function(){//on crée la fonction pour gérer l'animation
                              	return window.requestAnimationFrame || // La forme standardisée
                              	window.webkitRequestAnimationFrame  || // Pour Chrome et Safari
                              	window.mozRequestAnimationFrame     || // Pour Firefox
                              	window.oRequestAnimationFrame       || // Pour Opera
                              	window.msRequestAnimationFrame      || // Pour Internet Explorer
                              	function(callback) {                   // Pour les élèves du dernier rang
                              		window.setTimeout(callback, 1000 / 60);
                              	};
                              })();



                              -
                              Edité par doudoulolita 31 mai 2015 à 8:40:49

                              • Partager sur Facebook
                              • Partager sur Twitter
                                25 juin 2015 à 18:58:05

                                Bonjour bonjour !

                                Je voulais vous demander s'il existe toujours le tuto qui a été apparemment amélioré par jam-jam68140 ? :) Si oui je serait très intéressé !

                                Merci d'avance!

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  28 juin 2015 à 21:32:42

                                  Bonjour,

                                  Essaie de lui envoyer un MP, car il a une version provisoire qui peut être utile. Il m'a dit qu'il était pas mal occupé mais qu'il espérait pouvoir continuer après.

                                  Je lui demanderai de mon côté si je peux fournir cette version provisoire à ceux qui la demandent sur ce forum.

                                  J'aimerais bien qu'il le publie mais il souhaite le retravailler d'abord.

                                  Le tuto de départ est dispo ici. Je l'avais trouvé plus compliqué que celui de jamjam mais pour ce qui est de comment préparer les graphismes, il est OK.

                                  Sinon, tu peux aussi lire cet article.

                                  -
                                  Edité par doudoulolita 28 juin 2015 à 22:41:16

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    20 juillet 2015 à 10:54:11

                                    Grâce à l'accord de jam-jam68140, je suis en train d'avancer sur une version légèrement différente de son tuto, en utilisant les graphismes de Guyana-Dream et en essayant au maximum d'utiliser des variables faciles à changer.

                                    Je peux vous envoyer ce tuto par M-P sur demande.

                                    A l'heure actuelle, il explique comment créer une carte, animer un perso et gérer les collisions, passer d'une carte à l'autre grâce à un événement et choisir entre 2 persos.

                                    Mon objectif est déjà d'écrire comment arriver au même résultat que Guyana-Dream, en essayant en plus d'améliorer mon code précédent qui n'était pas forcément optimal.

                                    Il y a encore pas mal de boulot et j'aurais bien besoin de l'aide de quelqu'un de plus compétent que moi en javascript, mais en attendant que jam-jam68140 soit un peu plus dispo, c'est déjà pas mal, non ?

                                    Il faudra bien sût tester pour voir si le code que j'ai fait est facilement adaptable à un autre jeu et s'il ne présente pas de défaut


                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      24 août 2015 à 12:29:34

                                      Retour sur la partie graphique : préparation de croquis de base pour le jaguar.

                                      Côté tuto, je n'ai pas trop avancé dernièrement, d'autant que, en le rédigeant, j'avais revu mon code pour utiliser le principe des classes.

                                      A cette occasion, j'avais découvert ce cours sur les objets personnalisés, qui m'a permis de mieux comprendre comment tout cela fonctionne.

                                      Aujourd'hui, je me suis inscrite à un cours d'Openclassroom sur Jquery pour avancer sur un autre projet, pour le boulot, cela me servira peut-être pour ici.

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        30 septembre 2015 à 16:06:25

                                        Je n'ai pas trop avancé, ni sur le jaguar ni sur le tuto, mais la partie que j'ai déjà retravaillée peut être envoyée par MP au besoin.

                                        Si personne n'est intéressé par le tuto, ce n'est pas super motivant pour travailler dessus...

                                        Je continuerai dans ce cas là tranquillement mon jeu sans en parler dans ce topic, quitte à y revenir s'il y a des gens intéressés.

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          30 septembre 2015 à 16:27:29

                                          Haha, je suis peut-être le seul intéressé ? :p

                                          Le projet m'intéresse beaucoup car ça remplacera surement mon petit jeu flash, pour l'instant j'en suis au cours HTML5, CSS3, Python et Swift donc pas encore de temps pour le Javascript :/

                                          Si ça ne te dérange pas, continue de poster, il y a peut-être beaucoup d’intéressé muet :magicien:

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            1 octobre 2015 à 12:41:13

                                            Merci de ton post, ça va m'encourager à progresser en javascript pour partager avec toi et d'autres.

                                            J'espère aussi que jamjam68140 sera en mesure de retravailler dessus aussi, ne serait-ce que pour vérifier ce que j'aurai écrit.

                                            Pas beaucoup de temps pour avancer sur le cours Jquery non plus mais j'en aurai besoin pour un autre jeu que j'ai commencé pour le boulot.

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              1 octobre 2015 à 20:06:35

                                              Oki :) Mais il n'y a pas besoin de se presser, prends ton temps ;)

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                2 octobre 2015 à 10:37:06

                                                Bonjour à tous,

                                                je profite de ce sujet pour une question corrélée.
                                                J'ai dans les cartons un tuto sur la construction d'un moteur 3Diso en HTML 5 (canvas + js). Ça me parait une bonne base pour un jeu vidéo.

                                                Est-ce que ça intéresse du monde ?

                                                ++

                                                JcT

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                Anonyme
                                                  4 octobre 2015 à 15:31:46

                                                  OJean-ClaudeTorrel a écrit:

                                                  Bonjour à tous,

                                                  je profite de ce sujet pour une question corrélée.
                                                  J'ai dans les cartons un tuto sur la construction d'un moteur 3Diso en HTML 5 (canvas + js). Ça me parait une bonne base pour un jeu vidéo.

                                                  Est-ce que ça intéresse du monde ?

                                                  ++

                                                  JcT

                                                  Moi Oui :D



                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    6 octobre 2015 à 13:21:40

                                                    Moi aussi, je suis OK pour voir le tuto sur la 3D iso, c'est intéressant de voir comment ça peut se faire en HTML5.
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      7 octobre 2015 à 16:43:11

                                                      D'ac, c'est parti alors.

                                                      J'en ai pour quelques jours de boulot, je vous fais signe quand c'est en ligne. 

                                                      ++
                                                      JcT 

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        8 octobre 2015 à 13:06:00

                                                        Merci beaucoup et bon courage ! :)

                                                        -
                                                        Edité par doudoulolita 8 octobre 2015 à 13:10:00

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          21 octobre 2015 à 14:31:18

                                                          Bonjour à tous,

                                                          Je suis très intéressé par le tuto de JamJam si il est toujours possible de le recevoir? :) Et si le temps me le permet je vous aiderais volontiers à le compléter.

                                                          Le tuto sur la réalisation d'une carte en 3D iso m'intéresse aussi beaucoup :) Bon courage JC Torrel et merci beaucoup ! :)

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            21 octobre 2015 à 21:45:50

                                                            Je termine avec la partie sur l'animation des personnages et je met ça en ligne :)

                                                            Fin de semaine/début de semaine prochaine je pense !
                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              22 octobre 2015 à 10:58:53

                                                              Super, j'ai hâte de voir le résultat et encore merci beaucoup pour ton apport ! :)
                                                              • Partager sur Facebook
                                                              • Partager sur Twitter

                                                              [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