Tuto n°2: le casse-brique
Première partie: les bases
Notions abordées:
- Ajouter une raquette et son script de déplacement à la souris
- Ajouter une bille et simuler sa physique
Note: ce tuto se base sur l'idée que vous avez réalisé le premier tuto disponible ici.
Également, seuls deux notions sont abordées afin de ne pas vous surcharger de nouvelles informations, la physique de la bille étant jugée suffisamment complexe pour un premier tuto dans ce nouveau jeu.
Avertissement:
Scratch 2 étant en beta ouverte, il existe différents bugs dont les deux suivants:
- Le sprite d'un lutin pourtant présent dans la galerie devient invisible
- Le sprite d'un lutin force son déplacement dans le coin supérieur gauche
Dans les deux cas de figure, pour résoudre ce problème, il faut supprimer le sprite en question puis réuploader l'image correspondante, en prenant soin de la renommer comme à l'origine.
Par ailleurs, j'ai essayé de faire au mieux en proposant un maximum de captures d'écrans pour vous faciliter la tâche. Néanmoins, certaines sont trop grandes pour être affichées de façon suffisamment lisible, en particulier au niveau des coordonnées. Dans ce cas, faites un clic droit sur l'image puis sélectionnez "Afficher l'image" pour la faire apparaître en grande taille.
------------------
Tout d'abord, démarrez Scratch. Un nouveau projet s'ouvre automatiquement. C'est celui qui va nous servir de base pour notre nouveau jeu.
Ensuite, téléchargez les éléments suivants, sans les renommer ni modifier leurs extensions:
- La raquette:
- La bille:
En premier lieu, supprimez le chat psychopathe de votre nouveau projet Scratch en faisant un clic-droit sur son lutin puis en choisissant "supprimer":
Toujours dans le menu des lutins, cliquez sur le petit dossier pour importer le sprite de la raquette:
Vous devez maintenant avoir ceci:
Maintenant, allez dans l'onglet "script" de votre raquette puis dans la section "événements" et ajoutez un bloc "quand drapeau vert pressé" comme suit:
Ensuite, dans la famille "contrôle", ajoutez un bloc "répéter indéfiniment":
A l'aide de ce bloc, nous indiquons au jeu que tout ce qui sera placé à l'intérieur de cette zone de script se répètera en continue. En l'occurrence, il s'agira des déplacements de la raquette.
Dans la section "mouvement", ajoutez un bloc "donner la valeur (...) à Y" de cette façon:
Cliquez dans le champ de valeur du dernier bloc ajouté et entrez: -145
Nous venons d'indiquer à scratch que notre raquette sera toujours située sur l'axe verticale à la valeur -145, ce quoi qu'il arrive. Elle ne pourra donc ni descendre, ni monter.
Maintenant, ajoutons le bloc "donner la valeur (...) à X":
Il va maintenant falloir donner la valeur horizontale de la raquette. ce qui est ennuyeux car ce n'est pas une valeur fixe puisque notre raquette doit pouvoir se déplacer sur l'ensemble de l'axe horizontal, de la gauche à la droite de l'écran, sans limitation de distance des bords ni de vitesse.
L'idée, toute simple, est de conférer à X la valeur du pointeur de notre souris. de cette façon, la raquette sera toujours à l'endroit exact voulu et nous pourrons par la suite jouer avec beaucoup de fluidité, bien plus qu'avec des flèches directionnelles, ce qui est crucial pour un casse-brique.
Pour ce faire, allez dans la section "capteurs" puis glissez-déplosez le bloc "souris X" dans le champ de valeur du bloc précédemment ajouté, pour obtenir ceci:
Et voilà, le script de la raquette est terminé! Vous pouvez démarrer votre jeu pour tester les mouvements si vous le souhaitez.
Bon, ça, c'était la partie fastoche. Maintenant, il va falloir s'occuper de la bille. Autrement dit simuler une physique qui lui permette à la fois de rebondir en haut et sur les côtés de l'écran ainsi que sur la raquette, tout en provoquant un game over si elle passe sous l'axe horizontal de la raquette. Et il faudra aussi gérer les collisions avec les briques, mais ce sera pour dimanche prochain.
En premier lieu, dans le menu des lutins, cliquez sur le petit dossier pour importer le sprite de la bille proposé en téléchargement au début de ce tuto:
Le rendu de votre menu de lutins doit être identique à ceci:
Ensuite, allez dans l'onglet script de votre bille, puis dans la section "évènements" et ajoutez un bloc "quand drapeau vert pressé":
Dans la section "mouvement", piochez un bloc "aller à X (...) Y (...)" et ajoutez-le sous le bloc du drapeau vert:
Dans les deux champs de ce bloc, ajoutez la valeur 0 à X et à Y, afin de placer la bille au centre de l'écran à chaque démarrage du jeu:
Ensuite, toujours dans la section "mouvement", ajoutez un bloc "glisser en (...) secondes à X (...) Y (...)":
Modifiez les champ de valeur de ce bloc comme indiqué dans les carrés verts:
Dans la section "capteurs", glissez-déposez le bloc "souris X" dans le champ X du bloc précédemment ajouté:
Nous venons de dire à notre jeu les choses suivantes:
- Quand je démarre le jeu,tu mets la bille au milieu de l'écran
- Toute de suite après, elle se déplace en une demi seconde jusqu'à ma raquette, peu importe où elle se situe sur son axe horizontal
Pour le moment, je vous recommande de ne pas encore démarrer le jeu car le seul résultat que vous allez obtenir est une bille qui fonce sur votre raquette. Et c'est tout.
Maintenant, dansla section "contrôles", ajoutez un bloc "répéter indéfiniment":
Toujours dans la famille "contrôles", ajoutez un bloc un bloc "si (...) alors" comme indiqué:
Puis, dans la famille des capteurs, glissez-déposez un bloc "(...) touché?" de cette façon. une fois correctement placé, cliquez sur la petite flèche noire et sélectionnez l'objet "raquette":
Dans "mouvement", ajoutez un bloc "se diriger en faisant un angle de (...)":
A l'aide de ce bloc, nous allons pouvoir indiquer l'angle dans lequel la bille va pouvoir repartir dès qu'elle aura rebondit sur la raquette, le but étant qu'elle ne parte pas non plus dans des directions improbables.
En l’occurrence, l'idée est qu'elle reparte dans une direction aléatoire comprise entre -45° et 45°, ce qui correspond aux tracés verts ci-dessous, sachant que le centre du cercle symbolise le centre de la raquette:
Pour ça, allez dans "opérateurs" puis glissez-déposez le bloc "nombre aléatoire entre (...) et (...)" de cette façon:
Dans les deux champs de ce bloc, entrez les valeurs suivantes, qui sont donc celles de l'angle de la bille lorsqu'elle rebondira sur la raquette:
Allez faire un tour dans "mouvement" puis ajouter le bloc "rebondir si le bord est atteint" comme suit:
Grâce à ce bloc, nous indiquons à la bille qu'elle rebondira automatiquement si elle touche n'importe quel bord de l'écran.
En restant dans la section "mouvement", placez un bloc "avancer de (..) pas", en laissant la valeur par défaut qui est de 10:
Allez dans la section "contrôle" et ajoutez un bloc "si (...) alors" pour créer une nouvelle condition (voir tuto du crabe pour plus d'explications):
Retournez dans la section "opérateurs" et glissez-déposez un bloc "(...) < (...)" pour le placer de cette façon:
Entrez la valeur "
-150" tel qu'indiqué ci-dessous, celle-ci correspondant à l'axe vertical situé sous la raquette (on rappellera que celle-ci est situé à -145):
Puis dans "mouvement", prenons un bloc "position Y" et plaçons-le de cette façon:
Enfin, dans la section "apparence", copiez-collez un bloc "cacher" et placez-le comme suit:
Autrement dit, nous venons d'indiquer à notre jeu que si la bille passe sous l'axe vertical -150, la bille est automatiquement cachée. Ceci correspond à une sorte de prè-game over, que nous améliorerons par la suite lors d'un prochain tuto.
Cependant, si vous démarrez votre jeu maintenant et que vous laissez la bille passer sous l'axe vertical de la raquette, vous remarquez qu'une fois le jeu redémarré, la bille n'apparaît plus. C'est normal, car sa dernière action a été de se cacher et scratch l'a gardé en mémoire. Il faut donc ajouter encore un chouia de script pour faire en sorte que la bille s'affiche correctement à chaque redémarrage d'une partie.
Pour ça, allez dans "apparence" puis ajoutez un bloc "cacher" comme indiqué ci-dessous:
Maintenant, faites un tour dans "contrôle" et glissez-déposez un bloc "attendre (...) secondes" de cette manière:
Pour finir, revenez dans "apparence" et ajoutez un bloc "montrer":
Ainsi, nous disons au jeu que lorsque nous démarrons une partie, la bille se cache automatiquement (même si elle a été cachée avant en cas de pseudo game over, qu'il faut attendre une seconde avant qu'elle n'apparaisse et qu'enfin elle se dirige vers la raquette.
Ce délai d'une seconde est le temps moyen qui permet au joueur de cliquer sur le drapeau vert pour démarrer le jeu puis de placer son curseur à l'endroit où il souhaite mettre sa raquette sur l'écran, histoire de ne pas le précipiter.
Et voilà, cette première partie de ce nouveau tuto est terminée!
Vous pouvez dès à présent tester la raquette et faire jongler la bille avec, sachant que le résultat obtenu doit être identique à ceci:
Vous aurez remarqué que la bille semble clignoter. C'est un effet d'optique normal, du à la fois aux couleurs de la bille et du fond blanc, ainsi que de sa vitesse de déplacement. Nous "corrigerons" ça dès le prochain tuto.
Dimanche prochain, nous aborderons les points suivants:
- Ajouter des blocs destructibles
- Ajouter un bonus
- Ajouter un compteur de score
- Ajouter un compte à rebourd
----------------------
Pour patienter d'ici à dimanche prochain, voici quelques exercices optionnels, toujours sous réserve que vous ayez déjà fait entièrement le tuto du crabe et donc connaissiez la procédure à suivre:
- Ajouter un décor
- Ajouter un bruitage lorsque la bille touche la raquette
- Ajouter une musique
_________________
"Il n'est pas de lutte plus violente et déterminée que celle d'un homme face à son envie d'aller aux toilettes" - Karate Boy