3èmeT Programmer les bases d’un

TP
RPG
a:\Noms……………………………………………………………….... c:\CLASSE\…

d:\Groupe\………………… e:\Table\………………… f:\NOTE\……………… /10

Le "Role Playing Game" (RPG) désigne un type de jeu vidéo d'aventure , ou le joueur fait
évoluer un personnage (ou plusieurs) au cours d’une quête.
Dans ce TP, nous allons vous guider pour développer les bases d’un jeu de ce type,
permettant à un personnage de se déplacer dans un décor.

1. Première connexion à Scratch

• Effectuer sa première connexion à Scratch avec le nom d’utilisateur et le mot de
passe que le professeur vous donnera.
• Choisir un nouveau mot de passe, puis saisir les informations demandées comme ci-
dessous :

-1-
2. Importation de sprites
Dans un jeu vidéo on appelle « Sprite » (ou lutin) un élément graphique qui peut se
déplacer sur l’écran.

• Créer un nouveau projet que vous appellerez RPG

• Importer les sprites que le professeur vous a donné en cliquant sur le symbole
dans la zone des sprites en bas à droite de l’écran.

Le problème est qu’on a 12 sprites sur une image au lieu d’en avoir 12 séparés. On
souhaite créer 12 sprites séparés.

• Cliquer pour cela en haut à gauche sur

• Faire un clic droit sur l’image dans la barre à gauche. Sélectionner dupliquer.
Répéter l’opération 12 fois pour avoir 12 fois l’image.

• Sur la première image on souhaite ne garder que le premier personnage en haut à

gauche. Cliquer sur  . Sélectionner des pixels à effacer puis appuyer sur la
touche supprimer. Répéter l’opération jusqu’à n’avoir que le personnage à
conserver.
• Enfin sélectionner le personnage et le déplacer au centre, indiqué par le symbole .
• Appeler le costume ainsi créé bas01, puisqu’il s’agit d’un premier costume de notre
personnage lorsqu’il va vers le bas.

Répéter l’opération afin d’avoir bas02, bas03, gauche01, gauche02, gauche03, droite01,
droite02, droite03, haut01, haut02, haut03,

-2-
3. Animation du sprite
Lors d’un mouvement, c’est en affichant en alternance les différents costumes qu’on crée
l’illusion que le sprite marche.
Créer pour cela un bloc « bouger en bas » comme ci-dessous.

Créer comme ci-dessous une boucle infinie, dans laquelle la fonction « bouger en bas » est
appelée si la touche « flèche bas » est pressée.

Compléter de la même manière le programme avec un bloc « bouger en haut », « bouger à

gauche » et « bouger à droite ».

Améliorer le programme en créant une variable qui sera initialisée au début à la

valeur voulue. On pourra ainsi modifier simplement cette valeur pour accélerer les
mouvements su sprite.
-3-
4. Déplacer un sprite sur un damier
Importer en arrière plan l’image de damier que le professeur vous fournira, en cliquant en
bas à droite comme ci-dessous :

Ajouter au début de la boucle infinie une instruction pour faire dire au sprite ses
coordonnées, de la manière suivante.

De plus, ajouter au tout début du programme, une instruction pour placer initialement le
sprite en haut à gauche du damier, c’est à dire en position x :-200, y :-160.

Cela devrait placer le sprite au milieu du premier carreau haut à gauche.

-4-
5. Se déplacer de carreau en carreau

Le damier est constitué de carreaux de 40 pixels de côté.

Modifier l’algorithme pour que le sprite ne se déplace que de carreau en carreau (c’est à
dire de 40 pixels par 40 pixels).

Aide  :
Dans un bloc « bouger » le sprite se déplace 4 fois de de 2 pixels, donc de 8 pixels au total.

Il faudra donc dans le bloc bouger répéter 5 fois ce déplacement pour atteindre 40 pixels,

Tester votre programme en déplaçant votre sprite aux 4 coins du damier.

Vous devriez observer les coordonnées suivantes :

En haut à
gauche :

En haut à droite :

En bas à gauche : En bas à droite :

-5-
6. Changement de système de coordonnées
On souhaite avoir un autre système de coordonnées (C, L), avec C qui indique le numéro
de colonne du damier (de 1 à 12) et L le numéro de ligne de (de 1 à 9).

On devrait avoir alors aux coins du damier les valeurs suivantes :

En haut à droite :
En haut à gauche :

En bas à gauche : En bas à droite :

Pour cela modifier le début du programme de la manière suivante (il ne vous reste qu’à
trouver les valeurs qui ont été cachées…).

Aide  :

On cherche une formule du type C=ax+b (avec C numéro de colonne, et x abscisse). On

cherche les valeurs a et b. Pour cela on peut poser 2 équations.
• Pour x=220 on a C=12 donc 12 = 220a +b
Pour x=-220 on a C=1 donc 1 = -220a +b

