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 commentaires 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-4

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-6

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. Animer le sprite : Voir essai 3-4

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. Voir essai 4-3.
  4. Collision sur la carte. Voir essai 4-4

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 5-1
    • Placement de cet objet dans un inventaire. Voir essai 5-2
  2. Chronométrer le jeu et diminuer l'énergie et la vitesse au fil du temps. Voir essai 5-3
  3. Comptabilisation du nombre d'objets attrapés et affichage du nombre, et de l'énergie perdue et gagnée par le personnage. Voir essai 5-4
  4. Mettre un écran de fin et indiquer si on a gagné ou perdu. Voir essai 5-5

Partie 6 - Encore plus de fun !

  1. Changer de carte : Voir essai 6-1
  2. Rencontre avec un PNJ (personnage non joueur) qui indique la quête. Voir essai 6-2
  3. Choisir parmi 3 personnages sur l'écran d'accueil. Voir essai 6-3
  4. Ajouter un ennemi.
    • Texte lors de la collision. Voir essai 6-4
    • Rond dégradé quand on apuie sur la touche A lors de la collision. Voir essai 6-5
  5. Permettre de rejouer en cliquant sur les PNJs sur l'écran de fin. Voir essai 6-6

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.