Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

Qui voudrais compléter le tutoriel existant ?

    13 décembre 2013 à 13:56:35

    Pour l'autre tuto, j'ai trouvé la solution en changeant l'ordre des lignes de référence au scripts. Si je les mets dans le head comme d'habitude, ça ne fonctionne pas, et la classeTileset.js doit être avant le fichier rpg.js.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Mini-RPG</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" />
    
        </head>
        <body>
        	<canvas id="canvas">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>    
    	<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->
    	<script type="text/javascript" src="js/classes/Tileset.js"></script>
    	<script type="text/javascript" src="js/rpg.js"></script>
    
        </body>
    </html>


    Je reviendrai vers le topic pour donner un coup de main quand j'aurai déjà réussi l'autre topic et lu pas mal sur javascript. Pour l'instant, je suis encore un peu trop débutante pour aider, à part pour le graphisme.

    @jam-jam68140 : j'ai pas compris ce que tu dis : "Pour les gmail, ça se passe par MP". Ca doit être rigolo vu l'émoticône, mais ça ne me dit pas comment on fait...
    • Partager sur Facebook
    • Partager sur Twitter
      14 décembre 2013 à 12:11:02

      @doudoulolita : MP = message privé.

      Si tu ne veux pas que ton adresse mail soit mis en publique sur les forums, tu peux m'envoyer un message privé avec ton adresse mail et je te rentre dans le groupe :)

      • Partager sur Facebook
      • Partager sur Twitter
        16 décembre 2013 à 18:44:00

        @jam-jam68140 : je t'ai laissé un MP.
        • Partager sur Facebook
        • Partager sur Twitter
          21 décembre 2013 à 11:40:34

          ok :) jusqu'ici, j'ai ajouter tous ceux qui mon envoyé leur mail par MP. :)
          • Partager sur Facebook
          • Partager sur Twitter
            25 décembre 2013 à 19:34:51

            1ère partie sur le shoot' em up terminé (en attente de relecture pour critique car je ne suis pas satisfais de mon boulot mais ne sais pas trop où dire quoi de plus...)

            Egalement en attente de réunion (brève) afin de rediscuter des tâches assignées à chacun. :)

            -
            Edité par jam-jam68140 25 décembre 2013 à 19:35:52

            • Partager sur Facebook
            • Partager sur Twitter
              2 janvier 2014 à 17:53:26

              @jam-jam68140 : je t'ai laissé moi aussi un MP.
              • Partager sur Facebook
              • Partager sur Twitter
                2 janvier 2014 à 18:28:43

                ok j'ai répondu :)

                Je précise pour les prochain(e)s : le mail, c'est un gmail qui est attendu (on travail sur google doc) :) voilà. :D

                • Partager sur Facebook
                • Partager sur Twitter
                  2 janvier 2014 à 18:31:00

                  Salut,

                  je me permet de te contredire jam-jam, TOUTES les adresses mail sont compatibles avec google docs, ce n'est pas parce que c'est google qu'on prend que du google :D ! Un petit exemple ? Regarde mon adresse mail ;)

                  • Partager sur Facebook
                  • Partager sur Twitter
                    15 janvier 2014 à 16:24:56

                    Moi j'aimerais bien suivre ce cours aussi :) je te laisse un MP
                    • Partager sur Facebook
                    • Partager sur Twitter
                      15 janvier 2014 à 18:21:02

                      @doocly14 : je viens de voir ta réponse... je ne savais pas que le drive prenait toute les adresses désolé ^^ @anthonyflet, ok je vais voir ça de suite :)
                      • Partager sur Facebook
                      • Partager sur Twitter
                        27 janvier 2014 à 13:47:51

                        2ème version beaucoup plus rigolote (en partant d'une spirale)

                        paresseux rigolo

                        • Partager sur Facebook
                        • Partager sur Twitter
                          27 janvier 2014 à 15:12:29

                          3 poses pour le paresseux rigolo:

                          • endormi (il sera accroché à la branche)
                          • debout (peut-être à revoir avec les bras tout en haut pour le saut)
                          • tombé par terre.
                          pareseux endormi

                          paresseux deboutparesseux par terre

                          -
                          Edité par doudoulolita 27 janvier 2014 à 15:17:57

                          • Partager sur Facebook
                          • Partager sur Twitter
                            27 janvier 2014 à 20:06:01

                            Parfais! :D

                            Tu peux me faire un truc maintenant pour que la succession des images me fasse une petite animation -> quand il s'accroche pour dormir et quand il tombe... ?

                            Sinon, c'est plutôt pas mal :D

                            • Partager sur Facebook
                            • Partager sur Twitter
                              28 janvier 2014 à 12:21:39

                              paresseux accroupiparesseux sautantEncore 2 positions, en vue d'une animation pour le saut (la position debout montrée dans le post précédent pourrait être en 2ème frame, faut que je teste)

                              -
                              Edité par doudoulolita 28 janvier 2014 à 12:23:00

                              • Partager sur Facebook
                              • Partager sur Twitter
                                28 janvier 2014 à 13:04:50

                                paresseux rigolo positionsVoici toutes les positions réunies et les animations :

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  29 janvier 2014 à 12:05:11

                                  hey! tu me fais un excellent job là! :D

                                  si t'arrive à me faire quelques frame intermédiaires, histoire que ce soit un peu plus fluide, je commencerais à coder un truc. :)

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    29 janvier 2014 à 17:51:45

                                    OK, dès que j'ai un moment, je m'en occupe.

                                    Pour les branches, ma première idée était de m'inspirer de la peinture chinoise car je prends des cours en ce moment, mais je ne sais pas si ça va rendre bien avec le style comic du paresseux.

                                    As-tu une idée de nom pour ce perso ? Pour l'instant, rien ne me vient en tête.

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      29 janvier 2014 à 20:03:47

                                      "roupionce" ? ^^ (roupiller+pioncer)

                                      Aha :p non je n'ai pas d'idée. ^^ à méditer là dessus je vais n’employer. ;)

                                      Et pourquoi pas les arbres chinois si c'est bien fais ça peut être chouette :p

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        30 janvier 2014 à 10:33:36

                                        Mes collègues me proposent le nom "Sid" comme dans l'Age de glace mais j'aime bien Roupionce, c'est plus original.
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          30 janvier 2014 à 12:45:55

                                          ouai Side c'est pas très original ... ^^

                                          Mais roupionce c'était un nom comme ça au hasard hein :p

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            11 février 2014 à 19:34:36

                                            Voici enfin un essai d'une branche réalisée au pinceau et à l'encre de chine puis scannée. Les pattes en arrière-plan devraient être sur une autre couche, si c'est possible, pour reproduire ce que je propose ici.

                                            Voici mon fichier inkscape.

                                            J'ai peint plusieurs branches, deux d'après un modèle peint pour moi par ma prof de peinture chinoise (1A et 1B) et deux d'après des modèles d'arbres qu'elle m'avait fournis auparavant.

                                            Avec le paresseux, j'ai utilisé le modèle 1A, c'est celui que je préfère. Le placement du paresseux est très précis pour paraître naturel, je ne sais pas si c'est possible à reproduire en javascript. Avec Inkscape, j'ai rempli l'arbre de blanc, le reste est transparent.

                                            Est-ce que le tronc est utile ou dois-je le supprimer et ne garder que la branche ? La longueur de la branche est-elle OK ?

                                            Ça pourrait être joli de faire des montagnes avec de l'encre de chine diluée pour le fond. On aurait donc un fond de nuances de gris et de blanc (ou bleuté, ou verdâtre si je mélange avec de la peinture chinoise), et le paresseux ressortirait en couleurs.

                                            Le seul hic, c'est que je crois que pour les jeux en javascript, on utilise des carrés d'une taille précise pour les décors, et que avec mon idée, ça ne collerait pas trop. Je vais réfléchir à d'autres idées au besoin.

                                            Les mouvements du paresseux (que je n'ai pas encore eu le temps de retravailler) ne rentrent pas non plus dans une taille de sprite toujours identique, ça complique la programmation, j'imagine. Quelle taille est prévue pour le personnage ? Faut-il que je revoie les mouvements pour rentrer dans un rectangle ou un carré de taille précise ?

                                            -
                                            Edité par doudoulolita 11 février 2014 à 19:38:26

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              11 février 2014 à 20:36:37

                                              Très réussis !

                                              doudoulolita a écrit:

                                              Le seul hic, c'est que je crois que pour les jeux en javascript, on utilise des carrés d'une taille précise pour les décors, et que avec mon idée, ça ne collerait pas trop. Je vais réfléchir à d'autres idées au besoin.

                                              Je ne vois pas ce que tu veux dire par des carrés du taille précise ? Si c'est seulement pour le background (les montages), je pense que ça serait une des choses les plus faciles à développer.
                                              • Partager sur Facebook
                                              • Partager sur Twitter

                                              Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut !  (en bas à gauche de mon message)

                                                13 février 2014 à 13:14:38

                                                Dans http://fr.openclassrooms.com/informatique/cours/creer-un-mini-rpg-en-javascript-avec-canvas/decoupage-et-utilisation, c'est expliqué comment composer une carte avec des carrés, je pensais qu'il n'y avait que cette technique de possible et qu'on ne pouvait pas afficher une image entière si on voulait pouvoir définir les coordonnées des blocs "branches" correctement.

                                                De même, dans http://fr.openclassrooms.com/informatique/cours/creer-un-mini-rpg-en-javascript-avec-canvas/choix-et-rendu-des-sprites, les sprites ont quasiment tous la même taille sur la spritesheet. Comment gère-t-on un perso qui est tantôt horizontal, tantôt vertical comme le paresseux ?

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  13 février 2014 à 16:38:08

                                                  salut salut :D

                                                  c'est un excellent boulot!!! :D

                                                  Pour ce qui est des images, peut importe la dimension, un bon programmeur saura comment se démerder. :p C'est facile de gérer tous ça ne t'en fait pas. :)

                                                  Je te laisse carte blanche... fais ce que tu veux et tu me diras quoi faire... :) je peux faire à peut près tout ce que tu as envie (c'est la magie de la programmation!). :p

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    17 février 2014 à 22:30:33

                                                    J'ai peint à l'encre de Chine les montagnes et un arbre, les ai photographiés et les ai colorés avec Gimp :

                                                    fond de montagnes (en grand format) - Le fond très haut et peu large permet de scroller du haut vers le bas.

                                                    les arbres et le paresseux sur le fond de montagnes - Il faudrait que je fasse quelques arbres différents pour que ce soit moins monotone mais c'est assez long à réaliser. J'ai un peu baissé l'opacité du fond.

                                                    arbre (format moyen) : c'est le format et la nuance utilisés dans l'image précédente

                                                    arbre (grand format) : l'arbre est au format où je l'ai photographié et il est plus clair que le précédent.

                                                    -
                                                    Edité par doudoulolita 17 février 2014 à 23:05:18

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      17 février 2014 à 22:55:50

                                                      poses-paresseux en SVG - spritesheet

                                                      Les 2 animations ci-contre utilisent un peu plus de poses que les premières. Celle où il tombe me semble meilleure, pour l'autre, je ne suis pas sûre.

                                                      Peut-être qu'il faut 3 animations: tomber, sauter (en position debout), s'accrocher.

                                                      -
                                                      Edité par doudoulolita 17 février 2014 à 22:57:24

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        27 février 2014 à 19:13:15

                                                        Il est en effet dommage que le tuto ce soit arrêté en pleine écriture :/ , sinon , j'aime bien l'animation des paresseux :p
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          28 février 2014 à 16:01:02

                                                          oui, les paresseux sont géniaux!!! :D

                                                          Pour le tuto, je suis d'accord... mais l'équipe que j'ai essayer de monter pour m'aider à rédiger tous ça n'est soit pas très sérieuse, soit pas très motivé... :/ et tout seul, c'est plus possible pour moi de continuer un tel travail... :( (en plus j'ai le bac bientôt donc voilà... ^^ )

                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            8 mars 2014 à 12:04:51

                                                            Merci pour vos compliments sur mon paresseux. J'espère qu'on utilisera mes dessins un jour, je vais les mettre sur opengameart !

                                                            Pas facile de réaliser des jeux et des tutos quand on manque de temps. Je connais le problème pour les graphismes aussi. J'ai un des bâtiments en 3D à faire pour un autre jeu et je n'avance pas vite.

                                                            Selon moi, le mieux serait de juste reprendre et compléter Créer un mini-RPV en javascript  sans chercher à tout refaire.

                                                            Ou juste donner des conseils ponctuels sur ce topic pour ceux qui, comme moi, ont des difficultés à coder, même des petits jeux de plate-forme tout bêtes.

                                                            Pour l'instant, je me base sur le livre développer des jeux en HTML5 & javascript de Samuel Ronce pour refaire mon jeu de plate-forme wardance-USF à partir de 0 (dans ce lien, je me suis basée sur un autre jeu et ai juste changé les graphismes, pour l'instant) mais je ne parviens pas à réussir le code présenté dans le chapitre 2, même la partie sans framework. Il s'agit pourtant juste d'afficher 2 images, mais en utilisant une classe.

                                                            Ce qui me pose problème, c'est de comprendre comment faire une classe pour mes images, vu que Image est déjà une classe. Les sites sur les classes en javascript ne sont pas très explicites. Souvent, on apprend à faire un bête Hello world ou alors c'est carrément le contraire, c'est tellement complexe qu'on n'y comprend plus rien.

                                                            J'ai réussi à faire une classe qui fonctionne pour l'image 1 mais quand je fais l'image 2, je dois redéfinir tout à chaque fois sans pouvoir utiliser mes tableaux vu qu'ils sont dans la fonction, c'est nul.

                                                            Voila ma page d'index et mon script. Merci d'avance de vos conseils avisés ! Mais révise ton bac d'abord, jam-jam68140 !

                                                            • 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é.
                                                            × 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