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.

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. La difficulté consiste à trouver le temps et les personnes pour travailler sur ce tutoriel.

La feuille de route

Révision du début du tuto

Revoir le tuto déjà écrit par Jamjam68140. Une correction orthographique a déjà été effectuée.

Doudoulolita est plus portée sur le graphisme et comme elle souhaitait apprendre le javascript, elle s'est impliquée sur ce projet. Le code qu'elle a produit en suivant le début du tutoriel de Jamjam68140 n'est peut-être pas optimal mais il a le mérite d'exister !

Certains problèmes sont visibles sur l'essai réalisé par Doudoulolita mais ils proviennent peut-être d'erreurs de sa part car elle y a apporté des petits changements (variables au lieu de valeurs fixes pour la taille des sprites et des tiles).

La feuille de route affichée ici ne reprend pas totalement le plan du tuto actuel, le changement de map et l'éditeur de maps étant prévus assez tôt dans le tuto.

1ère partie : 1 perso, 1 map

Objectif de la première partie : Afficher un personnage qui se déplace sur une map, avec gestion des collisions. Aborder la notion d'évènement.

Les lignes numérotées ont déjà été réalisées dans Guyana-Dream.
Les lignes en couleurs indiquent ce qui est déjà écrit dans le tuto

  1. Dossier a - a0.html : code HTML de base avec la balise <canvas>
  2. Dossier a - a1.html : affichage d'une image (arbre.png) sur le canvas - méthode drawImage()
  3. Dossier a - a2.html : affichage de 2 images chacune à un emplacement précis du canvas
  4. Dossier a - a3.html : affichage de 2 tuiles de tileset-petit.png chacune à un emplacement précis du canvas
  5. Dossier a - a4.html : double affichage de 4 tuiles représentant un arbre, grâce à des fonctions
  6. Dossier a - a5.html : Affichage de tuiles aux 4 coins du canvas, grâce à leur numéro
  7. Dossier b - b.html : affichage de la ligne supérieure de la carte avec une fonction
  8. Dossier c - c.html : affichage de la carte avec une fonction
  9. Dossier d - d.html : canvas et tileset plus grand
  10. Dossier e - e.html : affichage d'une image du perso sur un canvas superposé au premier
  11. Dossier e - e2.html : fonction d'affichage du perso (ou sprite), extrait de la spritesheet
  12. Dossier f - f.html : le perso se déplace (sans animation) grâce à la gestion des évènements clavier onkeydown et onkeyup
  13. Dossier f - f2.html : la direction du perso change en fonction des événements clavier
  14. Dossier g - g.html : animation du perso grâce à requestAnimationFrame
  15. Dossier h - h.html : gestion collisions. Le perso ne peut pas marcher sur les arbres
  16. Dossier i - i.html : réorganisation du code - notion d'objet
  17. Dossier j - j.html : notion d'événement. Une autre tuile s'affiche quand le perso passe à la croisée des chemins

2ème partie : Mission Bac à sable - 1 perso au choix, 1 PNJ, 2 maps, inventaire, points de vie

