Projets SCRATCH intermédiaires
Celvolution – jeu – niveau 1
Description du projet
Nous allons développer un jeu du style Agar.io. Le joueur contrôle une cellule qui évolue sur un terrain de jeu quadrillé et qui devra grossir en absorbant des cellules plus petites que lui. Le déplacement du joueur se fait grâce à la souris, la cellule qu’il contrôle va toujours se diriger vers le curseur et plus le curseur est éloigné du joueur, plus la vitesse sera rapide Des cellules apparaissent aléatoirement à l’écran ; elles sont toujours de la même taille et ne bougent pas. Le but est d’arriver à grossir le plus possible pour pouvoir absorber les autres joueurs. Quand on absorbe un adversaire, on grossit proportionnellement à sa taille. Dans notre projet, l’adversaire sera géré par l’ordinateur et nous appellerons son lutin AI (Artificial Intelligence).
Ce projet va permettre de découvrir comment programmer un scrolling à l’écran afin de donner l’impression que le joueur bouge par rapport à son environnement. Nous allons utiliser plusieurs principes de programmation que nous avons vu dans les projets précédents, comme gérer la taille des lutins, créer des clones par exemple. De plus, nous allons aborder la création de nouveaux blocs.
Partie 1 -Préparation de l’application et ajout des ressources
Supprimer le lutin par défaut.
Ajouter les lutins “lutin_joueur_celvolutionniv1.svg“, “lutin_cellule_celvolutionniv1.svg“, “lutin_AI_celvolutionniv1.svg“, “lutin_grille_celvolutionniv1.sprite2” et “lutin_fin_celvolutionniv1.png“. Le lutin texte de fin peut être créé directement dans l’éditeur de costumes, il suffit d’écrire “La partie est finie”.
Il n’y a pas d’arrière-plan. La grille qui représente le fond d’écran est géré par un lutin, comme nous allons le voir dans la suite.
Partie 2 – Programmation
Le programme devra effectuer le cheminement suivant :
Faire apparaitre une cellule toutes les 2 secondes;
Déplacer le joueur et tester si le joueur à absorbé une cellule;
Déplacer la cellule gérée par l’ordinateur et tester si elle absorbe une cellule;
Tester si le joueur touche la cellule gérée par l’ordinateur. Si la taille du joueur est plus grande, on fait disparaître l’AI et on augmente la taille du joueur. Inversement, si la taille de l’Ai est plus grande, le joueur a perdu.
Animation des lutins
Nous allons tout d’abord nous occuper du déplacement des différents lutins. Durant toute la partie, la cellule représentant le joueur reste fixe au milieu de l’écran. Pour simuler son déplacement, nous allons introduire la notion de scrolling. En effet, l’effet de mouvement est produit par le défilement de la grille derrière la cellule représentant le joueur, ce défilement est appelé scrolling.
Quand, nous déplaçons le pointeur de la souris, nous devons donner l’impression que le joueur va se déplacer vers le pointeur. Il va donc falloir faire bouger la grille pour créer cette impression de mouvement.
Etudions le cas d’un déplacement suivant l’axe horizontal.
La figure ci-dessous nous montre deux méthodes qui permette de déplacer le personnage de 5 cases vers la droite. Le cadre orange est un repère que nous considérons fixe, il représente ce que l’on voit à l’écran. La première méthode, qui est la plus classique, consiste à déplacer le lutin de 5 cases vers la droite. A la fin de son déplacement, le lutin se retrouve au-dessus du chiffre 5. Maintenant, nous allons faire glisser la grille de 5 cases vers la gauche, sans déplacer le personnage. A la fin du mouvement, le personnage se retrouve aussi au-dessus du chiffre 5. Dans les 2 cas représentés sur la figure, le personnage c’est déplacé de 5 cases.
Nous remarquons que si nous voulons continuer de faire avancer le personnage de 5 cases, dans le premier cas cela ne sera pas possible car, à la fin du déplacement, il se retrouvera hors de l’écran. Avec la méthode utilisant le scrolling, il suffit de continuer à faire glisser la grille pour que le personnage donne l’impression de continuer d’avancer.
Donc, pour simuler le déplacement du joueur vers le droite, nous devrons déplacer la grille vers la gauche.
Il en sera de même pour le déplacement vertical, pour donner l’impression que le personnage va vers le haut, nous déplacerons la grille vers le bas. Pour simuler le déplacement du joueur, il suffira donc de déplacer la grille à l’opposé du pointeur de la souris, nous aurons ainsi l’impression que le joueur se dirige vers la pointeur.
Dans ce projet, le déplacement du personnage seront gérés par le lutin grille.
Pseudo code pour le lutin grille
Lorsque nous chargeons le lutin “lutin_grille_celvolution.svg”, nous remarquons que le grille occupe tout l’écran, si nous la déplaçons sur la droite, par exemple, il n’y aura plus de case sur la gauche. Dans Scratch, il n’est pas possible de charger des arrière-plans plus grand que la taille de l’écran. Heureusement, dans les blocs de type Apparence, nous avons une instruction qui nous permet d’agrandir l’arrière plan, la commande mettre à % de la taille.
abscisse←0 ordonnée←0 Augmenter la taille de la grille Debut Boucle Infinie déplacer la grille à l'opposé du pointeur de la souris Fin Boucle Infinie
Pseudo code pour le lutin joueur
Debut Boucle Infinie taille_joueur←100 Si joueur touche cellule==vrai Alors taille_joueur←taille_joueur+3 Fin Si Si joueur touche AI==vrai Si taille_joueur>taille_AI Alors taille_joueur←taille_joueur+taille_AI Sinon Ecrire "La partie est terminée" Fin Si Fin Boucle Infinie
Le déplacement étant géré par le lutin grille, nous avons juste besoin de tester les collisions avec les cellule et l’AI.
Pseudo code pour le lutin cellule
Les cellules qui apparaissent à l’écran ne bougent pas, elles devront donc suivre les mêmes mouvement que la grille pour donner l’impression d’être immobile par rapport à elle.
abscisse←nombre aléatoire entre -230 et 230 ordonnée←nombre aléatoire entre -170 et 170 Debut Boucle Infinie Déplacer la cellule à l'opposé du pointeur de la souris Fin Boucle Infinie
Pseudo code pour le lutin AI
Le lutin AI ne sera pas immobile. Il pourra se déplacer de façon aléatoire, en suivant un parcours défini ou en fonction des mouvements et de la taille du joueur. Dans cette partie du projet, nous le ferons avancer suivant un parcours prédéfini, il décrira un cercle pendant toute la durée du jeu. Pour que ses mouvements soient bien retranscrits par rapport au lutin du joueur, il faudra, tout d’abord, le déplacer comme la grille et ensuite lui appliquer le déplacement considéré.
abscisse←230 ordonnée←-170 Debut Boucle Infinie Déplacer AI à l'opposé du pointeur de la souris Déplacer AI comme défini Fin Boucle Infinie
Programmation dans SCRATCH
Dans ce projet, nous devons définir deux variables.
taille_joueur : cette variable représente la taille du joueur.
taille_AI : cette variable représente la taille du personnage joué par l’ordinateur.
Code Scratch pour le lutin grille
La grille que nous avons importée a une taille de 480 pixels par 360 pixels, soit la taille de l’écran. Nous devons maintenant l’agrandir pour pouvoir utiliser le scrolling. Dans SCRATCH, nous ne pouvons pas agrandir les lutins au delà d’une certaine limite, or nous voulons augmenter la taille de 1600 % par rapport à la taille originale, ce qui est dessus de la limite pour un costume de 480X360. Il existe une astuce qui permet de passer outre cette limitation. Il suffit de créer un costume 1X1 ne contenant qu’un seul pixel. Pour ce costume, nous pouvons augmenter la taille de 1600 % car il est très petit à la base. Ensuite, il nous suffit de basculer sur le costume contenant la grille et l’augmentation de 1600 % reste active. Nous positionnons la grille au centre de l’écran et la déplaçons de 100 plans en arrière pour être sur que tous les autres lutins seront visibles.
Nous ajoutons une boucle infinie dans laquelle nous inséreront le code qui va gérer les déplacements.
Nous allons maintenant modifier les abscisses et ordonnées du lutin grille en fonction de la position du pointeur de la souris pour créer l’impression de mouvement. Lorsque la souris se trouve au milieu de l’écran (Xsouris=0 et Ysouris=0), la grille ne doit pas bouger. Si nous déplaçons la souris vers la droite (Xsouris=1 → 240), nous devrons déplacer la grille vers la gauche comme nous l’avons vu précédemment. Pour que le déplacement soit de plus en plus plus rapide lorsque le pointeur de la souris se trouve de plus en plus loin du centre, nous décrémenterons l’abscisse de la grille d’une valeur proportionnelle à Xsouris. Nous avons choisir de la décrémenter d’une valeur égale à Xsouris/10. Cette valeur est arbitraire et peut être modifier si vous voulez augmenter ou diminuer la vitesse. Nous faisons de même pour l’ordonnée de la grille.
Si nous laissons le code tel quel, nous allons arriver aux limites de notre grille agrandie, il faut donc arrêter le déplacement avant. Nous fixons la taille limite de la façon suivante :
Limite des déplacements :
-3600 < x < 3600
-2700 < y < 2700
Lorsque l’abscisse de la grille dépasse 3600, nous la ramenons à 3599 et si elle est inférieure à -3600, nous la ramenons à -3599. Nous agissons de la même manière pour l’ordonnée.
Code Scratch pour le lutin cellule
Quand le jeu commence, nous cachons le lutin et nous créons une boucle infinie qui va nous permettre de créer un clone du lutin toutes 2 secondes.
Lorsqu’un clone est créé, nous l’affichons, lui assignons une couleur tirée aéatoire et le positionnons au hasard sur l’écran.
Nous créons une boucle infinie. La cellule doit paraître immobile par rapport à la grille, il faut donc lui appliquer les mêmes mouvements. Ensuite, nous testons si le joueur touche la cellule. Dans ce cas, nous envoyons le message “mangé_par_joueur” et supprimons le clone. Pareillement, nous testons si le lutin AI touche la cellule et nous envoyons le message “mangé_par_AI” et supprimons le clone le cas échéant.
Code Scratch pour le lutin AI
Nous fixons la taille du lutin AI à 110 % pour que le joueur ne puisse pas l’absorber dès le début du jeu et le positionnons dans le coin inférieur droit de l’écran. Nous affectons la valeur taille à la variable taille_AI.
Nous ajoutons une boucle infinie dans laquelle nous insérerons le code qui va gérer le déplacements et les collisions.
Nous avons décidé que, pour le moment, le lutin AI aller tourner en rond pendant toute la durée du jeu. Pour que l’on puisse donner l’impression d’un mouvement circulaire apparent par rapport à la grille, nous allons commencer par déplacer le lutin comme la grille. A ce stade de la gestion du déplacement, le lutin paraît donc immobile par rapport à la grille. Ensuite, nous lui appliquons les mouvements qui font lui donner l’impression de décrire un cercle. Ce mouvement est géré par le nouveau bloc direction circulaire que nous avons créé. Nous verrons sa description dans la suite. Ensuite, nous testons si le joueur touche le lutin AI. Dans le cas où il y a collision, nous testons la taille des deux lutins pour savoir qui va manger l’autre. Si le joueur est plus gros que l’AI, on envoie le message “AI_mangé”, sinon, on envoie le message “joueur_mangé”.
Quand une cellule a été absorbé par le lutin AI, le message “mangé_par_AI” est envoyé. Nous allons donc ajouter un bloc quand je reçois mangé_par_AI auquel nous collons les instructions qui vont faire jouer le son pop et augmenter la taille du lutin de 3.
Nous avons vu que les déplacements sont gérés par un bloc spécial, direction circulaire, que nous avons créé. En effet, Scratch nous permet de créer des blocs qui vont exécuter une série d’instructions. Ceci est particulièrement utile lorsqu’un script est souvent répété. Il suffit d’ajouter un nouveau bloc qui contient la série d’instructions en question. Lorsque nous avons besoin d’exécuter cette série d’instructions, il suffit juste d’utiliser le nouveau bloc que nous avons créé et ceci autant de fois que nous le voulons. Nous n’avons donc pas besoin de récrire tout le script à chaque fois. Dans le cas de notre projet, nous avons ajouté le bloc direction circulaire alors qu’il n’est utilisé qu’une seule fois. Le fait d’ajouter un bloc va nous faciliter la tâche dans la gestion des déplacements du lutin AI. Quand nous voudrons changer son comportement, il suffira de créer un nouveau bloc et de l’insérer à la place de celui que nous avons déjà créé. De plus, si nous ajoutons d’autres lutins contrôlés par l’ordinateur, nous recopierons ces blocs pour gérer les déplacements de ces nouveaux lutins.
Comment créer le bloc personnalisé direction circulaire
Si vous souhaitez créer vous même ce bloc (il est présent par défaut dans le projet) voici la démarche à suivre. Pour créer un nouveau bloc, il suffit de sélectionner la famille Ajouter blocs sous l’onglet script et de cliquer sur le bouton Créer un bloc. Une fenêtre apparaît dans laquelle nous pouvons entrer le nom du bloc que nous voulons créer.
Lorsque nous cliquons sur OK, le nouveau bloc va se placer automatiquement dans la fenêtre de script.
Maintenant, il suffit de placer les instructions que nous voulons exécuter sous ce bloc. Nous faisons tourner le lutin de 1 degré dans le sens des aiguilles d’une montre et avancer de 10 pixels.
Code Scratch pour le lutin joueur
Les déplacements étant géré par le lutin grille, dans le script lié au lutin joueur, nous devons juste gérer la taille du lutin et la fin de la partie.
Au début de la partie, nous plaçons le joueur au centre de l’écran et fixons sa taille.
Si une cellule est absorbée par le joueur, il recevra le message “mangé_par_joueur” qui va déclencher le script permettant de jouer le son pop et d’augmenter sa taille de 3.
Si le joueur mange le lutin AI, on joute la taille du lutin AI à celle du joueur.
Si le joueur est mangé par l’ordinateur, on arrête le programme.
Code Scratch pour le lutin “fin“
Nous avons créé un lutin pour afficher le message “La partie est finie !” en gros au milieu de l’écran lorsque le joueur se fait manger. Ce lutin est caché en début de partie. Lorsque le message “joueur_mangé” est reçu, nous l’affichons au centre de l’écran.
.
.