Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

Qui voudrais compléter le tutoriel existant ?

    9 mars 2014 à 11:59:14

    Bon, ça fais tellement longtemps que tu demande pour afficher une image avec une classe... :p

    Remplace ton script par ça :

    window.onload = function() {
    	var canvas = document.getElementById('canvas');
    	ctx = canvas.getContext('2d');
    
    	function monImage(path, posx, posy) {
    		this.image=new Image();
    		this.path = path;
    		this.posx = posx;
    		this.posy = posy;
    		this.affiche = function() {
    			this.image.src=this.path;
    			this.image.onload=function() {
    				ctx.drawImage (this.image, this.posx, this.posy);
    			}.bind(this);
    		}
    	}
    	
    	var materials =  {
    		background:{
    			path:"images/preload/background.png",
    			posx:0,
    			posy:0
    		},
    		boutons:{
    			path:"images/preload/boutons.png",
    			posx:280,
    			posy:300
    		}
    	};
    
    	var exemple1 = new monImage(materials.background.path,materials.background.posx,materials.background.posy);
    	exemple1.affiche();
    
    	var exemple2 = new monImage(materials.boutons.path,materials.boutons.posx,materials.boutons.posy);
    	exemple2.affiche();
    }

    D'ailleurs, quand tu code un truc, laisse tes objets avec une belle indentation... ça simplifie la lecture! :p

    Je reprendrais le RPG pendant les vac's (apparemment tout seul mais tant pis ^^)

    EDIT : Mais tes paresseux, je m'en occuperais avant bien sûr hein! :p

    -
    Edité par jam-jam68140 9 mars 2014 à 12:00:05

    • Partager sur Facebook
    • Partager sur Twitter
      13 mars 2014 à 20:56:53

      Merci beaucoup ! :)

      Comme je ne sais pas où poster mes question idiotes, je me permets d'abuser de ta gentillesse mais si tu connais un forum plus adapté à une débutante, je suis preneuse.

      J'ai retravaillé un peu ton code pour faire une boucle avec cette fois 3 images (même si ça ne se voit pas) + du texte qui n'est pas dans une classe.

      Voici main8.js et index.html . Ça marche !

      J'ai essayé de faire la même chose avec une image double que je veux couper en deux et dont je veux placer chaque moitié là où je veux mais il me manque toujours une des moitiés à l'affichage.

      Je suis partie du code suivant que j'avais utilisé dans un autre script et que j'ai transformé pour le rentrer dans ma classe en rajoutant des "this" un peu partout, sans grand succès.:

      ctx.drawImage(img, positionx, positiony, width/2, height, positionx, positiony, width/2, height);


      Pour la taille de l'image, je suppose qu'il y a moyen de la récupérer automatiquement avec javascript mais je n'en suis pas sûre.

      Ma classe était tellement inefficace que je ne l'ai même pas gardée...

      Mon but ultime étant d'afficher plein d'images, ainsi que des tilesets, des sprites, au choix... J'ai de l'ambition mine de rien ! ;)

      -
      Edité par doudoulolita 13 mars 2014 à 23:24:45

      • Partager sur Facebook
      • Partager sur Twitter
        14 mars 2014 à 17:53:43

        heum... je crois que tu n'as pas tout saisi au "classes" (qui ne se nomment pas vraiment comme ça il me semble en js... il me semble qu'on parle plutôt de constructeur mais je ne suis pas sûr... :p)

        Je te MP

        • Partager sur Facebook
        • Partager sur Twitter
          14 mars 2014 à 20:54:09

          jam-jam68140 a écrit:

          heum... je crois que tu n'as pas tout saisi au "classes" (qui ne se nomment pas vraiment comme ça il me semble en js... il me semble qu'on parle plutôt de constructeur mais je ne suis pas sûr... :p)


          Ce n'est pas directement ça. Il n'y a pas de classes en JS (seulement des façons de faire similaires) car JS est orienté prototypage.
          • 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)
            15 mars 2014 à 13:00:30

            Les classes ne s'appellent effectivement peut-être pas comme ça en javascript, mais vous voyez ce que je veux dire, c'est le principal ! ;)

            L'intérêt reste de ne pas avoir à coder 10 000 fois la même chose, et de donner les propriétés et méthodes à un 'truc" qui permettent de les réutiliser facilement.

            Comme je sais que vous manquez de temps pour m'aider à ce sujet,  j'en ai parlé aussi sur le forum d'Ubuntu.

            Dans un message privé à Jamjam68140, je lui ai soumis l'idée de développer le jeu du paresseux d'une autre manière :

            "Sinon, pour le jeu du paresseux, le jour où tu as du temps, tu peux coder et expliquer comment faire un jeu où différents animaux arboricoles comme des écureuils, des oiseaux, des singes, (ou même des animaux imaginaires) se battent pour trouver un bon emplacement où dormir, dans des cabanes ou/et des nids qu'ils construisent dans les arbres. Bien sûr les nids d'oiseaux ne conviennent pas aux singes mais les singes veulent piquer la place pour leur maison!  Ils peuvent récupérer les provisions qu'ils cachent par-ci, par-là pour gagner des points de vie. Ça donne un côté écolo au jeu si des bûcherons coupent les arbres au fur et à mesure ! Avec ça, ça devient vraiment un RPG puisqu'on peut choisir l'animal qu'on veut au début du jeu et avoir des missions spéciale du genre rassembler la troupe et trouver une grande forêt d'arbres précis comme des eucalyptus pour des pandas (ou une forêt magique)... Outre les autres animaux qui veulent un lieu et des provisions, il y a aussi les prédateurs à éviter, à terre, dans les arbres et dans les airs.

            L'avantage de ce type de jeu, pour un tuto, c'est que tu peux commencer à expliquer comment coder un jeu de plate-forme très simple, à un ou deux persos, et finir par un vrai RPG multijoueur."

            • Partager sur Facebook
            • Partager sur Twitter
              15 mars 2014 à 16:23:17

              @doudoulolita : "sans aide ça risque de ne jamais prendre forme" -> pour ce qui est de la forme, les images sont à trouver avant de coder... :p

              En suite, par MP je t'ai envoyer un lien vers un zip, lis le. Tu devrais comprendre pourquoi utiliser un constructeur (ce que tu appelle une class) et si tu ne comprend pas comment ça marche, je montre une façon de t'en passer (juste avant d'aborder les constructeurs). Du coup, utilise cette méthode si tu ne comprend toujours pas et au fur et à mesure tu comprendra toute seule comment utiliser ces fameuses class. :p

              Et puis si tu est habitué aux class d'un autre langage, pourquoi n'essaye tu pas de reprogrammer toi même ton propre système de class ? ça te donnerais peut être un petit coup de pouce pour comprendre...

              @CappaFlow : C'est vrai que la notion de prototype est difficile à comprendre pour quelqu'un qui n'y est pas habitué... Pauvre lolita! xD

              -
              Edité par jam-jam68140 15 mars 2014 à 16:24:02

              • Partager sur Facebook
              • Partager sur Twitter
                15 mars 2014 à 18:26:33

                Le lien que j'ai mis vers ce topic sur le forum d'Ubuntu peut nous apporter l'aide d'autres codeurs pour le tuto, en tout cas, j'espère !

                Pour les graphismes, j'explique ce que je fais en détail par MP. Les remerciements pour ton aide sont dedans aussi. :)

                Il y a quelques temps, j'ai commencé des graphismes avec Blender pour aider un jeune programmeur sur son jeu (en java) mais comme c'était trop long à faire pour moi en 3D, il a finalement utilisé Opengameart pour des graphismes 2D très mignons. C'est  aussi là que le concepteur d'Ultimate Smash Friends (en python) a trouvé un super graphiste en pixelart : Redshrike. Je me suis inspirée de ses persos pour faire certains des miens mais je ne suis pas à l'aise en pixelart, c'est super long à faire.

                Pour le jeu, on peut utiliser certains de mes persos actuels (comme le panda qui mange de l'eucalyptus et a du mal à le trouver), et les passer au besoin en vue isométrique ou se baser sur des graphismes trouvés sur Opengameart.

                Ce qu'il faut décider pour les images, c'est de quoi on a besoin très précisément pour le jeu. :)

                Déjà définir le type de vue : isométrique et permettant de voir les branches des arbres ou totalement vue de dessus ? Si on fait quand même de profil, il faut pouvoir scroller en horizontal. Le scrolling en vertical avec un arbre géant ou même des arbres volants serait aussi possible. Mais ça ne fait pas vraiment RPG !

                Fait-on éducatif (comprendre l'écosystème, dénoncer les coupes sauvages d'arbre...) et très réaliste ou baston ? Fait-on sombre/gore (les rapaces qui bouffent les animaux avec du sang partout) ou rigolo, ou encore fantastico-magique ? Si on s'inspire du dessin de mon paresseux, c'est plutôt genre enfantin et pas hyper réaliste, mais les actions et les missions peuvent l'être.

                Il faudrait imaginer un gameplay simple pour le premier niveau. Par exemple, il faut échapper au prédateur (un rapace ?) quand on se ballade dans des zones sans arbres, et se battre ou juste courir plus vite que le deuxième perso pour obtenir le nid (un seul arbre serait muni d'un nid douillet, déjà tout préparé, ou chacun doit-il retrouver son propre nid sans se faire manger ?). Des provisions doivent aussi être collectées, réparties à plusieurs endroits de la carte, à des endroits découverts comme dans les arbres. Celui qui a rapporté ou mangé le plus quand il rejoint son nid a gagné, par ex. Manger trop n'est pas forcément une bonne idée, on s'alourdit et on court moins vite, il peut donc y avoir une quantité idéale à respecter, dans un deuxième temps.

                Il faut décider si on utilise des tiles ou non, si chaque sprite a une taille bien définie et si elle est identique à celle des tiles (c'est plus simple, j'imagine). Ça me semble être du ressort du programmeur plutôt que du graphiste, et on doit avoir en tête l'idée que ça servira pour le tuto, donc le plus simple possible, je pense.

                Quelle est la taille de la carte au début du développement (identique à la taille de l'écran ou plus grande à scroller ?)

                Comment faire pour pouvoir agrandir la carte sans que ça oblige à tout redessiner à chaque fois ? Fait-on juste des passages vers des niveaux différents de la même taille que le premier ou prévoit-on un univers le plus grand possible ?

                Ensuite, commencer par peu de choses à dessiner pour ne pas se donner trop de boulot, et définir surtout le style graphique du jeu.

                • les persos  : 2 animaux, soit de la même espèce mais d'une couleur différente comme des écureuils gris et roux (ce qui simplifierait le travail du graphiste), soit d'espèces différentes mais qui mangent les mêmes choses. Il peut même y avoir 1 seul perso qui doit juste échapper au boss et/ou retrouver toute sa nourriture, dans la première étape du jeu.
                • le nombre d'actions : statique, marche, course, saut, grimper, ramasser, tomber, se battre... Je propose de commencer par statique (en position d’attraper quelque chose, au besoin), course, grimper, ce qui semble logique dans les arbres. Le reste viendrait plus tard. Ça fait déjà pas mal de frames à dessiner
                • le boss : 1 prédateur qui aime manger ces 2 espèces ou un bûcheron qui coupe les arbres. S'il y a 2 persos qui luttent pour un seul nid et/ou la même nourriture ou 1 perso avec un objectif précis en un temps déterminé, on peut même s'en passer dans un premier temps. Plus tard, on pourra faire se battre les persos contre les boss, si on choisit un style non réaliste.
                • accessoires : nids, provisions (éventuellement cachettes et cabanes rigolotes si on fait plus dans la fantaisie)
                • décors à créer au début du développement : ciel, herbe et arbres seulement ou aussi terre, montagnes, buttes, rivières, lacs, chemins, routes ?

                -
                Edité par doudoulolita 15 mars 2014 à 18:32:14

                • Partager sur Facebook
                • Partager sur Twitter
                  16 mars 2014 à 12:13:06 - Message modéré pour le motif suivant : Le flood est strictement interdit


                    16 mars 2014 à 17:12:43

                    Et bien... Pour quelqu'un qui porte le pseudo "linkpower", c'est pas très puissant ce que tu viens de dire tu sais ?

                    cependant, je respecte ton avis . Il est vrai qu'il va être difficile de faire un truc attrayant mais pourquoi ne pas tenter si on a du temps à perdre ? D'ailleurs, quel était le but exact de ton message. Dans le fond, n'avais tu rien de mieux à faire toi non plus lorsque tu l'as écris ? (remarke, c vrè k en ekrivan com sa, sa va + vite mè tou 2 mm!)

                    Laisse moi deviner le chemin qui t'a amener jusqu'ici :

                    Tu as vu ce topic et tu as voulu écrire de la merde. Mais dans quel but ?

                    Dans le but de nous faire rager ? Mais pourquoi ? Pour rigoler de notre rage ? Et pourquoi veux tu rigoler de notre rage ?

                    Peut être pour comblé le vide de ta pathétique et misérable existence ? Médite la dessus si tu veux mon avis! ;)

                    • Partager sur Facebook
                    • Partager sur Twitter
                      25 mars 2014 à 18:15:28

                      Revenons à nos moutons (ou plutôt à nos paresseux).

                      Je cherche de l'inspiration pour un décor de forêt et j'ai trouvé ça sur Opengameart: Green Village, mais c'est trop petit et les arbres doivent avoir des branches. En tout cas, c'est la bonne perspective.

                      Il y a longtemps, j'avais commencé un arbre avec Blender mais j'ai peur que ce soit super long à finir. Par contre, ça peut m'aider pour avoir un modèle sous le bon angle puis dessiner, mais avec un autre logiciel genre Inkscape, que j'aime bien.

                      Une idée serait de pouvoir passer de la vue trigonométrique à la vue 2D avec une touche (un peu comme dans Blender), lorsque l'on en a envie ou besoin (bagarre entre deux animaux qui sautent de branche en branche, façon jeu de plateforme). Pour le tuto, ça permet de commencer par expliquer la plateforme, qui est sûrement plus simple à coder, avant de passer à quelque chose qui fait vraiment RPG.

                      J'ai pris un bouquin sur les animaux pour trouver des idées. Le gibbon, par exemple, passe de branche en branche avec ses longs bras ou même se suspend à des lianes, pourquoi pas,  et il est assez drôle.

                      • Partager sur Facebook
                      • Partager sur Twitter
                        26 mars 2014 à 10:24:41

                        J'ai trouvé encore une source d'inspiration assez vaste car le paresseux se trouve en Guyane, où la végétation et la faune sont plutôt sympas. Je n'y suis jamais allée mais il y a plein de sites, sur les réserves naturelles en particulier.

                        Je prends des notes sur le sujet, en réfléchissant à des niveaux de difficulté progressive à coder.

                        L'idée actuelle pour le jeu serait que les joueurs soient de jeunes écolos qui veulent aider les animaux de Guyane à manger, se reproduire, trouver leur nid (leur construire des cabanes au besoin) et échapper aux prédateurs animaux et humains.

                        Outre le paresseux, il y a l'atèle et le boa qui sont bien sympas comme animaux à dessiner, par exemple, mais aussi plein d'autres, carnivores, rongeurs, édentés, primates, reptiles divers et variés (caïmans, iguanes), oiseaux (dont des rapaces bien rapaces comme la harpie), chauves-souris...

                        Côté arbres et végétation, j'ai un peu de mal à m'y retrouver mais j'ai quelques sites de référence qui en listent certains. Les noms des arbres en Guyane sont très sympas aussi !

                        A noter aussi pour trouver des dessins : http://indiesquid.com/

                        -
                        Edité par doudoulolita 26 mars 2014 à 10:29:27

                        • Partager sur Facebook
                        • Partager sur Twitter
                          27 mars 2014 à 13:40:30

                          Ça ne sera peut-être pas la peine que je fasse moi-même tous les dessins car j'ai trouvé ceci (grâce à Opengameart) : glitchthegame.com

                          Par contre, il y a beaucoup de trucs en flash et je ne l'utilise pas ! Heureusement qu'on trouve sur opengamart les spritesheets en jpg et en svg.

                          Le style est très sympa mais pas très facile à reproduire si je veux faire des personnages du même esprit, il va falloir que je m'entraîne pas mal !

                          Rien n'empêche aussi de repartir du concept du jeu glitch si ça tente quelqu'un puisque c'est dans le domaine public.

                          -
                          Edité par doudoulolita 27 mars 2014 à 13:48:31

                          • Partager sur Facebook
                          • Partager sur Twitter
                            27 mars 2014 à 18:35:00

                            oui oui oui... :D

                            Tu as l'air de faire un gros boulot de recherche... :D

                            Je te laisse continuer, tu te débrouille bien toute seule... Quand tu as ce que tu veux, contact moi pour coder.. :) Bonne chance.

                            • Partager sur Facebook
                            • Partager sur Twitter
                              30 mars 2014 à 12:33:00

                              Oui, j'avance bien grâce à cette découverte du jeu Glitch. Je me base sur le vieux tuto pour les tailles de niveaux, basés sur des tiles de 32px et un décor carré de 512px.

                              Voici le résultat avec Gimp : guyana-decor.zip (voir  le niveau)

                              Il manque des bords pour le chemin s'il y avait un chemin d'un seul côté et non en croix, je le ferai plus tard. Je n'ai pas utilisé le petit buisson pour l'instant dans mon décor final.

                              Le nid n'est pas extra, on le voit assez mal, mais ça indique d'où on part et où on doit arriver s'il y a un seul animal, ou les nids de chacun s'il y en a 2.

                              Je ne sais pas si pour mon tilseset, je dois mettre de l'herbe en dessous des champignons, de l'arbre et des autres éléments ou les laisser transparents comme ici. Ou faut-il une couleur pour le fond ? Si je mets de l'herbe au fond, l'avantage est de n'avoir qu'une seule couche de décor mais on ne peut pas passer derrière les buissons et les arbres.

                              J'ai un peu de mal pour la 3D isométrique avec cette base, mais le résultat n'est pas trop moche, même si ça mélange 2D et vue de dessus. A revoir par la suite si ça ne va pas.

                              Peut-être ce serait mieux de diminuer la hauteur du tronc pour un léger effet de perspective, mais je pense ajouter des branches au milieu pour certaines parties du jeu, pour pouvoir mieux grimper.

                              -
                              Edité par doudoulolita 30 mars 2014 à 12:33:19

                              • Partager sur Facebook
                              • Partager sur Twitter
                                30 mars 2014 à 15:52:41

                                Le nom du futur jeu est devenu Guyana Dream.

                                gd-essai1.zip et gd-essai2.zip sont réalisés en javascript d'après l'ancien tuto. Je n'ai fait que la partie carte, avec des cartes de plus en plus compliquées sur gd-essai2 (voir dans le dossier maps).

                                Résultat : gd-essai1 et gd-essai2.

                                Dans gd-essai1, je rajoute une fonction pour dessiner l'arbre qui n'est pas utile par la suite dans l'ancien tuto mais le serait peut-être si on affichait les arbres sur une couche à part.

                                Il va falloir faire au moins un perso maintenant pour que je puisse poursuivre sur le vieux tuto.

                                Dans le nouveau tuto, il suffirait de donner les différences entre le vieux et le nouveau tuto, qui sont principalement graphiques, pour ne pas avoir à refaire toute la première partie.

                                -
                                Edité par doudoulolita 30 mars 2014 à 15:55:54

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  30 mars 2014 à 22:15:53

                                  singe atele spritesheetmarche atele devantmarche atele dosmarche atele a droitesaut atele devantsaut atele dos

                                  J'ai dessiné l'atèle noir (sur le svg, la spritesheet est en bas à gauche) avec une grille de 32*48px comme dans l'ancien tuto. J'ai fait la marche de face, de gauche, de droite et de dos, et j'ai rajouté une colonne pour le saut et l'accrochage aux arbres (de dos et de face seulement).

                                  Sur le png, j'ai changé légèrement les sprites de place pour améliorer l'animation car sur le svg, ils sont placés un peu au pif verticalement.

                                  Je me suis basée sur 3 images de Wikimedia Commons : Atele geoffroyi, atele marginatus et un dessin mais j'ai changé les proportions pour que l'on voit mieux la tête.

                                  -
                                  Edité par doudoulolita 15 avril 2014 à 0:41:19

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    31 mars 2014 à 20:42:00

                                    J'avais un petit problème d'affichage de mes essais mais apparemment, c'est résolu.

                                    -
                                    Edité par doudoulolita 1 avril 2014 à 13:01:20

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      2 avril 2014 à 20:05:34

                                      Bon, j'ai un peu l'impression de parler toute seule ici mais je te tiens au courant de ce que j'ai fait.

                                      J'ai repris ton tuto du RPG, et j'ai réussi à générer ma carte avec ta méthode (après avoir testé celle de l'ancien tuto basé sur un fichier json pour la map, que je comprenais mal. Je l'ai mise sur un serveur tuxfamily : http://usf.tuxfamily.org/guyana-dream/ où j'ai déjà un autre projet pas fini en javascript (wardance-usf)

                                      J'ai fait avant plusieurs étapes qui suivent plus ou moins ton tuto, avec mes petites variations persos.

                                      Je me suis entraînée dessus jusqu'au premier exercice pour lequel j'ai bien avancé mais où je bloque pour générer la nouvelle carte : gd-essai-tuto2/exercice.html. J'ai testé aussi ce soir sur internet explorer (pour une fois que je suis sous Windows) et ça marche aussi.

                                      Dans cet exercice, il faut donc cliquer sur la tuile désirée du tileset de gauche  (canvas1) puis cliquer sur le canvas2 (au centre) pour y dessiner la tuile choisie là où on veut.

                                      Je voulais redessiner la map entière à droite via un clic sur le canvas3 mais il me dessine la map originelle initialisée à 0 (ce que je contrôle en passant le 1er élément à 10, sinon rien ne s'affiche, bien sûr)

                                      -
                                      Edité par doudoulolita 5 avril 2014 à 19:50:24

                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        14 avril 2014 à 18:00:42

                                        J'avance pour coder d'après le nouveau tuto, avec ma map et mon sprite à moi. J'en suis à k.html quand on commence à ajouter des événements avec alert().

                                        Problème : la propriété z-index est reconnue en local mais quand j'uploade sur mon serveur , le sprite n'apparaît plus. Ce n'est donc pas une question de navigateur puisque je regarde avec le même, mais plutôt un problème du serveur. Par contre ça marche sur usf.tuxfamily.org

                                        J'ai essayé diverses choses, en changeant l'ordre des canvas, etc., en supprimant bien le cache à chaque fois, mais rien ne marche. Dis-moi ce que tu vois de ton côté.

                                        A noter que sur le code d'exemple de ton tuto avec la map Zelda, je ne voyais pas le sprite car l'extension de sprite.png était en majuscule, en la changeant, tout rentre dans l'ordre.

                                        J'ai changé un peu le code à d'autres endroits en essayant de mettre des variables qui seront ensuite plus faciles à changer comme la grandeur et le nombre de tuiles ou la taille du sprite.

                                        Les variables sont mises au début du code pour la plupart. Il y a 2 fichiers js, un pour le perso, un pour la map. Tout ça fonctionne très bien en local, mon sprite bouge et tout.

                                        La marche n'est pas encore super de profil, on dirait qu'il a trois bras, mais j'essaierai d'améliorer ça. Il bloque aussi quand il arrive sur les bords du canvas.

                                        Dans le tuto, il y a des parties qui pourraient être mises plus loin, comme la gestion de l'appui sur 2 touches en même temps (ou consécutivement, je n'ai pas très bien compris), c'est moins essentiel donc ça peut être mis en annexe, dans une partie qu'on appellerait "perfectionnements".

                                        Je n'ai pas réussi à utiliser Map.tileset (j'ai dû mettre une majuscule à map sinon ça ne marchait pas, ça se mélangeait avec le tableau map) donc j'ai laissé comme c'était avant.

                                        J'ai commencé un nouveau tileset avec un palétuvier, mais il reste encore pas mal de dessins à faire pour que je puisse faire toute la forêt de Guyane ;)

                                        tileset guyana-dream2   Grille de 32px de côté.

                                        -
                                        Edité par doudoulolita 14 avril 2014 à 18:57:52

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          21 avril 2014 à 12:43:49

                                          J'ai mis un message sur le topic des codeurs du forum d'Ubuntu pour un problème d'affichage des images avec IE11 de Guyana-Dream mais si tu as la solution, ce serait cool ! :soleil:
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            24 avril 2014 à 13:52:14

                                            Je commence à dessiner le tucum et le palétuvier en vue de dessus, mais pour le palétuvier, je ne suis pas encore satisfaite, les racines paraissent encore trop de profil.

                                            Comme c'est beaucoup de boulot à changer, si ça te convient comme ça, je ne m'embêterai pas trop à l'améliorer pour l'instant.

                                            Ce que je me demande, c'est si je fais 2 tilesets différents : un pour la vue de dessus, et un autre pour la vue de profil ou bien un grand qui réunit tout (mais c'est plus compliqué à expliquer et à faire la map  pour le tuto).

                                            Pour les chemins, il faudra que je prévois une vue de profil, ça ne devrait pas être trop compliqué, mais il sera sûrement plus étroit qu'un carreau de 32px.

                                            C'est vrai qu'avec 16px, on a plus de détails pour les collisions mais ça fait des maps énormes alors pour le début du tuto, c'est galère.

                                            C'est pour ça que le tuto sera forcément un peu indépendant du jeu fini, je pense, mais surtout, il faut prévoir de pouvoir changer facilement la variable tileWidth pour passer d'un petit tileset à grandes tuiles de 32 à un grand tileset à petites tuiles de 16 au cours du tuto, je pense.

                                            Sur Gimp et sur Inkscape, on change la valeur de la grille ou on ajoute des guides rapidement, donc si je dessine bien mes arbres en préparant une version permettant de passer facilement de 32 à 16px, ça devrait être facile à programmer.

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              1 mai 2014 à 11:36:34

                                              tileset-dessus.svg

                                              Les liens dans le post précédent ne sont plus bons.

                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                4 mai 2014 à 22:57:04

                                                Je m'entraîne toujours sur le code du tuto et j'essaie de tester mes propres solutions, ce qui n'est pas si simple pour moi. Ça me permet d'avancer dans l'apprentissage du javascript tout en essayant d'imaginer ce dont j'aurai besoin pour le jeu.

                                                Jusqu'à m2.html, ça marche à peu près bien, même si mon code pour lever les bras n'est pas extra, et j'ai réussi à suivre le tuto de jam-jam68140 pour réaliser un constructeur. :)

                                                A la place de lever les bras à la croisée des chemins, j'aimerais que le perso se baisse quand il rencontre un fruit ou saute quand il est sous un arbre. Pour le perso dirigé par le joueur, il faut que ce soit une touche qui provoque ça, mais si on a des perso en AI, il faut pouvoir le faire grâce au numéro de la tuile, j'imagine.

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

                                                Après, j'ai essayé de faire un changement de carte sans utiliser de php (comme le fait le tuto) : m4.html ça ne fonctionne pas bien pour récupérer le allowWalk2.

                                                Pour un débutant, avoir besoin d'un serveur php n'est pas trivial pour les essais. J'ai beau en avoir un installé chez moi, pour le tuto, je trouve qu'on devrait rester en javascript sans avoir besoin de php (si c'est possible).

                                                Mais je vois en essayant de le faire qu'il faudra récupérer les évènements2 ailleurs que dans la fonction drawPerso, sinon, ça a l'air de faire un conflit (j'ai déjà eu ça en essayant d'autres trucs, le perso qui bloque ou avance trop vite, au contraire)

                                                Je me suis aperçue qu'il sera peut-être mieux d'avoir 2 tilesets différents pour la vue de dessus et la vue de profil, mais certains éléments risquent d'être en double, donc c'est un peu dommage. Si on met tout ensemble sur un seul tileset, ça fait un très gros tileset et pour le tuto, ce n'est pas facile à gérer.

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  8 mai 2014 à 23:00:39

                                                  Un nouveau personnage pour le jeu : un singe capucin

                                                  spritesheet singe capucinJ'ai mis l'ensemble du site Guyana Dream sous licence Creative-Commons, j'espère que ça ne te dérange pas vu que le code part de ton tuto.

                                                  Au besoin, je peux ne mettre que mes dessins sous cette licence si tu préfères.

                                                  Comme tu le verras sur Guyana Dream, j'ai réussi à faire choisir le personnage grâce à onclick. Ce n'est pas parfait mais j'ai réussi sans tuto. J'ai quand même jeté un œil à 2-3 sites:

                                                  -
                                                  Edité par doudoulolita 9 mai 2014 à 2:00:14

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    9 mai 2014 à 15:20:08

                                                    aha tu te bas sans moi x)

                                                    C'est bien, j'aurais plus le temps avant les grandes vacances de m'occuper de toi désolé... :/

                                                    Non, c'est bon, tant que tu met pas le tuto ça me va :)

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      11 mai 2014 à 21:11:01

                                                      Cacaoyer Rivière (Pachira Aquatica) avec ses jolies fleurs (à observer plus en détail sur le svg)

                                                      -
                                                      Edité par doudoulolita 11 mai 2014 à 21:13:06

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        30 mai 2014 à 12:26:17

                                                        J'espère que tout va bien pour toi. Voici quelques nouvelles de mon côté.

                                                        Pour m'amuser et me perfectionner avec Blender, j'ai modélisé le tucum en 3D. Ca me permettra de vérifier mes proportions en vue de dessus, et en plus, j'ai vérifié le look de ce palmier un peu plus en détails (sur des photos non libres qui me servent juste d'inspiration) et il est assez différent de celui que j'avais dessiné. Je ne me suis pas trop embêtée avec les textures, juste une photo de planche un peu retravaillée quant aux couleurs et une photo de feuilles recadrée (prises par moi).

                                                        En français, le fruit est noté aouara et non awara, je l'ai lu dans un petit livre pour enfants sur la Guyane aux éditions Grandir (pris à la bibliothèque jeunesse de mon quartier). Je ne l'ai pas encore modélisé avec Blender, mais avec tous les grains, je ne sais pas trop quelle technique utiliser.

                                                        J'ai aussi commencé le palétuvier mais c'est un gros boulot et j'attends d'avoir des conseils sur Blenderclan.

                                                        Si mon tucum en 3D te plaît plus que l'autre, on pourra modéliser tout le contenu du jeu et juste réduire à la taille des tuiles. Là, je me base sur les carrés de Blender pour la taille en vue de face, mais en perspective, ça change. Je ne sais pas si on peut mettre des guides sur la camera à la place.

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          3 juillet 2014 à 15:19:36

                                                          J'ai trouvé un tuto très simple sur la balise canvas, ça peut servir de source d'inspiration : http://www.webisn.byethost5.com/jeu_canvas

                                                          Pour Guyana Dream, au lieu de boules magiques, on pourrait faire des oiseaux qui volent un peu dans tous les sens et qu'il faut éviter pour faire une sorte d'AI simplifiée ? Si ce sont des perroquets, on pourrait les faire parler, ce serait rigolo et instructif pour le tuto.
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                            7 juillet 2014 à 13:26:15

                                                            Je note ici l'idée de jam-jam envoyées par MP :

                                                            "Pour le perroquet, c'est une bonne idée s'il pouvait parler histoire de donner le but du jeu ou alors de donner des informations sur la déforestation aux enfants... Par exemple le nombre d'oiseaux tués chaque année à cause de la déforestation et le nombre de nouveaux-nés chaque année... Ainsi les enfant comprendrons bien le problème et ils pourront faire des soustractions..."

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              21 juillet 2014 à 22:23:27

                                                              J'ai commencé à modéliser un ara bleu d'après une photo avec Blender pour le dessiner dans les bonnes perspectives par la suite.

                                                              Je mets tous mes dessins même pas finis sur Google +. Sur le site, je mettrai ce qui est suffisamment correct. Peut-être vais-je y rajouter des pages pour mettre à part la 2D et la 3D.

                                                              Il sera utile de donner des liens vers des tutos pour le graphisme dans une annexe du big-tuto, avec Inkscape ou Blender. On pourrait aussi donner des liens pour le pixel art pour que chacun puisse, pour son propre jeu, choisir la technique qui lui plaît le plus.

                                                              Pour le big-tuto javascript, il faut bien garder en tête que le but n'est pas de reproduire le jeu qui sert d'exemple (en l’occurrence Guyana-Dream), mais de pouvoir faire ensuite son propre jeu, avec ce qu'on a envie d'y implémenter.

                                                              C'est pour ça que par exemple j'ai mis en variable la taille des tuiles et des sprites dans le code inspiré de ton tuto. L'idéal serait que les gens n'aient à changer que le minimum d'éléments, qui pourraient être dans un dossier data (voir le principe d'Ultimate Smash Friends, en python), lorsqu'ils voudront faire leur jeu à eux.

                                                              Cela n'empêche pas d'essayer de comprendre comment le code est fait (but du tuto), mais pour ceux qui voudraient juste faire des variations, ce serait pratique. Par exemple, j'ai repris un code existant pour faire une version basique en javascript d'Ultimate Smash Friends.

                                                              Même si Guyana-Dream n'a pas le design attendu d'un RPG classique, n'hésite pas à me dire quel type de choses on doit absolument y trouver. Je suppose qu'on doit prévoir un inventaire, mais j'ai du mal à imaginer ce que les singes pourront bien porter (des fruits différents, des pierres, des bouts de bois, leurs petits ?).

                                                              Pour l'instant, j'aimerais bien qu'on reste dans le réalisme et l'éducation à la biodiversité, mais on peut rendre le jeu plus fantaisiste dans un deuxième temps (genre, quand on abordera les classes et la personnalisation des persos, on ajoute des armures et des armes humaines !)

                                                              C'est pour ça que je ne suis pas sûre qu'il faille dès le début un jeu super abouti pour le tuto, mais plutôt un jeu susceptible d'être amélioré à l'avenir.

                                                              -
                                                              Edité par doudoulolita 23 juillet 2014 à 2:10:52

                                                              • 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