Guyana Dream

Le but du jeu

Le tutoriel

Le jeu Guyana-Dream est destiné à illustrer un futur tutoriel déjà rédigé en partie par Jamjam68140 mais qui doit être revu et complété.

Sur Openclasssroom, il y a un tutoriel nommé Créer un mini-rpg en javascript avec canvas par sebcap26. 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. Son code est un peu différent de celui de sebcap26 et peut-être plus simple. Mais la difficulté consiste à trouver le temps et les personnes pour travailler sur ce tutoriel.

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 - Première partie

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

Présentation de l’architecture d’un RPG

  1. Les éléments basiques d’un RPG
  2. Que devra-t-on savoir programmer pour réaliser un RPG basique ?

Afficher des images sur le canvas

  1. Mise en place du code HTML minimal
  2. Remplir le canvas de couleur
  3. Afficher une image entière sur le canvas
  4. Afficher une petite image au coin du canvas
  5. Afficher une petite image sur le canvas à un endroit précis
  6. Afficher un bout d'image sur le canvas
  7. Afficher un bout d'image sur le canvas à un endroit précis

Créer une carte de jeu

  1. Présentation des tilesets
  2. Notion de tuile
  3. Numéroter les tuiles du tileset
  4. Récupérer une tuile en fonction de son numéro et l'afficher au coin du canvas
  5. Récupérer une tuile en fonction de son numéro et l'afficher sur le canvas à un endroit précis
  6. Afficher la première ligne de la carte
  7. Dessiner toutes les lignes de la carte

Créer un personnage

  1. Déplacer un objet
  2. Présentation des sprites et de la spritesheet
  3. Afficher chacune des poses du personnage de la première ligne de la spritesheet à intervalles réguliers
  4. Animation d'un personnage dans un sens (première ligne de la spritesheet)
  5. Animation d'un personnage dans tous les sens (en passant aux autres lignes de la spritesheet)

Déplacer un personnage en fonction des touches du clavier

  1. Code des touches du clavier
  2. Vérifier si une touche est pressée
  3. Afficher un objet si une touche est pressée
  4. Déplacer un objet dans une direction si une touche est pressée
  5. Déplacer un objet dans les 4 directions selon la touche pressée
  6. Animer le personnage selon le sens de la touche

Collision

  1. Le principe des calques
  2. Trouver les coordonnées de l'élément à éviter
  3. Comparer les coordonnées de l'élément à éviter à celles du personnage
  4. Arrêt du personnage en cas de collision avec un élement du décor à éviter

Attraper des objets

  1. Supression d'un objet à attraper en cas de passage du personnage sur sa tuile
  2. Placement de cet objet dans un inventaire
  3. Comptabilisation du nombre d'objets attrapés et affichage du nombre

Choisir un personnage

  1. Proposer deux personnages, au choix
  2. Afficher le personnage choisi sur la carte
  3. Changer la vitesse de déplacement d'un personnage
  4. changer la vitesse de déplacement d'un seul des 2 personnages en fonction de son espèce

Changer de carte

  1. Choisir l'emplacement (ex: bord du canvas, tuile...) où se situera le changement de carte
  2. Changer la carte lorsque le personnage passe à cet endroit
  3. Prévoir un système de gestion des différentes cartes

Créer les autres personnages non joueurs (PNJ)

  1. Dessiner un PNJ à un emplacement précis
  2. Animer un PNJ qui reste sur place
  3. Ne pas marcher sur les PNJ
  4. Changer le comportement du personnage en cas de rencontre avec le PNJ
  5. Changer le comportement du PNJ en cas de rencontre avec le personnage
  6. Déplacer automatiquement le PNJ

Créer une fonction affichant du texte

  1. Afficher du texte
  2. Styliser le texte affiché
  3. Styliser l’affichage du texte
  4. Certains décors et persos ont été modélisés avec Blender 2.74 (rendu toon via Frestyle) par Doudoulolita:

    Pour les aider à réaliser ce jeu et ce tutoriel, rendez-vous sur Openclassroom ou sur le forum Ubuntu.