De même cherche une formule du type L=ay+b (L numéro de ligne, y oordonnée)

• Pour y=160 on a L=1 donc 1 = 160a +b
• Pour y=-160 on a L=9 donc 9 = -160a +b

-6-
7. Interdire de sortir du damier
Tester le programme. Est-ce possible de sortir du damier ? Quel problème cela pose-t-il ?

Pour régler ce problème nous allons ajouter avant chaque bloc de mouvement une
condition à remplir pour empêcher le sprite de sortir.

Par exemple, lorsqu’on appuie sur la flèche du bas, le sprite ne peut descendre que si le
numéro de la ligne est 1, 2, 3, 4, 5, 6, 7, ou 8.

Dès que le numéro de ligne atteint 9 il faut empêcher le sprite de bouger.

On peut le faire simplement en ajoutant un « SI  L<9 », comme-dessous :

Modifier de la même manière le reste du programme, en ajoutant un SI avant le bloc

« bouger en haut », « bouger à droite » et « bouger à gauche ».

-7-
8. Interdire certaines positions du damier
Remplacer l’arrière plan avec le damier ci-dessous

Si dessous la matrice correspondante avec la valeur 0 pour interdit et 1 pour autorisé,

0 0 0 0 1 1 1 0 0 0 1 1
0 1 1 1 1 1 1 1 1 0 1 0
0 1 1 0 0 0 0 1 1 0 1 1
1 1 1 1 1 1 1 1 1 1 1 1
1 1 0 1 1 1 0 1 1 1 1 1
1 1 1 1 1 1 0 1 0 0 0 0
0 1 1 1 1 1 0 1 1 1 1 1
0 1 1 0 1 0 0 0 0 0 0 1
0 1 0 0 1 1 1 1 1 1 1 1
Rentrer les valeurs de la matrice dans une variable de type liste appelée « autorisations »

Avant de bouger le programme devra tester si la case cible est autorisée. Si dessous le test à effectuer
avant de bouger vers le bas :

De la même manière, ajouter un SI avant le mouvement vers le haut, vers la gauche et vers la droite.

Enfin, changer la position de départ pour qu’elle soit sur une case autorisée.

-8-
9. Dessiner un décor avec le logiciel Tile
Aller chercher un jeu de tuiles, pour cela :

Aller sur le site https://opengameart.org/

• Chercher dans la barre de recherche LPC. LPC (Liberated Pixel Cup) est une
banque de données de ressources gratuites libres d’utilisation.
• Cliquer sur LPC Tile Atlas
• Télécharger en cliquant plus bas sur Atlas.zip
• Déplacer le dossier dans votre dossier de travail Dézipper le dossier (Clic droit →
• Extraire tout).
•
Lancer le logiciel Tile, et commencer une nouvelle carte en cliquant dans le menu en haut
à gaucher sur Fichier → Nouveau → Nouvelle Carte, Sélectionner parmi les paramètres :
• Orthogonale
• Taille des tuiles : 40px par 40px (la taille des cases sur notre damier dans scratch)
• Largeur : 12 tuiles
• Hauteur : 9 tuiles
• Enregistrer cette carte dans votre dossier de travail sous le nom « décor »:

Cliquer en bas à droite sur le bouton «  Nouveau jeu de tuiles »

• Sélectionner dans le dossier Atlas le jeu de tuiles « terrain_atlas ». Bien changer la
taille des tuiles à 40 pixels (par défaut 32 pixels)
• Enregistrer le jeu de tuile dans votre dossier de travail.

Créer un premier décor comme par exemple ci-dessous, en utilisant des tuiles de terre et
d’eau.

-9-
Dans la zone de calques en haut à droite, faire clic droit → nouveau → calque de tuiles

Le deuxième calque va permettre d’ajouter des tuiles en partie transparentes, laissant en

partie apparaître le calque du dessous. Sur ce deuxième calque, ajouter des tuiles pour
dessiner le contour de la rivière, comme par exemple ci-dessous :

Ajouter un troisième calque avec un pont, comme par exemple ci-dessous :

Compléter votre décor à votre guise, avec au moins deux autres éléments où le sprite ne
pourra pas aller.

- 10 -
10. Exporter le décor et l’importer dans Scratch
En haut à gauche : Fichier → Exporter en tant qu’image. Sauvegarder l’image dans votre
dossier de travail sous le nom decor.png

Retourner dans scratch et importer comme arrière-plan le fichier decor.png, en cliquant en

bas à droite comme ci-dessous. Votre décor va remplacer l’ancien damier.

Votre matrice d’autorisations n’est plus adaptée. Changer maintenant les 1 et 0 de votre
liste « autorisations ».

- 11 -