Guyana Dream

Le but du jeu

Le tutoriel

Le jeu Guyana-Dream était à l'origine destiné à illustrer un tutoriel mais tout ne s'est pas passé comme prévu.

Sebcap26 avait écrit le tutoriel Créer un mini-rpg en javascript avec canvas. Les sources sont disponibles sur Github.

Jamjam68140 a eu l'idée de lancer le topic [big-tuto] Créer un rpg avec html5 pour le pousuivre mais il n'a pas eu le temps de terminer.

Doudoulolita a repris un peu des deux codes pour faire son jeu, et essaie de le structurer et de le simplifier en vue de bien comprendre et de pouvoir peut-être faire le tuto elle-même. De l'aide serait cependant bienvenue !

La feuille de route

Révision totale du tuto

La feuille de route affichée ici se basera sur des tutoriels trouvés sur internet, en essayant de simplifier le code au maximum pour le rendre plus compréhensible.

Plan du tutoriel

Ce plan est susceptible de changer d'ici le rédaction complète du tutoriel.

Le tuto est actuellement partagé dans le courselab d'Openclassroom, mais est en cours de rédaction. Tous les commantaires sont les bienvenus

Partie 1 - La conception d'un mini-RPG

  1. Les éléments de base d’un RPG.
  2. Simplifier et trouver les graphismes
  3. HTML5 et la balise canvas
  4. Donner du style à la CSS : Voir essai 1-3

Partie 2 - Créer une carte du jeu

  1. Mettre de la couleur dans le canvas : Voir essai 2-1
  2. Afficher des images sur le canvas : Voir essai 2-2
  3. Ajouter du texte : Voir essai 2-3
  4. Présentation du tileset : Voir essai 2-4
  5. Afficher une ligne de la carte : Voir essai 2-5
  6. Afficher la carte sur le canvas : Voir essai 2-6b.

Partie 3 - Animer un personnage

  1. Déplacer ume image : Voir essai 3-1
  2. Déplacer avec le clavier : : Voir essai 3-2
  3. La spritesheet
    • Afficher chacune des poses du personnage de la première ligne de la spritesheet à intervalles réguliers. Voir essai 3-3a.
    • Animer le sprite
      • Animation du sprite sans déplacement. Voir essai 3-3b
    • Déplacement et animation d'un personnage à l'horizontal - Voir essai 3-4a
    • Animation d'un personnage dans tous les sens (en passant aux autres lignes de la spritesheet)
    • Animer le personnage dans le bon sens selon la touche pressée. Voir essai 3-4b d'après la vidéo Sprites et animation - Javascript par Computer Scientists

Partie 4 - Gérer les Collision

  1. Collision sur les bords. Voir essai 4-1.
  2. Ajouter un canvas. Voir essai 4-2
  3. Collision avec une image
    • collision du sprite avec une image affichée sur le canvas. Voir essai 4-3.
    • Collision du sprite avec une image affichée sur le canvas à plusieurs endroits. Voir essai 4-4.
  4. Collision sur la carte
    • Collision du sprite avec une tuile du tileset affichée sur la map : Voir essai 4-5
    • Utilisation d'un tableau pour stocker le numéro des tuiles et les coordonnées pour bloquer le personnage : Voir essai 4-6
    • Reprise de tout ce que l'on a appris sur un grand canvas : Voir essai 4-7

Partie 5 - Donner un but au jeu

  1. Mettre des objets dans l'inventaire
    • Supression d'un objet à attraper en cas de passage du personnage sur sa tuile. Voir essai en cours
    • Placement de cet objet dans un inventaire. Voir essai en cours
    • Comptabilisation du nombre d'objets attrapés et affichage du nombre
  2. Chronométrer le jeu
  3. Mettre un écran de fin

Partie 6 - Encore plus de fun !

  1. Changer de carte
    • Choisir l'emplacement (ex: bord du canvas, tuile...) où se situera le changement de carte
    • Changer la carte lorsque le personnage passe à cet endroit
    • Prévoir un système de gestion des différentes cartes
  2. Parler à un PNJ (personage non joueur)
    • Dessiner un PNJ à un emplacement précis
    • Animer un PNJ qui reste sur place
    • Ne pas marcher sur les PNJ
    • Changer le comportement du personnage en cas de rencontre avec le PNJ
    • Changer le comportement du PNJ en cas de rencontre avec le personnage
    • Déplacer automatiquement le PNJ
  3. Choisir parmi 2 personnages
    • Mettre les images des deux personnages
    • Afficher le personnage choisi sur la carte
    • L'un des persos étant plus grand que la taille d'une tuile, le petit pourra se glisser dans des ouvertures auxquelles l'autre n'aura pas accès.
    • changer la vitesse de déplacement d'un seul des 2 personnages en fonction de son espèce
    • Changer la vitesse de déplacement du personnage quand il a obtenu un certain nombre de points de nourriture (en fonction de l'inventaire)

Certains décors et persos ont été modélisés avec Blender 2.74 (rendu toon via Freestyle) par Doudoulolita:

Pour aider à réaliser ce jeu et ce tutoriel, rendez-vous sur github ou sur le forum Zeste de Savoir.