Un PNJ annonce la mission et un inventaire est créé.

  1. Dossier k - k.html : 2 maps (avec constructeur) provenant d'un tileset avec arbres 3D - changement de map à la croisée des chemins grâce à un événement
  2. Dossier l - l.html : Choix entre 2 personnages, grâce à l'utilisation d'onclick sur leurs images.
  3. Les dossiers suivants n'ont pas été révisés. En attendant, une préparation du jeu sous forme de classes, non encore codée, est en cours: preparation-classes-gd.pdf

  4. Dossier o - o5.html : sprites 3D - map supplémentaire pour les arbres (gestion des collisions map 2 moyenne)
  5. Dossier p - p.html : score et inventaire des fruits sur la map 1 -
  6. Dossier q - q6.html : maps dans un fichier json - résolution du blocage en haut et en bas - score et inventaire des fruits amélioré sur les 2 maps (nouvel évènement) - 3 fichiers js
  7. Dossier r - jeu.html : réorganisation des fichiers
  8. Dossier s - jeu.html : gestion tuile vide (pour mieux voir les fruits)
  9. Dossier t - jeu.html : ajout d'un pnj animé (position fixe)
  10. Dossier exercice - exercice3a.html : Exercice de création de carte de manière graphique (non terminé)
  • Gestion du temps : on doit attraper les fruits dans un délai imposé (fin du jeu)
  • Collision du joueur avec un PNJ fixe
  • Animation spéciale du PNJ en cas de collision (ex:le perroquet ouvre la bouche et bat des ailes)
  • Animation spéciale du joueur en cas de collision avec le PNJ (ex:le singe se bouche les oreilles?)
  • Interaction avec le PNJ : Monologue sous forme de bulle. Le PNJ indique la mission
  • Musique (d'aventure et mystérieuse !)
  • Dialogue audio avec le PNJ. Le PNJ indique la première mission Bac à sable : récolter le plus de fruits possible en un temps donné (ça vous rappelle quelque chose ?)

3ème partie : 1ère quête - 1 perso au choix, 1 PNJ et 1 ennemi , 4 maps, inventaire, PDV

L'objectif est de réaliser la première quête prévue dans le premier épisode du scénario pour un seul perso : trouver son nid et ne pas se faire manger par les crocodiles.

Il doit aussi récolter le maximum de fruits avant de trouver son nid. Celui-ci est caché dans une autre map et le singe doit aller voir le PNJ pour savoir où il est (l'ara se déplace et ballade le singe à différents endroits pour s'amuser).

  • Changement de map en cours de jeu (via un évènement).
  • Changement de perso au début du jeu (base de la classe).
  • Dialogue avec le PNJ : le joueur choisit une réponse parmi plusieurs possibles (en cliquant dessus). Cela influe sur la phrase suivante du PNJ.
  • Réaction (animation et déplacement) du joueur face à un ennnemi animé qui ne se déplace pas (ex: quand le crocodile ouvre la bouche, le singe se fait manger. Quand il la ferme, le singe saute par -dessus)
  • Ennemi et PNJ se déplacent (base d'une IA)
  • Collision du joueur avec l'ennnemi qui se déplace (image de choc)
  • Création d'un éditeur de carte sous forme d'exercice. Mais Doudoulolita n'a pas réussi à le finir !

4ème partie : 4 quêtes de 4 maps - 3 classes, 4 persos, 2 PNJ, 4 ennemis, 4 boss, inventaire, PDV

L'objectif est d'ajouter des personnages secondaires à protéger à partir du 2ème épisode, avec différentes quêtes, ainsi que plusieurs PNJ et ennemis, puis les boss, le rêve...

  • Un scénario exposant les épisodes est proposé dans la page Règles
  • Programmation objet
  • Modélisation des classes: Atèle (singe-araignée), capucin (actions de la spritesheet de Guyana-Dream: marcher, sauter, se baisser.), saïmiri. Prévoir des animations mais aussi des actions différentes suivant la classe.
  • Gestion de plusieurs personnages : mâle, femelle, 2 petits (soit le joueur et 3 persos à protéger). La protection de plus de persos implique une façon différente de jouer. Les comportements des petits peuvent être aléatoires.
  • Comportement des PNJ : L'ara (perroquet) indique les missions et leur réussite (ou leur échec). Déterminer le 2ème PNJ et son rôle (donner des indications mystérieuses ?). Les PNJ dialoguent avec le joueur. Le PNJ ne se comporte pas de la même manière si on le rencontre pour la 1ère fois.
  • Interaction avec différents ennemis + IA: Piranhas (fixes, visibles grâce à une fleur), crocodiles (animés), véhicules des humains (déplacement), indiens (animation + déplacement)
  • Gestion des armes des persos et de leur influence sur les ennemis : batons, pierres
  • Gestion des armes ennemies : lance-flamme pour les véhicules (gestion de gros dégats), sarbacane pour les indiens (tir à distance)
  • Combats contre des boss: milliardaire avec bulldozer (stratégie à trouver), dieu Jaguar dans le rêve (combat avec un baton pour le singe). Les 2 autres sont à déterminer

5ème partie : Toujours plus !

On pourrait voir le jeu dans 2 vues différentes : dessus et profil, selon les besoins. Tilesets et spritesheets actuels incluent déjà cette possibilité. Voir page Graphismes.

Une version multi en ligne est à prévoir, et peut-être une version en 3D.

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.