Outils pour utilisateurs

Outils du site


creation_dun_jeu_de_plateforme_complet

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 l'environnement de travail de l'espace créatif, notamment sur la création d'un projet, la création d'un programme, le chargement d'une fonction d'un sous-programme ainsi que 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 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).

    décor = new Décor()  // Intégration du décor

La commande définirImageFond() permet d’insérer l'image de fond qui se trouve dans la médiathèque.

    décor.définirImageFond('image_de_fond.png')

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.

    plateforme_Niv1 = new Plateforme() // Création de la plateforme

La commande construire() permet de lancer la construction de la plateforme.

    plateforme_Niv1.construire() // Construction de la plateforme

La commande ajouterLigne() ressemble à la commande poserLigne() comme dans le parcours de Bob et Max :

    // 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)

Le chiffre 1 permet de poser un mur et le chiffre 0 pour le vide (pour rappel clique 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

    porte_sortie_niv1 = new Item('image_porte_sortie_niv1.png') // Intégration de la porte de sortie

Pour donner une position à la porte de sortie, nous utilisons la commande définirPosition().

    porte_sortie_niv1.définirPosition(950,400) // Positionnement de la porte de sortie

Nous allons aussi intégrer et positionner une pièce.

    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

Et pour finir on intègre et positionne une potion verte (potion de vie) et une potion rouge (potion de poison).

    // 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

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().

    ogre = new Animation('image_ogre.png') // Intégration de l"ennemi

Une fois l'ennemi intégré, nous allons lui donner une position dans la plateforme avec la commande définirPosition().

   ogre.définirPosition(685,160) // Positionnement de l'ennemi

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.

    // 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() 

6) Intégration du Personnage

Pour intégrer notre personnage joe on utilise la commande new Personnage().

    joe = new Personnage() // Intégration du personnage
    joe.ajouterImage('image_joe.png') // Ajout de l'image personnalisée au personnage

Pour que joe puisse interagir avec la plateforme on utilise la commande ajouterPlateforme().

    joe.ajouterPlateforme(plateforme_Niv1) // Le personnage peut se déplacer dans la plateforme

Ensuite on définit la position de joe dans la plateforme.

    joe.définirPosition(80,65) // Positionnement du personnage

Pour ajuster la vitesse du saut du personnage on utilise la commande définirVitesseSaut().

    joe.définirVitesseSaut(125)  // Décision de la vitesse de saut du personnage

On souhaite que joe atterisse au sol au début de la partie.

Pour se faire, il y a la commande peutTomber().

    joe.peutTomber()  // joe est affecté par la gravité plateforme_Niv1

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.

    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

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.

 // 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()
 }

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()

    declick.chargerProgramme('perdre_gagner'); // Chargement du sous-programme perdre_gagner

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()

    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

SI joe touche la porte de sortie ALORS on lance la commande gagner()

    joe.siCollisionAvec(porte_sortie_niv1,'gagner()') // Si joe touche la porte de sortie alors on gagne la partie

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

// 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
    	}
    }