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.

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 :
    1-3 - Mise en place du code HTML minimal
  4. Combiner HTML et Javascript :
    1-4 - Remplir le canvas de couleur

Partie 2 - Créer une carte du jeu

  1. Afficher des images sur le canvas :
    • Afficher une image entière sur le canvas
    • Afficher une petite image au coin du canvas
    • Afficher une petite image sur le canvas à un endroit précis - voir essai 2-1
    • Afficher un bout d'image sur le canvas
    • Afficher un bout d'image sur le canvas à un endroit précis
  2. Ajouter du texte
    • Afficher du texte
    • Styliser le texte affiché
    • Styliser l’affichage du texte - voir essai 2-2
  3. Présentation des tilesets
    • Notion de tuile - voir essai 2-3
    • Numéroter les tuiles du tileset
  4. Afficher la carte sur le canvas
    • Récupérer une tuile en fonction de son numéro et l'afficher au coin du canvas
    • Récupérer une tuile en fonction de son numéro et l'afficher sur le canvas à un endroit précis
    • Afficher la première ligne de la carte. .
    • Dessiner toutes les lignes de la carte avec un tileset d'une seule ligne. Voir essai 2-4a
    • Dessiner toutes les lignes de la carte avec un tileset à 2 lignes - Voir essai 2-4b.

Partie 3 - Animer un personnage

  1. Déplacer un objet. Voir essai 3-1
  2. Déplacer l'objet avec le clavier
    • Code des touches du clavier
    • Vérifier si une touche est pressée
    • Afficher un personnage si une touche est pressée
    • Déplacer un personnage si une touche est pressée Voir essai 3-2
  3. Présentation de la spritesheet
    • Afficher chacune des poses du personnage de la première ligne de la spritesheet à intervalles réguliers
  4. Animer le sprite

Partie 4 - Gérer les Collision

  1. Ajouter un canvas
  2. Collision sur les bords. essai 4-2.
  3. Collision du sprite avec une image affichée sur le canvas. Voir essai 4-4.
  4. Collision du sprite avec une tuile du tileset affichée sur la map. Voir essai 4-5
  5. Comparer les coordonnées de l'élément à éviter à celles du personnage. Voir l'essai en cours.

Partie 5 - Donner un but au jeu

  1. 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
  2. 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
  3. Mettre des objets dans l'inventaire
    • Supression d'un objet à attraper en cas de passage du personnage sur sa tuile
    • Placement de cet objet dans un inventaire
    • Comptabilisation du nombre d'objets attrapés et affichage du nombre
    • Changer la vitesse de déplacement du personnage quand il a obtenu un certain nombre de points de nourriture (en fonction de l'inventaire)
  4. 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
  5. Chronométrer le jeu

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.