Scratch : création d'un mini-jeu

Image non disponible

Le but du jeu sera simple : « Un héros doit protéger un gentil d'un méchant qui veut l'attaquer ».

Nous allons apprendre à déplacer notre personnage le « Héros », et faire se déplacer plus ou moins intelligemment les personnages non joueurs (PNJ) de notre jeu vidéo.

Vous pouvez commenter l'article en suivant le lien suivant : 1 commentaire Donner une note à l'article (5), alors après votre lecture, n'hésitez pas.

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Scratch : c'est quoi ? Un langage visuel et coloré en français pour apprendre les bases de la programmation.

Apprendre à programmer, c'est aussi apprendre à se poser des questions et être créatif.

C'est pour cela qu'à chaque étape de ce tutoriel, vous retrouvez les questions du QQCOQP : Qui, Quoi, Comment, etc. parce qu'apprendre à programmer, c'est aussi apprendre à se poser des questions !

Pour savoir quoi faire avant de savoir comment faire, je vous invite à ouvrir ce PDF, il contient tous les éléments pour la création de votre jeu.

Le rôle de notre mini-jeu va se baser sur le principe de trois personnages, et d'une histoire bien connue ; celle du « méchant » qui veut attaquer le « gentil », mais il y a un « héros » pour le défendre.

II. Création du héros

Qui : nous le nommerons « Le Héros » pour ce tutoriel, « nous allons faire simple ».

Quoi : à quoi cela va-t-il ressembler ?

Nous allons commencer en créant un nouvel objet ou lutin :

Version 1.4
Image non disponible

Version 2
Image non disponible

Cela nous ouvre l'éditeur graphique :

Version 1.4
Image non disponible

Version 2
Image non disponible

Dessinons notre personnage comme celui montré ci-dessus ou créez le vôtre.

Comment va-t-il agir (personnage) ou fonctionner (objet) ? Il va se déplacer avec les curseurs (flèches du clavier) :

Version 1.4
Image non disponible

Version 2
Image non disponible

Nous devons aller chercher le mouvement qui se trouve dans « Evènements » qui nous permet de définir une action, ensuite il faut associer à ce mouvement l'orientation et le déplacement.

Voici la liste complète des mouvements avec les paramètres à mettre :

Version 1.4
Image non disponible

Version 2
Image non disponible

Nous devons rajouter les quatre mouvements possibles, en répétant l'opération précédente.

va-t-il intervenir dans le jeu ?

Version 1.4
Image non disponible

Version 2
Image non disponible

Une fois que nous allons lancer le programme, celui-ci va apparaître à une position sur l'écran. Nous avons choisi de le positionner dans la partie basse de la gauche.

Quand va-t-il intervenir dans le jeu ?

Version 1.4
Image non disponible

Version 2
Image non disponible

Pourquoi : à quoi cela va-t-il servir dans l'histoire ? C'est celui qui va attaquer le « méchant » et sauver le « gentil ».

III. Création du Gentil

Qui : nous le nommerons « Le gentil ». C'est un personnage non joueur (PNJ).

Quoi : à quoi cela va-t-il ressembler ?

Créons un nouvel objet :

Version 1.4
Image non disponible

Version 2
Image non disponible

Cela nous ouvre l'éditeur graphique :

Version 1.4
Image non disponible

Version 2
Image non disponible

Dessinons notre personnage comme celui montré ci-dessus ou créez le vôtre.

Comment va-t-il agir (personnage) ou fonctionner (objet) ? Il va se déplacer aléatoirement en évitant le « héros ». Et une autre indication, c'est qu'il va se déplacer tant que ses points de vie sont supérieurs à 0.

Version 1.4
Image non disponible

Version 2
Image non disponible

Nous allons devoir créer une variable pour que le personnage puisse avoir un état de vie.

Version 1.4
Image non disponible

Version 2
Image non disponible

Maintenant, rajoutons cette notion de vie dans le personnage, nous initialisons la variable avec une valeur ici 10. Mettons en place une boucle pour que le test se réalise sur son état de vie. Dans la boucle nous allons rajouter un déplacement aléatoire, il faudra donc créer une autre variable « direction_gentil » qui permettra au « gentil » de s'orienter, et ensuite nous le faisons avancer.
Nous avons dans l'encadré les différents éléments de la boucle. Mais vous pouvez l'adapter à votre cas, en modifiant les données ou en ajoutant.

Où et Quand va-t-il intervenir dans le jeu ?

Version 1.4
Image non disponible

Version 2
Image non disponible

Une fois que nous allons lancer le programme, celui-ci va apparaître à une position sur l'écran. Nous avons choisi de le positionner dans la partie basse de la droite, mais il n'apparaîtra qu'une seconde après le lancement du programme.

