Partage
  • Partager sur Facebook
  • Partager sur Twitter

Gestion de maps + PNJ sur un mini-RPG en Js

Si quelqu'un pourrais m'aiguiller je bloque :)

Sujet résolu
    13 janvier 2016 à 10:31:42

    Bonjour,

    J'ai suivi le cours intéressant de SebCap26 sur comment créer un miniRPG en JS, mais son cours n'est pas fini alors j'essaie de faire à ma façon pour continuer le développement seul.

    Pour vous résumer mon jeu contient:

    • Une boucle principale (rpg.js)
    • Une classe Personnage.js qui gère le dessin et le déplacement d'un personnage.
    • Une classe Tileset.js qui gère mes tilesets (éléments de terrains).
    • Une classe Map.js qui gère mes maps et l'affichage des mes joueurs sur la carte.
    • Un fichier index.html contenant un canvas.

    Pour gérer mes maps j'ai fait comme ceci :

    • Une première carte qui dessine mon terrain
    • Une deuxième carte qui dessine mes obstacles

    J'en suis actuellement à la détection de collisions entre des personnages, et je vous avoues que je n'ai pas trouver de solutions autre qu'inclure les PNJ à la carte d'obstacles. Mais si je veux faire disparaitre les PNJ de cette carte ? Si je veux les faire bouger sur la carte ?
    Je vous avoue que je bloque un peux et que je ne sais pas vraiment où aller.

    J'ai aussi un problème que je vais détailler en image, ce sera plus parlant :

    Mon personnage est Naruto (gauche) et le PNJ est Sasuke (droite)

    Mon personnage Naruto (gauche) et Sasuke (droite) le PNJ

    Le dessin est correct, je suis devant Sasuke

    Ici mon personnage est devant le PNJ, tout vas bien

    Erreur: Sasuke devrait être dessiner devant moi...

    Mais ici Le PNJ est dessiner avant mon personnage du coup il est écrasé.
    On devrait voir la tête du PNJ et pas les pieds de mon personnage.

    Je ne sais pas vraiment comment faire.

    Merci pour la lecture.

    MCP

    -
    Edité par Bouldu16 13 janvier 2016 à 10:33:51

    • Partager sur Facebook
    • Partager sur Twitter
      17 janvier 2016 à 13:57:54

      J'essaie de compléter un tuto sur le même sujet réalisé par Jamjam68140. Il n'a plus trop le temps de s'en occuper mais il préfère que je l'envoie par MP aux gens intéressés.

      Je participe au topic sur ce sujet qu'il avait créé. Il y a en ce moment 2 autres personnes qui font des tutos pour des RPG, l'un en 3Diso, et l'autre avec la librairie Pixi.

      Tu peux aller voir sur mon site guyana-dream si tu trouves quelque chose susceptible de t'aider, mais je n'ai pour l'instant qu'un pnj qui est animé mais ne se déplace pas.

      Jamjam68140 utilise plusieurs canvas superposés avec un z-index et il parvient à faire les collisions des persos avec les éléments du décor quand même. Je suppose que ça doit aussi marcher pour les persos.

      Plutôt qu'un seul canvas  pour les persos, peut-être faudrait-il en mettre 2 au cas où un perso est devant ou derrière l'autre.

      Dans ce cas, peut-être qu'en faisant passer le perso sur le canvas de dessous ou de dessus en fonction de sa position y par rapport à l'autre perso, ça le ferait.

      Pour ma part, ce que j'ai rajouté comme événement, c'est la possibilité que mon perso attrape un objet sur la carte, que celui-ci disparaisse du canvas et qu'il apparaisse dans un div sur le côté du jeu.

      En ce moment, j'essaie moi aussi de suivre le tuto de SebCap26 , ça marche plutôt bien même si je trouve que pour des débutants, il est un peu complexe. J'aimerais bien poursuivre sa rédaction par la suite, mais je n'ai pas encore fini de le tester. Lui semble d'accord pour qu'on le complète et qu'on le publie.

      Mon niveau en javascript est cependant un peu léger pour ça, mais si tu veux m'aider, ce serait chouette.Est-il possible au moins d'avoir le lien vers ton jeu pour voir tes solutions ?

      -
      Edité par doudoulolita 17 janvier 2016 à 14:01:53

      • Partager sur Facebook
      • Partager sur Twitter
        17 janvier 2016 à 22:04:44

        Voila le résultat avec mes images, en suivant le tuto de SebCap26. J'ai juste remplacé le chiffre 32 par une variable pour la largeur de tuiles. L'animation n'est pas extra, un peu lente et pas très fluide mais sur Guyana dream elle est au contraire trop rapide.

        Comment est l'animation de ton côté ?

        Je n'aurai sans doute pas le temps d'aller beaucoup plus loin ce w-e, mais je trouve que ce tuto est bien écrit, même s'il faut des connaissances plutôt poussées en javascript pour le comprendre.

        Pour mieux comprendre comment tu as géré les PNJ, est-ce que tu peux fournir ton code, STP ?

        -
        Edité par doudoulolita 17 janvier 2016 à 22:08:19

        • Partager sur Facebook
        • Partager sur Twitter
          21 janvier 2016 à 13:37:15

          Salut Doudoulolita,

          J'ai en effet continuer ce projet et j'ai trouver la solution en réfléchissant (très fort) à mes problèmes:

          • Mon jeu est disponible à cette adresse : http://maxime.esy.es/projects/RpgNaruto/
          • Quand je dessine mon personnage je définie sur la carte d'obstacle que la case est prise par un PNJ (code en rouge ci dessous)
            Map.prototype.dessinerMap = function(context) {
            
                for(var i = 0, l = this.terrain.length ; i < l ; i++) {
                    var ligne = this.terrain[i];
                    var y = i * 32;
                    for(var j = 0, k = ligne.length ; j < k ; j++) {
                        this.tileset.dessinerTile(ligne[j], context, j * 32, y); 
                    }
                }
            	for(var xmap = 0; xmap < this.terrain.length ; xmap ++)	{
            		for(var i = 0, l = this.personnages.length ; i < l ; i++) {
            			if(this.personnages[i].y == xmap) {
            				this.personnages[i].dessinerPersonnage(context);
            				if(i != 0)	{
            					this.terrain[this.personnages[i].y][this.personnages[i].x] = 0;
            				}
            								
            			}				
            		}
            	}
            }
          • Après pour la collision j'ai réfléchit en en faite au lieu d'afficher les perso dans un ordre arbitraire (l'ordre dans lequel on ajoute les personnages à la carte [addPerso(nomDuJoueur)]) on les dessinent par lignes (de haut en bas) et du coup quand la map rafraichit elle dessine le personnage le plus bas en dernier.
          • J'ai créer un repo sur BitBucket si ca t'interresse.

          -
          Edité par Bouldu16 15 février 2016 à 9:33:34

          • Partager sur Facebook
          • Partager sur Twitter
            22 janvier 2016 à 13:54:39

            Ah bein je vois que t'a trouvé ;)

            La solution c'est de dessiner tous les personnages avec leur z-index qui est toujours le bas du personnage pour un humain ce sont ses pieds.

            Plus un perso est loin de nous, plus ses pieds se situent sur une ligne basse sur l'écran (ligne 0 en haut de l'écran) donc le personnage sera près du haut de l'écran, tandis qu'un personnage proche de nous aura les pieds sur une ligne plus haute de l'écran (ligne 200 en bas de l'écran) donc le personnage sera près du bas de l'écran.

            Ainsi à une ligne près, un personnage peut se trouver derrière un autre, et le programme fait la différence simplement en affichant d'abord ceux qui ont une coordonnée Y la plus basse, jusqu'à la coordonnée Y la plus haute, il n'y a pas d'ordre arbitraire, c'est l'ordre donné par la ligne qu'occupe le personnage.

            • Partager sur Facebook
            • Partager sur Twitter
              26 janvier 2016 à 8:26:43

              Pas mal ! L'idée de dessiner le perso le plus bas en dernier à l'air de bien marcher. :)

              Dommage d'utiliser des personnages existants et non des créations originales ! Il n'y a pas des droits sur Naruto ? Mais bon, pour tester, c'est sympa, faut reconnaître.

              Petit souci au moment où on change de perso et qu'on marche, l'image des 2 autres ninjas apparaît par intermittence.

              Bizarrement, si je clique un peu en dehors du formulaire de choix de perso, le choix devient effectif et le défaut n'apparaît plus. Place peut-être un bouton de validation (ou même un simple div de couleur à côté du formulaire ?) qui permette que le choix devienne effectif.

              Ce qui n'est pas très logique, c'est que l'on peut avoir 2 fois le même Ninja sur la carte, il faudrait que quand on choisit un perso, les autres ninjas sur la carte soit les 2 autres obligatoirement.

              Sur Firefox, le tableau des touches est un peu "mangé", la colonne avec les flèches est toute étroite (ou alors c'est une ligne en trop qui passe dessus ?).

              La touche W ne fonctionne pas alors que les autres touches marchent bien. Vérifie dans ton code d'où ça vient.

              Ce serait peut-être pas mal s'il se passait quelque chose quand le perso va dans l'eau : soit ça bloquerait, soit il coulerait !

              J'ai vu que tu avais prévu d'implémenter la musique, j'attends d'entendre ça !

              • Partager sur Facebook
              • Partager sur Twitter
                26 janvier 2016 à 8:49:56

                Ah, je te conseille de remplacer les chiffres correspondant à la largeur de tuile et à la taille de perso par des variables.

                Cela te permettra d'adapter plus facilement ton code pour d'autres jeux du même type avec des tilesets très différents.

                D'autre part, si tu veux des images libres de droits sympas, pense à Opengameart, par exemple. Il y a des trucs très sympas pour utiliser dans un RPG.

                -
                Edité par doudoulolita 26 janvier 2016 à 8:51:57

                • Partager sur Facebook
                • Partager sur Twitter
                  11 février 2016 à 1:36:03

                  Je t'ai mis +1 pour tes retours doudoulolita et tes conseils envers Bouldu16 ;)

                  ET Bouldu16, pense à pré-charger tes images, ça aide ;)

                  -
                  Edité par AladBarat 11 février 2016 à 1:37:01

                  • Partager sur Facebook
                  • Partager sur Twitter
                    11 février 2016 à 21:32:56

                    @AladBarat : Merci pour le +1 ! ;)

                    Pas trop le temps de travailler sur mon propre jeu ni d'aider beaucoup ici en ce moment, mais j'ai de quoi faire sur javascript à mon boulot pour un autre projet.

                    J'espère que Bouldu16 a pu avancer ces derniers temps car son projet est très sympa. :)

                    • Partager sur Facebook
                    • Partager sur Twitter
                      15 février 2016 à 9:32:54

                      Salut,

                      Non en ce moment je suis en stage et je suis sur du développement avec Odoo (OpenERP). Donc j'ai pas trop le temps.

                      Merci pour les conseils. Le fait de changer de Ninja, je n'ai qu'a faire un script JS qui change le focus, car quand on clique sur un personnage et que l'on appuie sur BAS, on change de radio et donc de personnage. Je n'ai pas les droits sur Naruto mais je vais les changer quand j'aurais le temps, pareil pour le tileset de Pokémon. Je n'ai pas vraiment réussi à créer, je n'ai pas les outils ni même le temps de faire mes propres graphismes.

                      Je vais voir pour précharger les images et prendre les taille de perso pour les tileset. Ce sont des petites améliorations à laquelle je n'avais pas pensé.

                      Ce qui concerne les touches, j'ai enlevé le WASD (parce que je n'en voulais pas).

                      Merci beaucoup pour ces conseils, je vais essayer de les mettre en place, puis par la suite, je créerais la suite du jeu.

                      Bd16

                      • Partager sur Facebook
                      • Partager sur Twitter
                        17 février 2016 à 11:28:50

                        J'adore faire des graphismes, de mon côté. Je ne suis pas une spécialiste du pixel art, c'est assez long à faire, mais j'ai déjà essayé. J'ai plutôt tendance à utiliser Inkscape (dessin vectoriel) ou alors Blender (3D), mais je maîtrise moins.

                        J'ai actuellement pas mal de projets en cours (en particulier Guyana-Dream sur lequel je n'ai pas beaucoup avancé récemment), mais si j'ai un moment, je pourrai éventuellement te proposer des dessins en fonction de tes besoins.

                        J'avais participé au  jeu en python Ultimate Smash Friends  qui n'est plus tenu par son créateur, et fait un début de version en javascript à mes débuts dans ce langage : Wardance-USF. Tu trouveras les persos que j'ai fait sur mon album web. Ils sont libres de droits, il y a juste à citer mon pseudo. On peut peut-être modifier certains pour en faire des ninjas, ça irait plus vite que partir de 0.

                        Dans le jeu original, il y a pas mal d'autres persos sympas, dont une bonne partie faite par Redshrike. Il faut lui demander pour les droits par e-mail en cas de doute, c'est ce qui est marqué sur sa page user. Sur Opengameart, tu trouveras peut-être directement des ninjas qui te plaisent.

                        Il y a aussi pas mal de tilesets pour les décors, regarde les droits à chaque fois, ils sont notés. Bon courage pour ton stage et ton jeu !

                        -
                        Edité par doudoulolita 17 février 2016 à 11:32:29

                        • Partager sur Facebook
                        • Partager sur Twitter
                          17 février 2016 à 21:12:17

                          Bravo pour ton album dessin doudoulolita ;)

                          Je les trouve tpus bien faits, chacun dans leur genre.

                          Et sinon le dessin vectoriel et la 3D ne sont pas du pixel-art !

                          Dans pixel-art il y a le mot "pixel" c'est l'art de dessiner qu'avec des pixels.

                          Je dessine en pixel-art ou plutôt je suis constamment en recherche du mieux en pixel-art donc je suis un passionné comme toi du graphisme mais c'est plus la création de jeux (le concept) et de règles du jeu et de scénarios qui me plaît et où je me sens plus à l'aise.

                          • Partager sur Facebook
                          • Partager sur Twitter
                            20 février 2016 à 2:17:55

                            J'ai changer il y a peux les sprites de mon jeu pour des libres. Le tileset j'ai commencer à le faire "à la mano" mais ca passe pas très bien ^^.
                            Très sympa le contenu doudoulolita ! Pourquoi pas pour les sprites !
                            Je pense que je vais recommencer un projet "au propre". En attendant je me suis lancer dans un casse-brique. (Qui fait aussi office de casse-tete pour moi) Pas simple !

                            Je vous tiens au courant pour les améliorations du jeu !
                            • Partager sur Facebook
                            • Partager sur Twitter
                              5 mars 2016 à 11:42:50

                              @AladBarat : je sais ce qu'est le pixel-art, rassure-toi ! ^^

                              Mais ça donne beaucoup beaucoup de boulot. Donc pour mes projets persos, j'ai préféré faire des sprites en vectoriel et 3D, c'est plus rapide et je suis plus à l'aise avec.

                              Tout dépend en fait du rendu qu'on souhaite donner à son jeu et du temps qu'on est prêt à passer sur les graphismes, surtout si on est exigeant sur la qualité.

                              Regarde mon dragon Redlong, fait avec les 2 techniques. J'ai passé beaucoup plus de temps sur les 4 images en pixel-art, même en rusant avec des éléments réutilisables, que pour les 12 autres images en vectoriel. Par contre, les images en pixel-art ont un aspect "vivant", "vibrant", que les autres n'ont pas.

                              Pour le pixel art, j'avais trouvé mtPaint, libre et utilisable sous Linux, mais on passe quand même beaucoup de temps pour les poses des sprites. J'ai aussi fait certains sprites en pixel-art avec l'outil Crayon de Gimp. Pour me faciliter la tache sur USF, j'ai repris les poses faites par Redshrike pour concevoir d'autres persos (ex: Rohon)

                              Je pense qu'il y a moyen de ruser pour faire les poses rapidement en vectoriel (pour tester les animations facilement) et repeindre par dessus en pixel art, sur un calque, comme dans ce tuto, mais est-ce que ça ira vraiment plus vite ? Pour ceux que ça intéresserait : Tuto vidéo (en anglais)

                              Je suis moins à l'aise avec les décors, mais l'avantage est qu'ils n'exigent pas plusieurs poses ! Est-ce que tu te débrouilles bien sur ce plan là ?

                              J'ai commencé à me pencher sur les arbres (pour la 3D), en utilisant des images libres sur internet comme modèles, mais en pixel-art, c'est pas évident de donner un beau volume et une belle texture. J'avais été impressionnée par le level Mangrove, par Pops, dans USF. Je ne sais pas si je saurais faire aussi bien, et sous forme de tileset, c'est encore plus compliqué à gérer !

                              --------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                              @Bouldu16 : Attention à ne pas trop te disperser. J'ai moi aussi tendance à lancer plusieurs projets en même temps et finalement, rien n'est jamais fini. Pareil pour le fait de repartir de 0 trop souvent.

                              J'aime beaucoup le graphisme (dessin, peinture, photo, photomontage, infographie 2D et 3D), et je commence sérieusement à m'intéresser à la programmation qui peut prendre beaucoup de temps, surtout quand on est encore novice (python, javascript et php, mais aussi C pour Arduino depuis peu).  Mais à force de passer de l'un à l'autre langage, je me mélange parfois les pédales !

                              Du fait de mon métier (animatrice multimédia), j'adore expliquer ce que je fais, et rédiger des tutos (pas trop à l'aise pour en faire en vidéo par contre). Dans le cas du tuto sur le RPG en javascript que je souhaitais reprendre, je m'aperçois que je n'ai pas encore le niveau, même en essayant de progresser avec ce que je trouve sur le net. Je ne pourrai donc peut-être pas énormément t'aider pour la programmation, mais j'essaierai.

                              Je ne suis pas très douée comme AladBarat pour les concepts, règles et scénario, d'autant que je ne joue pas moi-même (eh, oui !). J'aime bien écrire, mais pour ce qui est de concevoir une vraie histoire, j'ai aussi plus de mal.

                              As-tu réfléchi à cet aspect-là pour ton jeu de Ninja ou comptais-tu juste reprendre un jeu Naruto existant ? Je trouve dommage de refaire quelques chose qui existe alors qu'on peut s'éclater à inventer un nouveau concept. Surtout qu'avec de l'aide sur ce forum, ça peut le faire ! :)

                              Peux-tu nous donner le lien vers tes nouveaux sprites, et les as-tu déjà intégrés dans ton jeu ? Es-tu attaché au rendu pixel-art comme AladBarat ou ça peut être autre chose ? Côté décors, as-tu défini ce dont tu as besoin pour qu'on t'aide sur le tileset ?

                              -
                              Edité par doudoulolita 5 mars 2016 à 11:44:07

                              • Partager sur Facebook
                              • Partager sur Twitter

                              Gestion de maps + PNJ sur un mini-RPG en Js

                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                              • Editeur
                              • Markdown