Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
exemples:tutoriel [2019/03/13 20:37] admin [11) Les déplacements du personnage] |
exemples:tutoriel [2020/01/21 14:07] (Version actuelle) remi |
||
|---|---|---|---|
| Ligne 9: | Ligne 9: | ||
| * **[[:importer_des_fichiers|Importer des fichiers dans la médiathèque]]** | * **[[:importer_des_fichiers|Importer des fichiers dans la médiathèque]]** | ||
| - | On va tout d'abord créer un nouveau projet, puis on crée un programme intitulé **niv1**. | + | 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 **{{ :assets_wiki_tuto.zip |cet archive d'assets}}** dans la médiathèque (à extraire au préalable avant d'importer). | + | Après avoir créé le projet, on importe les fichiers de **{{ :exemples:images_tuto_plateforme_a_decompresser_.zip |cet archive d'images}}** dans la médiathèque (à extraire au préalable avant d'importer). |
| - | <WRAP center round download 100%>**{{ :assets_wiki_tuto.zip }}**</WRAP> | + | <WRAP center round download 100%>**{{ :exemples:images_tuto_plateforme_a_decompresser_.zip }}**</WRAP> |
| + | {{ :exemples:explorer_jhgezeyuux.png?nolink |}} | ||
| - | {{ :explorer_30zcadfppj.png?nolink |}} | + | Avant toute chose, on va taper les lignes de code ci-dessous : |
| + | |||
| + | <code declick> | ||
| + | programme_actuel = 'niv1' | ||
| + | programme_suivant = 'niv1' | ||
| + | </code> | ||
| + | |||
| + | Elle nous permettent de définir quel niveau (re)jouer si l'on perd, et quel niveau atteindre si on gagne | ||
| - | <WRAP center round info 100%> | ||
| - | Dans ce tutoriel, on utilisera des apostrophes **'** au lieu de guillemets **"**, qui ont tous les deux le même usage (ce dernier étant particulier, permettant de contenir d'autres informations que l'on verra par la suite). | ||
| - | </WRAP> | ||
| ===== 1) Intégration du décor ===== | ===== 1) Intégration du décor ===== | ||
| Le décor est l'image qui est intégrée en arrière-plan de ton jeu. | Le décor est l'image qui est intégrée en arrière-plan de ton jeu. | ||
| <code declick> | <code declick> | ||
| - | décor = new Décor() // Intégration du décor | + | ville = new Décor() // Intégration du décor |
| </code> | </code> | ||
| - | La commande **définirImageFond()** permet d’insérer l'image de fond qui se trouve dans la médiathèque. | + | La commande ''%%définirImageFond()%%'' permet d’insérer l'image de fond qui se trouve dans la médiathèque. |
| <code declick> | <code declick> | ||
| - | décor.définirImageFond('image_de_fond.png') | + | ville.définirImageFond("imageVille.png") |
| </code> | </code> | ||
| Ligne 35: | Ligne 40: | ||
| ===== 2) Intégration de la plateforme ===== | ===== 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 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**. | + | La plateforme s'appelle ''%%plateformeNiv1 %%''. |
| <code declick> | <code declick> | ||
| - | plateforme_niv1 = new Plateforme() // Création de la plateforme | + | plateformeNiv1 = new Plateforme() // Création de la plateforme |
| </code> | </code> | ||
| - | La commande **construire()** permet de lancer la construction de la plateforme. | + | La commande ''%%construire()%%'' permet de lancer la construction de la plateforme. |
| <code declick> | <code declick> | ||
| - | plateforme_niv1.construire() // Construction de la plateforme | + | plateformeNiv1.construire() // Construction de la plateforme |
| </code> | </code> | ||
| - | La commande **ajouterLigne()** ressemble à la commande **poserLigne()** comme dans le parcours de Bob et Max : | + | La commande ''%%ajouterLigne()%%'' ressemble à la commande ''%%poserLigne()%%'' comme dans le parcours de Bob et Max : |
| <code declick> | <code declick> | ||
| // Création des blocs de la plateforme, 1 pour un bloc mur et 0 pour le vide | // 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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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) | + | plateformeNiv1.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> | </code> | ||
| Ligne 69: | Ligne 74: | ||
| ===== 3) Intégrer des éléments dans la plateforme ===== | ===== 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()**. | + | 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 …). | + | Grâce à cette commande tu pourras intégrer dans ton jeu l'objet désiré (épée, pièce, potion, bonbons …). |
| Nous allons intégrer une porte de sortie | Nous allons intégrer une porte de sortie | ||
| <code declick> | <code declick> | ||
| - | porte_sortie_niv1 = new Item('image_porte_sortie_niv1.png') // Intégration de la porte de sortie | + | porteSortieNiv1 = new Item("imagePorteSortie.png") // Intégration de la porte de sortie |
| </code> | </code> | ||
| - | Pour donner une position à la porte de sortie, nous utilisons la commande **définirPosition()**. | + | Pour donner une position à la porte de sortie, nous utilisons la commande ''%%définirPosition()%%''. |
| <code declick> | <code declick> | ||
| - | porte_sortie_niv1.définirPosition(950,400) // Positionnement de la porte de sortie | + | porteSortieNiv1.définirPosition(950,400) // Positionnement de la porte de sortie |
| </code> | </code> | ||
| Ligne 87: | Ligne 92: | ||
| <code declick> | <code declick> | ||
| - | pièce = new Item('image_pièce.png') // Intégration d'une pièce de monnaie | + | pièce = new Item("imagePièce.png") // Intégration d'une pièce de monnaie |
| pièce.définirPosition(315,80) // Positionnement de la pièce de monnaie | pièce.définirPosition(315,80) // Positionnement de la pièce de monnaie | ||
| </code> | </code> | ||
| Ligne 95: | Ligne 100: | ||
| <code declick> | <code declick> | ||
| // Intégration des potions rouge et verte | // Intégration des potions rouge et verte | ||
| - | potion_verte = new Item('image_potion_verte.png') // Intégration de la potion verte (potion de vie) | + | potionVerte = new Item("imagePotionVerte.png") // Intégration de la potion verte (potion de vie) |
| - | potion_verte.définirPosition(290,400) // Positionnement de la potion rouge | + | potionVerte.définirPosition(290,400) // Positionnement de la potion rouge |
| - | potion_rouge = new Item('image_potion_rouge.png') // Intégration de la potion rouge (potion de poison) | + | potionRouge = new Item("imagePotionRouge.png") // Intégration de la potion rouge (potion de poison) |
| - | potion_rouge.définirPosition(615,400) // Positionnement de la potion rouge | + | potionRouge.définirPosition(615,400) // Positionnement de la potion rouge |
| </code> | </code> | ||
| ===== 4) Intégration de l'ennemi ===== | ===== 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()**. | + | Pour intégrer l'ennemi qui s'appelle ogre dans la plateforme, nous allons utiliser la commande ''%%new Animation()%%''. |
| <code declick> | <code declick> | ||
| - | ogre = new Animation('image_ogre.png') // Intégration de l"ennemi | + | ogre = new Animation("imageOgre.png") // Intégration de l"ennemi |
| </code> | </code> | ||
| - | Une fois l'ennemi intégré, nous allons lui donner une position dans la plateforme avec la commande **définirPosition()**. | + | Une fois l'ennemi intégré, nous allons lui donner une position dans la plateforme avec la commande ''%%définirPosition()%%''. |
| <code declick> | <code declick> | ||
| Ligne 123: | Ligne 128: | ||
| <code declick> | <code declick> | ||
| // Création du mouvement de l'ennemi | // Création du mouvement de l'ennemi | ||
| - | déplacer_ogre = new Séquence() | + | déplacementOgre = new Séquence() |
| - | déplacer_ogre.ajouterCommande('ogre.définirAngle(0)') | + | déplacementOgre.ajouterCommande("ogre.définirAngle(0)") |
| - | déplacer_ogre.ajouterCommande('ogre.avancer(75)') | + | déplacementOgre.ajouterCommande("ogre.avancer(75)") |
| - | déplacer_ogre.ajouterDélai(3000) | + | déplacementOgre.ajouterDélai(3000) |
| - | déplacer_ogre.ajouterCommande('ogre.reculer(75)') | + | déplacementOgre.ajouterCommande("ogre.reculer(75)") |
| - | déplacer_ogre.ajouterDélai(3000) | + | déplacementOgre.ajouterDélai(3000) |
| - | déplacer_ogre.recommencer(true) | + | déplacementOgre.recommencer(true) |
| - | déplacer_ogre.démarrer() | + | déplacementOgre.démarrer() |
| </code> | </code> | ||
| ===== 6) Intégration du Personnage ===== | ===== 6) Intégration du Personnage ===== | ||
| - | Pour intégrer notre personnage joe on utilise la commande **new Personnage()**. | + | Pour intégrer notre personnage joe on utilise la commande ''%%new Personnage()%%''. |
| <code declick> | <code declick> | ||
| joe = new Personnage() // Intégration du personnage | joe = new Personnage() // Intégration du personnage | ||
| - | joe.ajouterImage('image_joe.png') // Ajout de l'image personnalisée au personnage | + | joe.ajouterImage("imageJoe.png") // Ajout de l'image personnalisée au personnage |
| </code> | </code> | ||
| - | Pour que joe puisse interagir avec la plateforme on utilise la commande **ajouterPlateforme()**. | + | Pour que joe puisse interagir avec la plateforme on utilise la commande ''%%ajouterPlateforme()%%''. |
| <code declick> | <code declick> | ||
| - | joe.ajouterPlateforme(plateforme_niv1) // Le personnage peut se déplacer dans la plateforme | + | joe.ajouterPlateforme(plateformeNiv1) // Le personnage peut se déplacer dans la plateforme |
| </code> | </code> | ||
| Ligne 153: | Ligne 158: | ||
| </code> | </code> | ||
| - | Pour ajuster la vitesse du saut du personnage on utilise la commande **définirVitesseSaut()**. | + | Pour ajuster la vitesse du saut du personnage on utilise la commande ''%%définirVitesseSaut()%%''. |
| <code declick> | <code declick> | ||
| joe.définirVitesseSaut(125) // Décision de la vitesse de saut du personnage | joe.définirVitesseSaut(125) // Décision de la vitesse de saut du personnage | ||
| Ligne 160: | Ligne 165: | ||
| On souhaite que joe atterisse au sol au début de la partie. | On souhaite que joe atterisse au sol au début de la partie. | ||
| - | Pour se faire, il y a la commande **peutTomber()**. | + | Pour se faire, il y a la commande ''%%peutTomber()%%''. |
| <code declick> | <code declick> | ||
| - | joe.peutTomber() // joe est affecté par la gravité plateforme_niv1 | + | joe.peutTomber() // joe est affecté par la gravité plateformeNiv1 |
| </code> | </code> | ||
| ===== 7) Pour que joe attrape des objets ===== | ===== 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()**. | + | 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. | Lorsque joe touche un objet (pièce, potion rouge, potion verte) alors l'objet disparaît. | ||
| <code declick> | <code declick> | ||
| joe.peutAttraper(pièce) // joe peut attraper la pièce | joe.peutAttraper(pièce) // joe peut attraper la pièce | ||
| - | joe.peutAttraper(potion_rouge) // joe peut attraper la potion rouge | + | joe.peutAttraper(potionRouge) // joe peut attraper la potion rouge |
| - | joe.peutAttraper(potion_verte) // joe peut attraper la potion verte | + | joe.peutAttraper(potionVerte) // joe peut attraper la potion verte |
| </code> | </code> | ||
| ===== 8) Création d'un sous-programme en cas de victoire ou de défaite ===== | ===== 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**. | + | On crée tout d'abord un nouveau programme (bouton "+" en bas à gauche de l'écran) qu'on renomme niveau_suivant. |
| + | On insère le code suivant : | ||
| + | <code declick> | ||
| + | declick.effacerEcran() | ||
| + | declick.initialiser() | ||
| + | declick.chargerProgramme(programme_suivant) | ||
| + | </code> | ||
| - | 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). | + | On sauvegarde (ctrl+s). |
| - | + | ||
| - | Ce programme sera chargé dans notre programme actuel **niv1**. | + | |
| + | On crée ensuite un autre programme qu'on renomme redémarrer_partie. | ||
| + | On insère le code suivant : | ||
| <code declick> | <code declick> | ||
| - | // Cette fonction permet de relancer le programme actuel en cas de défaite | + | declick.effacerEcran() |
| - | quandPerdre = function(nom_programme_actuel) | + | declick.initialiser() |
| - | { | + | declick.chargerProgramme(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> | </code> | ||
| - | Une fois ce programme **perdre_gagner** crée et enregistré, on revient dans le programme **niv1** pour le charger. | + | On sauvegarde (ctrl+s) |
| <WRAP center round important 100%> | <WRAP center round important 100%> | ||
| - | Si ce code n'est pas intégré dans un nouveau programme, le programme **niv1** ne fonctionnera pas lorsqu'une tentative de lancement sera effectuée. | + | Ici, le niveau chargé en cas de victoire ou de défaite est le même parce que nous n'avons qu'un niveau, si un niveau "niv2" est créé, il suffira de modifier la variable "programme_suivant" dans niv1. |
| </WRAP> | </WRAP> | ||
| - | ===== 9) Charger le sous-programme perdre_gagner dans le programme niveau1 ===== | + | ===== 09) Détection des collisions ===== |
| - | + | ||
| - | Après avoir créé le programme **perdre_gagner**, on retourne dans le programme **niv1** pour définir le chargement de ce premier. | + | |
| - | + | ||
| - | Pour se faire on utilise la commande **declick.chargerProgramme()** | + | |
| - | + | ||
| - | <code declick> | + | |
| - | 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. | 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()** | + | ''%%SI%%'' joe touche ogre ou la potion rouge ''%%ALORS%%'' on lance le programme ''%%redémarrer_partie%%''. |
| <code declick> | <code declick> | ||
| - | joe.siCollisionAvec(ogre,'perdre()') // Si joe touche ogre alors on perd la partie | + | joe.siCollisionAvec(ogre,"redémarrer_partie") // 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 | + | joe.siCollisionAvec(potionRouge,"redémarrer_partie") // Si joe touche la potion rouge alors on perd la partie |
| </code> | </code> | ||
| - | **SI** joe touche la porte de sortie **ALORS** on lance la commande **gagner()** | + | ''%%SI%%'' joe touche la porte de sortie ''%%ALORS%%'' on lance la commande ''%%niveau_suivant%%''. |
| <code declick> | <code declick> | ||
| - | joe.siCollisionAvec(porte_sortie_niv1,'gagner()') // Si joe touche la porte de sortie alors on gagne la partie | + | joe.siCollisionAvec(porteSortieNiv1,"niveau_suivant") // Si joe touche la porte de sortie alors on gagne la partie |
| </code> | </code> | ||
| - | ===== 11) Les déplacements du personnage ===== | + | ===== 10) Les déplacements du personnage ===== |
| Nous avons précédemment créé notre personnage joe | 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 | + | Nous utilisons la boucle ''%%répéter()%%'' pour définir ses capacités, ici de déplacement |
| <code declick> | <code declick> | ||