Ci-dessous, les différences entre deux révisions de la page.
|
creation_dun_jeu_de_plateforme_complet [2019/01/15 09:11] remi [8) Création d'un sous-programme en cas de victoire ou de défaite] |
creation_dun_jeu_de_plateforme_complet [2019/03/11 13:11] |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| - | ====== Création d'un jeu de plateforme complet ====== | ||
| - | ===== Pré-requis ===== | ||
| - | |||
| - | Avant de commencer ce tutoriel, il est recommandé de consulter le guide sur ce qu'est **[[creer:accueil|l'environnement de travail]]** de l'espace créatif, notamment sur la **[[creer_un_projet|création d'un projet]]**, la **[[creer:editeur:page2|création d'un programme]]**, **[[fonction_sous_programme|le chargement d'une fonction d'un sous-programme]]** ainsi que **[[importer_des_fichiers|l'importation de fichiers dans la médiathèque]]**. | ||
| - | |||
| - | |||
| - | On va tout d'abord créer un nouveau projet, puis on crée un programme intitulé **niv1**. | ||
| - | Après avoir créé le projet, on importe les fichiers de **[[https://nextcloud.colombbus.org/index.php/s/d3y6QetBc57sgtw|ce dossier]]** dans la médiathèque. | ||
| - | ===== 1) Intégration du décor ===== | ||
| - | |||
| - | Le décor est l'image qui est intégrée en arrière-plan de ton jeu (voici un exemple). | ||
| - | <code tangara> | ||
| - | décor = new Décor() // Intégration du décor | ||
| - | </code> | ||
| - | |||
| - | La commande **définirImageFond()** permet d’insérer l'image de fond qui se trouve dans la médiathèque. | ||
| - | <code tangara> | ||
| - | décor.définirImageFond('image_de_fond.png') | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ===== 2) Intégration de la plateforme ===== | ||
| - | |||
| - | La plateforme est la zone dans laquelle le personnage pourra se déplacer. Pour créer une plateforme on utilise la commande** new Plateforme()**. | ||
| - | |||
| - | La plateforme s'appelle **plateforme_Niv1**. | ||
| - | |||
| - | <code tangara> | ||
| - | plateforme_Niv1 = new Plateforme() // Création de la plateforme | ||
| - | </code> | ||
| - | |||
| - | La commande **construire()** permet de lancer la construction de la plateforme. | ||
| - | <code tangara> | ||
| - | plateforme_Niv1.construire() // Construction de la plateforme | ||
| - | </code> | ||
| - | |||
| - | La commande **ajouterLigne()** ressemble à la commande **poserLigne()** comme dans le parcours de Bob et Max : | ||
| - | |||
| - | <code tangara> | ||
| - | // Création des blocs de la plateforme, 1 pour un bloc mur et 0 pour le vide | ||
| - | plateforme_Niv1.ajouterLigne(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,3,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,0,0,0,0,0,1,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,1,1,1,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,0,1,1,1,1,1,1,1,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,1,1,0,0,0,1,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,1,1,0,0,0,1,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1) | ||
| - | plateforme_Niv1.ajouterLigne(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1) | ||
| - | </code> | ||
| - | |||
| - | Le chiffre 1 permet de poser un mur et le chiffre 0 pour le vide (pour rappel clique [[objets:macon|ici]]). | ||
| - | ===== 3) Intégrer des éléments dans la plateforme ===== | ||
| - | |||
| - | Pour intégrer n'importe quel objet sur la plateforme, on utilise la commande **new Item()**. | ||
| - | |||
| - | Grâce à cette commande tu pourras intégrer dans ton jeu l'objet qu'on désire (épée, pièce, potion, bonbons …). | ||
| - | |||
| - | Nous allons intégrer une porte de sortie | ||
| - | <code tangara> | ||
| - | porte_sortie_niv1 = new Item('image_porte_sortie_niv1.png') // Intégration de la porte de sortie | ||
| - | </code> | ||
| - | |||
| - | Pour donner une position à la porte de sortie, nous utilisons la commande **définirPosition()**. | ||
| - | |||
| - | <code tangara> | ||
| - | porte_sortie_niv1.définirPosition(950,400) // Positionnement de la porte de sortie | ||
| - | </code> | ||
| - | |||
| - | Nous allons aussi intégrer et positionner une pièce. | ||
| - | |||
| - | <code tangara> | ||
| - | pièce = new Item('image_pièce.png') // Intégration d'une pièce de monnaie | ||
| - | pièce.définirPosition(315,88) // Positionnement de la pièce de monnaie | ||
| - | </code> | ||
| - | |||
| - | Et pour finir on intègre et positionne une potion verte (potion de vie) et une potion rouge (potion de poison). | ||
| - | |||
| - | <code tangara> | ||
| - | // Intégration des potions rouge et verte | ||
| - | potion_verte = new Item('image_potion_verte.png') // Intégration de la potion verte (potion de vie) | ||
| - | potion_verte.définirPosition(290,405) // Positionnement de la potion rouge | ||
| - | | ||
| - | potion_rouge = new Item('image_potion_rouge.png') // Intégration de la potion rouge (potion de poison) | ||
| - | potion_rouge.définirPosition(615,405) // Positionnement de la potion rouge | ||
| - | </code> | ||
| - | ===== 4) Intégration de l'ennemi ===== | ||
| - | |||
| - | Pour intégrer l'ennemi qui s'appelle ogre dans la plateforme, nous allons utiliser la commande **new Animation()**. | ||
| - | |||
| - | <code tangara> | ||
| - | ogre = new Animation('image_ogre.png') // Intégration de l"ennemi | ||
| - | </code> | ||
| - | |||
| - | Une fois l'ennemi intégré, nous allons lui donner une position dans la plateforme avec la commande **définirPosition()**. | ||
| - | |||
| - | <code tangara> | ||
| - | ogre.définirPosition(685,160) // Positionnement de l'ennemi | ||
| - | </code> | ||
| - | |||
| - | ===== 5) Déplacement de l'ennemi ===== | ||
| - | |||
| - | Maintenant que l'ogre est intégré et positionné dans la plateforme, nous allons lui donner de la vie ! | ||
| - | |||
| - | Nous allons créer une séquence d'animation qui le fera se déplacer de gauche à droite et vice-versa, cette séquence définit le mouvement de l'ogre. | ||
| - | |||
| - | <code tangara> | ||
| - | // Création du mouvement de l'ennemi | ||
| - | déplacer_ogre = new Séquence() | ||
| - | déplacer_ogre.ajouterCommande('ogre.définirAngle(0)') | ||
| - | déplacer_ogre.ajouterCommande('ogre.avancer(75)') | ||
| - | déplacer_ogre.ajouterDélai(3000) | ||
| - | déplacer_ogre.ajouterCommande('ogre.reculer(75)') | ||
| - | déplacer_ogre.ajouterDélai(3000) | ||
| - | déplacer_ogre.recommencer(true) | ||
| - | déplacer_ogre.démarrer() | ||
| - | </code> | ||
| - | |||
| - | ===== 6) Intégration du Personnage ===== | ||
| - | |||
| - | Pour intégrer notre personnage joe on utilise la commande **new Personnage()**. | ||
| - | |||
| - | <code tangara> | ||
| - | joe = new Personnage() // Intégration du personnage | ||
| - | joe.ajouterImage('image_joe.png') // Ajout de l'image personnalisée au personnage | ||
| - | </code> | ||
| - | Pour que joe puisse interagir avec la plateforme on utilise la commande **ajouterPlateforme()**. | ||
| - | |||
| - | <code tangara> | ||
| - | joe.ajouterPlateforme(plateforme_Niv1) // Le personnage peut se déplacer dans la plateforme | ||
| - | </code> | ||
| - | |||
| - | Ensuite on définit la position de joe dans la plateforme. | ||
| - | |||
| - | <code tangara> | ||
| - | joe.définirPosition(80,65) // Positionnement du personnage | ||
| - | </code> | ||
| - | |||
| - | Pour ajuster la vitesse du saut du personnage on utilise la commande **définirVitesseSaut()**. | ||
| - | <code tangara> | ||
| - | joe.définirVitesseSaut(125) // Décision de la vitesse de saut du personnage | ||
| - | </code> | ||
| - | |||
| - | On souhaite que joe atterisse au sol au début de la partie. | ||
| - | |||
| - | Pour se faire, il y a la commande **peutTomber()**. | ||
| - | |||
| - | <code tangara> | ||
| - | joe.peutTomber() // joe est affecté par la gravité plateforme_Niv1 | ||
| - | </code> | ||
| - | |||
| - | ===== 7) Pour que joe attrape des objets ===== | ||
| - | |||
| - | Afin que joe puisse attraper la pièce et les potions que nous avons créé précédemment, on utilise la commande **peutAttraper()**. | ||
| - | |||
| - | Lorsque joe touche un objet (pièce, potion rouge, potion verte) alors l'objet disparaît. | ||
| - | <code tangara> | ||
| - | joe.peutAttraper(pièce) // joe peut attraper la pièce | ||
| - | joe.peutAttraper(potion_rouge) // joe peut attraper la potion rouge | ||
| - | joe.peutAttraper(potion_verte) // joe peut attraper la potion verte | ||
| - | </code> | ||
| - | |||
| - | ===== 8) Création d'un sous-programme en cas de victoire ou de défaite ===== | ||
| - | |||
| - | On crée tout d'abord un nouveau programme que l'on nomme **perdre_gagner**. | ||
| - | |||
| - | Le programme que nous allons créer va permettre d'afficher un message si le personnage perd ou gagne et de changer de niveau (revenir au début de l'actuel ou passer au niveau suivant). | ||
| - | |||
| - | Ce programme sera chargé dans notre programme actuel **niv1**. | ||
| - | |||
| - | <code tangara> | ||
| - | // Cette fonction permet de relancer le programme actuel en cas de défaite | ||
| - | quandPerdre = function(nom_programme_actuel) | ||
| - | { | ||
| - | declick.initialiser() // Effacement du message 'Tu as perdu' de l'écran | ||
| - | declick.chargerProgramme(nom_programme_actuel) // Chargement du programme actuel | ||
| - | } | ||
| - | |||
| - | // Cette fonction permet lancer le programme suivant en cas de victoire | ||
| - | quandGagner = function(nom_programme_suivant) | ||
| - | { | ||
| - | declick.initialiser() // Effacement du message 'Tu as gagné' de l'écran | ||
| - | declick.chargerProgramme(nom_programme_suivant) // Chargement du programme suivant | ||
| - | } | ||
| - | |||
| - | // Cette fonction exécute une commande après un délai ( le délai est de 3000ms donc de 3secondes) | ||
| - | delayer = function(nom_fonction_apres_delai) | ||
| - | { | ||
| - | var séquence = new Séquence() // Création d'une séquence | ||
| - | séquence.ajouterDélai(3000) // Ajout d'un délai de 3 secondes | ||
| - | séquence.ajouterCommande(nom_fonction_apres_delai) // Lancement de la commande souhaitée après 3 secondes d'attente | ||
| - | séquence.démarrer() // Démarrage de la séquence | ||
| - | } | ||
| - | |||
| - | // Cette fonction affiche un message a l'écran en cas de défaite | ||
| - | perdre = function() | ||
| - | { | ||
| - | declick.interrompre() // interruption | ||
| - | declick.initialiser() // initialisation | ||
| - | message_défaite = new Texte('Tu as perdu la partie !') // Création de texte à afficher | ||
| - | message_défaite.définirTaille(42) // Taille du texte | ||
| - | message_défaite.définirPositionCentre(650,200) // Position du texte | ||
| - | delayer('quandPerdre('niv1')') // Lancement après un certain délai de la fonction perdre() | ||
| - | } | ||
| - | |||
| - | // Cette fonction affiche un message a l'écran en cas de victoire | ||
| - | |||
| - | gagner = function() | ||
| - | { | ||
| - | declick.interrompre() // interruption | ||
| - | declick.initialiser() // initialisation | ||
| - | | ||
| - | message_victoire = new Texte('Tu as gagné la partie!') // Création de texte a afficher | ||
| - | message_victoire.définirTaille(42) // Taille du texte | ||
| - | message_victoire.définirPositionCentre(650,200) // Position du texte | ||
| - | delayer('quandGagner('niv1')') // Lancement après un certain délai de la fonction gagner() | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Une fois ce programme **perdre_gagner** crée et enregistré, on revient dans le programme **niv1** pour le charger. | ||
| - | |||
| - | ===== 9) Charger le sous-programme **perdre_gagner** dans le programme **niveau1** ===== | ||
| - | |||
| - | Actuellement nous sommes retournés dans le programme **niv1** et nous allons charger le programme **perdre_gagner** | ||
| - | |||
| - | Pour se faire on utilise la commande **declick.chargerProgramme()** | ||
| - | |||
| - | <code tangara> | ||
| - | declick.chargerProgramme('perdre_gagner'); // Chargement du sous-programme perdre_gagner | ||
| - | </code> | ||
| - | |||
| - | ===== 10) Détection des collisions ===== | ||
| - | |||
| - | La détection des collisions permet de savoir quand un personnage touche un objet ou un ennemi. | ||
| - | |||
| - | **SI** joe touche ogre ou la potion rouge **ALORS** on lance la commande **perdre()** | ||
| - | |||
| - | <code tangara> | ||
| - | joe.siCollisionAvec(ogre,'perdre()') // Si joe touche ogre alors on perd la partie | ||
| - | joe.siCollisionAvec(potion_rouge,'perdre()') // Si joe touche la potion rouge alors on perd la partie | ||
| - | </code> | ||
| - | |||
| - | **SI** joe touche la porte de sortie **ALORS** on lance la commande **gagner()** | ||
| - | |||
| - | <code tangara> | ||
| - | joe.siCollisionAvec(porte_sortie_niv1,'gagner()') // Si joe touche la porte de sortie alors on gagne la partie | ||
| - | </code> | ||
| - | |||
| - | ===== 11) Les déplacements du personnage ===== | ||
| - | |||
| - | Nous avons précédemment créé notre personnage joe | ||
| - | |||
| - | Nous utilisons la boucle **répéter()** pour définir ses capacités, ici de déplacement | ||
| - | |||
| - | <code tangara> | ||
| - | |||
| - | // La boucle suivante permet à joe de se déplacer | ||
| - | répéter() | ||
| - | { | ||
| - | | ||
| - | if(clavier.gauche) // Si le joueur appuie sur la flèche gauche du clavier | ||
| - | { | ||
| - | joe.reculer(25) // Alors joe recule | ||
| - | } | ||
| - | if(clavier.droite) // Si le joueur appuie sur la flèche droite du clavier | ||
| - | { | ||
| - | joe.avancer(25) // Alors le personnage avance | ||
| - | } | ||
| - | if(clavier.haut) // Si le joueur appuie sur la flèche en haut du clavier | ||
| - | { | ||
| - | joe.sauter() // Alors joe saute | ||
| - | } | ||
| - | } | ||
| - | </code> | ||