Pourquoi : à quoi cela va-t-il servir dans l'histoire ? Il doit être protégé du « méchant ».

IV. Création du méchant

Qui : nous le nommerons « Le méchant », c'est un personnage non joueur (PNJ).

Quoi : à quoi cela va-t-il ressembler ?

Créons un nouvel objet :

Version 1.4
Image non disponible

Version 2
Image non disponible

Cela nous ouvre l'éditeur graphique :

Version 1.4
Image non disponible

Version 2
Image non disponible

Dessinons notre personnage comme celui montré ci-dessus ou créez le vôtre.
Nous créons un contour noir, il nous servira tout à l'heure pour détecter les collisions entre les différents personnages.

Comment va-t-il agir (personnage) ou fonctionner (objet) ? Il va se diriger vers le « héros » ou le « gentil » pour l'attaquer. La ligne noire va nous servir de détecteur de collisions avec les autres objets. Et une autre indication, c'est qu'il va se déplacer tant que ses points de vie sont supérieurs à 0.

V. Création des variables

En informatique, une variable permet d'associer un nom et une valeur. Cette valeur peut être alphanumérique, numérique, etc. Dans la plupart des cas, les variables sont numériques, elles servent ainsi de valeur à atteindre ou à évoluer dans le temps.

Pour notre cas, voici les variables dont nous aurons besoin :

Version 1.4
Image non disponible

Version 2
Image non disponible

  • PV_mechant pour stocker les points de vie du méchant ;
  • Choix_attaque : variable aléatoire pour décider si le méchant attaque le gentil ou le héros ;
  • Direction_mechant : variable aléatoire pour parasiter le trajet du méchant :

Version 1.4
Image non disponible

Version 2
Image non disponible

Où et quand va-t-il intervenir dans le jeu ?

Version 1.4
Image non disponible

Version 2
Image non disponible

Une fois que nous allons lancer le programme, celui-ci va apparaître à une position sur l'écran. Nous avons choisi de le positionner au centre, mais il n'apparaîtra que trois secondes après le lancement du programme.

Pourquoi : à quoi cela va-t-il servir dans l'histoire ?

Rappel du principe du jeu : le rôle du « méchant » est d'attaquer le « héros » ou le « gentil » et de lui faire perdre des points de vie. Son action a un impact sur les autres « lutins », c'est-à-dire leur faire perdre des points. Nous allons donc modifier le script du « gentil » lutin :

Version 1.4
Image non disponible

Version 2
Image non disponible

Rajoutons maintenant une boucle qui permet de mettre à jour l'état de vie du « Gentil ».
Si le gentil lutin touche le noir du méchant, il dit « Ouille ! » et perd un point de vie.
Lorsque les points de vie du gentil lutin arrivent à zéro : il meurt et disparaît avec « cacher ».

VI. Amélioration du jeu

Revenons au « Héros » :

Image non disponible

Pour l'instant il ne fait que se déplacer. Il n'y a aucune interaction avec les autres personnages.

Rappel du Pourquoi : à quoi cela va-t-il servir dans l'histoire ? C'est celui qui va attaquer le « méchant » et sauver le « gentil ».

Attaquer le méchant = lui faire perdre des points de vie (PV).

Comment : avec une arme qui apparaît avec la barre d'espace. On lui dessine une arme, nous prendrons alors une auréole rouge qui va servir de détecteur de collision :

Version 1.4
Image non disponible

Version 2
Image non disponible

Rajoutons un nouveau costume au « Héros » qui nous servira d'arme, dans notre cas une ellipse rouge. Vous pouvez lui rajouter une épée, il vous faudra alors adapter le programme à la nouvelle arme, elle devra avoir une couleur distincte.

Nous allons aussi le rajouter dans un script :

Version 1.4
Image non disponible

Version 2
Image non disponible

Rajoutons maintenant le fait que si l'arme du « Héros » entre en contact avec l'ellipse noire du « Méchant », et décrémentons la variable « PV_mechant ».

Cela a un impact sur le méchant : il perd des PV et meurt (s'il atteint la valeur 0), ce qui implique la fin du jeu :

Version 1.4
Image non disponible

Version 2
Image non disponible

Rajoutons maintenant cette nouvelle contrainte dans le programme ainsi qu'un petit message qui indique que le jeu est fini.

Nous avons changé la boucle Image non disponible par Image non disponible. À la fin, nous envoyons à tous le message « Fin_du_jeu » pour indiquer que le jeu est terminé.

VII. Remerciements

Nous remercions Christophe THOMAS d'avoir autorisé Developpez.com à gabariser son tutoriel, et aussi zoom61 pour avoir remis à jour le tutoriel.

Ainsi que LittleWhite pour ses remarques, milkoseck et ClaudeLeLoup pour la relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
Le contenu de cet article est rédigé par Christophe THOMAS et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.