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 :
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 cet archive d'images dans la médiathèque (à extraire au préalable avant d'importer).
Avant toute chose, on va taper les lignes de code ci-dessous :
programme_actuel = 'niv1'
programme_suivant = 'niv1'
Elle nous permettent de définir quel niveau (re)jouer si l'on perd, et quel niveau atteindre si on gagne
1) Intégration du décor
Le décor est l'image qui est intégrée en arrière-plan de ton jeu.
ville = 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.
ville.définirImageFond("imageVille.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 plateformeNiv1 .
plateformeNiv1 = new Plateforme() // Création de la plateforme
La commande construire() permet de lancer la construction de la plateforme.
plateformeNiv1.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
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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 désiré (épée, pièce, potion, bonbons …).
Nous allons intégrer une porte de sortie
porteSortieNiv1 = new Item("imagePorteSortie.png") // Intégration de la porte de sortie
Pour donner une position à la porte de sortie, nous utilisons la commande définirPosition().
porteSortieNiv1.définirPosition(950,400) // Positionnement de la porte de sortie
Nous allons aussi intégrer et positionner une pièce.
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
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
potionVerte = new Item("imagePotionVerte.png") // Intégration de la potion verte (potion de vie)
potionVerte.définirPosition(290,400) // Positionnement de la potion rouge
potionRouge = new Item("imagePotionRouge.png") // Intégration de la potion rouge (potion de poison)
potionRouge.définirPosition(615,400) // 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("imageOgre.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éplacementOgre = new Séquence()
déplacementOgre.ajouterCommande("ogre.définirAngle(0)")
déplacementOgre.ajouterCommande("ogre.avancer(75)")
déplacementOgre.ajouterDélai(3000)
déplacementOgre.ajouterCommande("ogre.reculer(75)")
déplacementOgre.ajouterDélai(3000)
déplacementOgre.recommencer(true)
déplacementOgre.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("imageJoe.png") // Ajout de l'image personnalisée au personnage
Pour que joe puisse interagir avec la plateforme on utilise la commande ajouterPlateforme().
joe.ajouterPlateforme(plateformeNiv1) // 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é plateformeNiv1
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(potionRouge) // joe peut attraper la potion rouge
joe.peutAttraper(potionVerte) // 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 (bouton “+” en bas à gauche de l'écran) qu'on renomme niveau_suivant. On insère le code suivant :
declick.effacerEcran()
declick.initialiser()
declick.chargerProgramme(programme_suivant)
On sauvegarde (ctrl+s).
On crée ensuite un autre programme qu'on renomme redémarrer_partie. On insère le code suivant :
declick.effacerEcran()
declick.initialiser()
declick.chargerProgramme(programme_actuel)
On sauvegarde (ctrl+s)
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.
09) 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 le programme redémarrer_partie.
joe.siCollisionAvec(ogre,"redémarrer_partie") // Si joe touche ogre alors on perd la partie
joe.siCollisionAvec(potionRouge,"redémarrer_partie") // Si joe touche la potion rouge alors on perd la partie
SI joe touche la porte de sortie ALORS on lance la commande niveau_suivant.
joe.siCollisionAvec(porteSortieNiv1,"niveau_suivant") // Si joe touche la porte de sortie alors on gagne la partie
10) 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
}
}
Sources
Assets de base créés par Joël Nguyen Image de fond créé par u/r977