Author: Julien S.

Tutoriels

Apprendre à développer un jeu simple sur Scratch 2.0

Ce tutoriel a pour objectif de vous permettre de découvrir l’univers de Scratch en expliquant de façon simple le fonctionnement de chaque bloc/instruction ainsi que de pouvoir créer pas à pas votre propre jeu pour donner un côté ludique à votre apprentissage.

Apprendre les éléments importants de Scratch

Dans Scratch, les blocs sont stockés dans des Sprites ou des arrière-plans. Les blocs de Scratch 2.0 sont répartis en 9 catégories, mais nous allons parler seulement les blocs des 8 premières catégories dans ce tutoriel.

Première catégorie : Mouvement

La catégorie Mouvement contient tout les blocs nécessaires au déplacement d’un Sprite.

Ce bloc permet de déplacer un Sprite de x pas sur un axe selon l’orientation du Sprite.

Ces blocs permettent d’orienter un Sprite de x° vers la droite ou vers la gauche.

Ce bloc permet de positionner le Sprite à des coordonnées aléatoires ou aux coordonnées du pointeur/curseur de la souris.

Ce bloc permet de positionner le Sprite à des coordonnées ( x ; y ).

Ce bloc permet de déplacer le Sprite à des coordonnées aléatoires ou aux coordonnées du pointeur/curseur de la souris pendant x seconde.

Ce bloc permet de déplacer le Sprite à des coordonnées ( x ; y ) pendant x seconde.

Ce bloc permet d’orienter le Sprite à x° dans une intervalle de [-180 ; 180].

Ce bloc permet d’orienter le Sprite vers le pointeur/curseur de souris.

Ces blocs permettent de modifier la position du Sprite respectivement en modifiant l’abscisse x ou en modifiant l’ordonnée y.

Ces blocs permettent de modifier la position du Sprite respectivement en ajoutant une valeur à l’abscisse x ou en ajoutant une valeur à l’ordonnée y.

Ce bloc permet d’empêcher le Sprite de sortir du cadre en ajoutant 180° à son orientation si un bord est atteint.

Ce bloc permet de fixer un sens de rotation pour le Sprite.

Ces blocs permettent d’afficher des variables qui expriment respectivement l’abscisse, l’ordonnée et l’orientation (en °) du Sprite.

Seconde catégorie : Apparence

La catégorie Apparence contient tout les blocs nécessaires à la modification de l’apparence d’un Sprite ou d’un arrière-plan.

Ces blocs permettent d’afficher une chaîne de caractères sous forme de bulle de texte (comme dans les bandes dessinées) proche du Sprite durant un temps donné ou pour toujours.

Ces blocs permettent de changer le costume du Sprite.

Ces blocs permettent de changer d’arrière-plan.

Ce bloc permet d’ajouter une valeur en pourcent à la taille du Sprite.

Ce bloc permet de définir une taille en pourcent d’un Sprite.

Ce bloc permet de modifier le costume d’un Sprite en ajoutant une valeur aux effets disponibles.

Ce bloc permet de modifier le costume d’un Sprite en définissant une valeur aux effets disponibles.

Ce bloc permet de supprimer les effets graphiques (c’est-à-dire, remettre à 0 les valeurs associées à chaque effet).

Ce bloc permet d’e montrer d’afficher ou de cacher un Sprite.

Ce bloc permet de positionner un Sprite devant ou derrière l’arrière-plan.

Ce bloc permet de changer d’arrière-plan de façon ordonnée.

Ces blocs permettent d’afficher les variables associées respectivement à l’indice du costume du Sprite, à l’indice de l’arrière-plan et à la taille en pourcent du Sprite.

Troisième catégorie : Son

La catégorie Son contient tout les blocs nécessaires à l’ajout et à la modification des sons de votre jeu.

Le premier bloc permet de jouer un son définit, empêchant toutes autres instructions de fonctionner à la suite de ce bloc jusqu’à ce que le son finissent. Le second bloc permet de jouer le son tout en permettant les autres instructions à la suite de fonctionner.

Ce bloc permet de stopper subitement tous les sons.

Ce bloc permet de modifier le son en ajoutant une valeur aux effets disponibles.

Ce bloc permet de modifier le son en définissant une valeur aux effets disponibles.

Ce bloc permet de modifier le volume (en pourcent) d’un son.

Ce bloc permet de supprimer les effets sonores (c’est-à-dire, remettre à 0 les valeurs associées à chaque effet).

Ce bloc permet d’afficher une variable associée à la valeur du volume en pourcent.

Quatrième catégorie : Evénements

La catégorie Evénements contient tout les blocs nécessaires au démarrage d’un script.

Ces blocs permettent de démarrer un script selon certaines conditions.

Ces blocs permettent de démarrer les scripts associés au bloc « quand je reçois message1 », bloquant (bloc de droite) ou non (bloc de gauche) les instructions à la suite de ces blocs.

Cinquième catégorie : Contrôle

La catégorie Contrôle contient tout les blocs nécessaires au contrôle des scripts du programme sous certaines conditions.

Ce bloc permet d’attendre 1 seconde avant de lancer les instructions à la suite.

Ces blocs permettent de répéter x fois ou indéfiniment un script.

Ces blocs permettent d’imposer une condition pour démarrer leur script. Pour le second bloc uniquement, si la condition n’est pas rempli, un autre script est démarré.

Ce bloc permet d’attendre avant de lancer les instructions à la suite jusqu’à ce qu’une condition soit rempli.

Ce bloc permet de répéter indéfiniment un script jusqu’à ce qu’une condition soit rempli.

Ce bloc permet d’arrêter certain script ou d’arrêter le programme entier.

Le premier bloc permet de créer un clone du Sprite associé à ce bloc. Le second bloc permet le clonage d’un Sprite définit.

Ce bloc permet de débuter un script si le Sprite est un clone.

Ce bloc permet de supprimer le clone associé à ce bloc.

Sixième catégorie : Capteurs

La catégorie Capteurs contient tout les blocs nécessaires pour élaborer des conditions et créer des interactions dans un programme.

Ce bloc permet de détecter si le Sprite associé touche le pointeur/curseur de la souris, le bord, etc…

Ces blocs permettent de détecter si le Sprite associé touche une couleur ou si une couleur en touche une autre.

Ce bloc est la variable associé à la valeur de la distance entre le Sprite associé et le pointeur/curseur de la souris.

Ce bloc permet au Sprite associé de poser une question définit et permet d’attendre avant de lancer les instructions à la suite jusqu’à ce que ce qu’une réponse soit donnée.

Ces blocs permettent de détecter si une touche définit est pressée ou si la souris est pressée.

Ces blocs sont les variables associées au coordonnées ( x ; y ) du pointeur/curseur de la souris.

Ce bloc permet au Sprite associé, en mode glissade, d’être déplacé en jeu par le joueur et, en mode non glissade, de ne pas être déplacé en jeu par le joueur.

Ce bloc permet de remettre à 0 la valeur associée au chronomètre.

Ce bloc est la variable associé à la valeur du nombre de jour depuis l’an 2000.

Ces blocs permettent d’afficher les variables associées respectivement au réponse donné, au volume sonore, au chronomètre, au nom d’utilisateur et à l’année, le mois, la date, le jour de la semaine, l’heure, les minutes ou les secondes.

Septième catégorie : Opérateurs

La catégorie Opérateurs contient tout les blocs nécessaires pour effectuer des opérations mathématiques, pour générer l’aléatoire et pour analyser des chaînes de caractères.

Ces blocs permettent respectivement de faire des additions, soustractions, multiplication et division de valeurs.

Ce bloc permet de choisir une valeur aléatoire dans un intervalle de valeur définit.

Ces blocs permettent respectivement de dire qu’une valeur définit est supérieure à une autre, qu’une valeur définit est inférieure à une autre et qu’une valeur définit est égal à une autre.

Le premier bloc permet de vérifier si les 2 équations qu’il contient sont vrais. Le second permet de vérifier si 1 des 2 équations qu’il contient est vrai.

Ce bloc permet de d’inverser la valeur de vérité de ce qu’il contient (par exemple: 5-5=0 est vrai donc non(5-5=0) est faux)

Ce bloc permet de lier 2 chaînes de caractères.

Ce bloc permet de citer la lettre associée à l’indice demandé.

Ce bloc permet de dire le nombre de caractères contenu dans une chaîne de caractères définit.

Ce bloc permet de vérifier si une chaîne de caractères définit contient un caractère définit.

Ce bloc renvoie le reste de la division entière (aussi appelée division euclidienne) de la première entrée (le numérateur) divisée par la seconde entrée (le dénominateur).

Ce bloc permet d’arrondir une valeur définit.

Huitième catégorie : Variables

La catégorie Variables contient tout les blocs nécessaires à la création et la modification des variables créées.

Ce bloc permet de définir la valeur associée à « ma variable ».

Ce bloc permet d’ajouter une valeur définit à la valeur associée à « ma variable ».

Ces blocs permettent d’afficher ou de cacher la valeur associée à « ma variable ».

Ce bloc représente « ma variable ».

Créer son jeu

Maintenant, nous allons vous montrer pas à pas comment créer un petit jeu en environ 30-60 minutes.

Tout d’abord, supprimez le Sprite de base qui est présent quand vous lancez Scratch.

Ensuite, allez chercher l’arrière-plan « blue sky ».

Puis, allez chercher le Sprite « monkey ».

Maintenant, ajouter ce script au singe. Il permet de définir un emplacement et une taille pour le singe à chaque lancement du jeu.

Ajouter ce script au singe. Il permet de déplacer le singe à gauche ou à droite avec les flèches de votre clavier.

Allez chercher le Sprite « Bananas » et le Sprite « Watermelon ».

Ajouter ce script à la banane. Il permet de définir un emplacement et une taille pour la banane à chaque lancement du jeu ainsi que de permettre la chute de la banane pour que le singe puisse la collecter.

Idem pour la pastèque.

Maintenant, vous allez dans la catégorie « Variables » et vous allez créer la variable « Banane » et la variable « Vie ».

Ajouter le script de droite à la banane. Il permet d’ajouter à la variable Bananes des points à chaque fois qu’une banane est collectée.

Ajouter ce script à la pastèque. Il permet de retirer à la variable Vie des points à chaque fois qu’une pastèque est touchée.

Ajouter ce script au singe. Il permet de changer l’apparence du singe à chaque fois qu’il prend des dégâts.

Ajouter ces scripts au cœur. Le script de gauche permet de définir un emplacement et une taille pour le cœur à chaque lancement du jeu ainsi que de permettre la chute du cœur pour que le singe puisse le collecter. Le script de droite permet d’ajouter à la variable Vie des points à chaque fois qu’un cœur est collectée.

Ajouter ces scripts au singe. Ils permettent d’arrêter le jeu si le nombre de vie atteint 0.

Ajouter ce script à la banane, la pastèque et au cœur. Ils permettent d’arrêter leur programme respectif.

Voici donc ce que vous devriez avoir au final.

Script final du singe:

Script final de la banane:

Script final de la pastèque:

Script final du cœur:

Félicitations, vous avez atteint la fin de ce tutoriel, j’espère qu’il vous aura était utile. Sinon, il existe un autre tutoriel sur Scratch 2.0 disponible sur le site nsi.xyz, dans l’onglet tutoriels où vous vous trouvez actuellement, que je vous conseille fortement de regarder pour pouvoir créer un jeu plus complexe sur Scratch 2.0. Merci d’avoir lu cette article.

Projets

Avions de l’armée américaine

Nous avions donc comme premier projet de première de réaliser une image qui se génère grâce à code python que nous devions créer sur une durée de un mois. Nous avons donc choisi de générer un F-16, F-22 et F-35 pour ce projet. Nous devions utiliser le module turtle pour l’image.

Origines de ces avions

Le F-16 est un avion de combat à rôles multiples de l’armée américaine créé dans les années 70.
Le F-22 est un avion de chasse furtif de l’armée américaine créé dans les années 90.
Le F-35 est un avion de combat à rôles multiples de l’armée américaine créé dans les années 2000.

Organisation

Pour réussir à faire le script nous avons dû séparer les différentes parties du code pour s’y repérer. Cela nous a donc permis de faire des appels de fonctions dans le code (rectangle, triangle, étoile, trapèze).
Faire appel à des fonctions permet de réduire la taille du code, cela été utile étant donné la limite de 404 lignes.


Le Script

Nous allons commencer par le début du code

from turtle import *
from random import randint

try:
    from PIL import Image
    pillow_installed = True
except:
    print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
    print("https://nsi.xyz/py2png")
    pillow_installed = False

titre = "Avions de l'armée américaine - F16 F22 F35"
title(titre+" | Au lycée, la meilleure spécialité, c'est la spé NSI")

setup(1280, 720)
speed(0)
colormode(255)
hideturtle()

flash = True
if flash:
    wn = Screen()
    wn.tracer(0)

Il permet d’importer les modules nécessaires et initialiser la plupart du code (comme la couleur ou pillow).
« flash » est une nouveauté, il permet de générer instantanément l’image.


LA SAUVEGARDE DES IMAGES

Pour sauvegarder l’image on nous a donné ce code ci-dessous :

image = getcanvas()
nom_du_fichier_sans_extension=titre+"_"+hex(randint(2**30+2**25,2**30+2**25+2**24-1))[2:]

# Génère un fichier .ps
image.postscript(file=nom_du_fichier_sans_extension+".ps", colormode='color')

# Ouvre le fichier .ps et génère le fichier .png


try:
    psimage = Image.open(nom_du_fichier_sans_extension+".ps")
    psimage.load(scale=2)
    psimage_resized = psimage.resize((1280, 720))
    psimage.save(nom_du_fichier_sans_extension+".png")
    print(nom_du_fichier_sans_extension+".png", psimage.size, "sauvegardé dans le dossier")    
        
      except:
    if not pillow_installed:
        print("Oops! - ModuleNotFoundError: No module named 'PIL' - RTFM :")
        print("https://nsi.xyz/py2png")
    else:
        print("Oops! - 'ghostscript' not installed- RTFM :")
        print("https://nsi.xyz/py2png")

Or nous avions besoin d’enregistrer plusieurs images pour montrer les différentes étapes. Nous avons donc transformé ce code en une fonction nommée save() qui permet de sauvegarder l’image à n’importe quel moment dans le code.


LE FOND

La première fonction « drapeau » est le fond de l’image

def drapeau():        
    ligne(-640,640,13)
    rectangle(-640,-24,640,-385,0,(35,45,100))
    pos_y = 325
    for j in range(1,6):
        for i in range(1,7):
            étoile(-700+106*i,pos_y,30)
        pos_y = pos_y-70
    pos_y = 290
    for j in range(1,5):
        for i in range(1,6):
            étoile(-647+106*i,pos_y,30)
        pos_y = pos_y-70

Cette fonction fait elle-même appel à d’autres fonctions. Commençons par la première fonction : « ligne »

def ligne(x,y,repeat):
    for i in range(repeat):
        rectangle(x,y,1280,-720/13,0,(150,20,30))
        y = y-720/13
        rectangle(x,y,1280,-720/13,0,(255,255,255))
        y = y-720/13

La fonction ligne permet de faire toutes les lignes du drapeau soit 13 lignes ou 7 rouges et 6 blanches.
Et à chaque ligne il descend de la résolution de l’image divisée par 13 (car il y a 13 lignes)

Ensuite nous avons la création du rectangle bleu en haut à gauche du drapeau.

rectangle(-640,-24,640,-385,0,(35,45,100))

Ensuite il y a la fonction « étoile »

def étoile(x,y,L):
    setup(x,y,(255,255,255))
    pensize(5)
    for i in range(5):
        forward(L)
        right(144)
    pensize(1)
    end_fill()

La fonction « étoile » utilise « setup » qui est une fonction qui permet de faire le début de toutes les formes et qui est donc utilisée dans la plupart des fonctions.
Cette fonction permet de créer une étoile et avec notre boucle « for » utilisée dans la fonction drapeau on peut créer ainsi les 50 étoiles.


PREMIER AVION : F-16

Le premier avion se situera à gauche de l’image, nous avons donc fait le plus ancien en premier : le F-16

Avant même d’avoir commencé à coder, on a refait les avions avec des formes géométriques pour savoir quelles formes créer et où les mettre.
Voici comment nous avions découpé le F-16 avec plusieurs formes géométriques (des triangles et des rectangles).

# ======================== F-16 ========================

def F16_plane(x,y):
    triangle_iso(-50 + x, -90 + y, 100, 100, (100, 100, 100))
    triangle_iso(-100 + x, -20 + y, 200, 100, (80, 80, 80))
    triangle_iso(-25 + x, 60 + y, 50, 180, (100, 100, 100))
    rectangle(-100 + x, -20 + y, 200, 20, 0, (70, 70, 70))
    rectangle(-10 + x, -110 + y, 20, -250, 0, (100, 100, 100))
    rectangle(-20 + x, -70 + y, 40, -130, 0, (100, 100, 100))

    for i in range(0, 66, 65):
        rectangle(-50 + i + x, -110 + y, 35, -20, 0, (80, 80, 80))

    for i in range(0, 203, 202):
        rectangle(-102 + i + x, -42 + y, 2, -55, 0, (70, 70, 70))

# ======================== COCKPIT F-16 ========================

    rectangle(-10 + x, 130 + y, 20, 50, 0, (10, 10, 10))
    triangle_iso(-10 + x, 80 + y, 20, -15, (10, 10, 10))
    cercle(10, 0 + x, 130 + y, (10, 10, 10))

Nous avons donc utilisé ces formes là pour créer l’avion puis ensuite fait un cockpit en noir. On a joué avec l’obscurité des couleurs pour créer un effet de profondeur.


DEUXIEME AVION : F-22

Le deuxième avion se situera au milieu de l’image, ce sera donc le F-22

Tout comme le F-16 nous avons d’abord refait le F-22 avec des formes géométriques.
Voici comment nous avons refait le F-22 avec les formes géométriques (des triangles et des rectangles).

La forme finale n’est pas exactement la même car nous avons décidé de modifier certaines choses pour que la forme soit plus ressemblante.

# ======================== F-22 ========================

def F22_plane(x,y):

    triangle_iso(-150+x,-20+y,300,150, (155, 155, 155))
    rectangle(-150+x,-40+y,300,-20, 0, (155, 155, 155))
    triangle_iso(-150+x,-40+y,300,-50, (155, 155, 155))
    rectangle(-85+x,-85+y,60,45, 45, (155,155,155))
    rectangle(-85+x,-85+y,30,30, 0, (155,155,155))
    rectangle(85+x,-85+y,-60,45, -45, (155,155,155))
    rectangle(85+x,-85+y,-30,30, 0, (155,155,155))
    rectangle(-30+x,-85+y,60,-220, 0, (160, 160, 160))
    for i in range(0,31,30):
        triangle_iso(-25+i+x,-85+y,20,-10, (50, 50, 50))
    triangle_iso(-30+x,135+y,60,50, (160, 160, 160))
    rectangle(-15+x,140+y,30,-80, 0, (160, 160, 160))
    triangle_iso(-15+x,220+y,30,35, (160, 160, 160))
    
# ======================== COCKPIT F-22 ========================

    triangle_iso(-10+x,160+y,20,-15,(255,190,0))
    rectangle(-10+x,160+y,20,-30,0,(255,190,0))
    trapèze(-10+x,190+y,20,20,10,(255,190,0))
    triangle_iso(-5+x,210+y,10,5,(255,190,0))

Pour éviter de créer une fonction losange nous avons mis l’orientation de base de la fonction rectangle donc en mettant l’orientation à 45° ou -45° cela nous a permis d’avoir des losanges.


TROISIEME AVION : F-35

Le troisième avion se situera à droite de l’image, ce sera donc le plus récent : le F-35

Tout comme les deux autres avions nous avons d’abord refait le F-35 avec des formes géométriques.
Voici le schéma du F-35 fait avec des formes géométriques (triangles, rectangles et trapèzes). Cet avion est celui que nous avons dû le plus modifier

#========================= F-35 ================================
    
def F35_plane(x,y):
    
    triangle_iso(-125+x,-20+y,250,150,(130,130,130))
    rectangle(-125+x,-20+y,250,25,0,(130,130,130))
    triangle_iso(-125+x,-45+y,250,-45,(130,130,130))
    triangle_iso(-30+x,80+y,60,110,(130,130,130))
    trapèze(-50+x,60+y,30,60,20,(130,130,130))
    trapèze(20+x,60+y,30,60,20,(130,130,130))
    trapèze(-20+x,120+y,40,70,20,(130,130,130))
    triangle_iso(-10+x,190+y,20,15,(130,130,130))
    trapèze(-15+x,-85+y,30,-20,20,(50,50,50))
    rectangle(-50+x,-115+y,50,-40,45,(130,130,130))
    rectangle(-80+x,-89+y,40,30,0,(130,130,130))
    rectangle(80+x,-85+y,50,-40,135,(130,130,130))
    rectangle(40+x,-89+y,40,30,0,(130,130,130))
    
#========================== COCKPIT F-35 ========================
    
    trapèze(-9+x,160+y,18,-35,40,(15,15,15))
    trapèze(-9+x,160+y,18,15,5,(15,15,15))
    rectangle(-18+x,125+y,36,10,0,(15,15,15))
    trapèze(-18+x,115+y,36,-20,10,(15,15,15))

Le F-35 fut le plus compliqué à faire étant donné la fonction trapèze très complexe à utiliser mais après un moment nous avons réussit à le finir.

LE NOM DES AVIONS

Maintenant que nous avons les différents avions nous avons décidé de mettre leur nom sous chacun d’eux. Pour cela, il nous fallait générer les caractères : F – 1 2 3 5 6

Donc nous avons créé 7 fonctions pour les 7 caractères différents.

#========================= CARACTERES =====================

def F(x,y):
    rectangle(-50+x,y,10,100,0,(0,0,0))
    rectangle(-50+x,y-30,30,10,0,(0,0,0))
    rectangle(-50+x,y,50,10,0,(0,0,0))

def tiret(x,y):
    rectangle(x,y,30,10,0,(0,0,0))

def un(x,y):
    rectangle(x,y,10,100,0,(0,0,0))
    rectangle(x,y-15,-20,10,0,(0,0,0))

def deux(x,y):
    rectangle(x,y,50,10,0,(0,0,0))
    rectangle(x,y-90,50,10,0,(0,0,0))
    rectangle(x,y-50,50,10,0,(0,0,0))
    rectangle(x,y-90,10,-30,0,(0,0,0))
    rectangle(x+40,y-50,10,-40,0,(0,0,0))

def trois(x,y):
    rectangle(40+x,y,10,100,0,(0,0,0))
    rectangle(x,y,50,10,0,(0,0,0))
    rectangle(x,y-50,50,10,0,(0,0,0))
    rectangle(x,y-90,50,10,0,(0,0,0))

def cinq(x,y):
    rectangle(x,y,50,10,0,(0,0,0))
    rectangle(x,y,10,50,0,(0,0,0))
    rectangle(x,y-90,50,10,0,(0,0,0))
    rectangle(x+40,y-90,10,-30,0,(0,0,0))  
    rectangle(x,y-50,50,10,0,(0,0,0))

def six(x,y):
    rectangle(x,y,50,10,0,(0,0,0))
    rectangle(x,y,10,100,0,(0,0,0))
    rectangle(x,y-90,50,10,0,(0,0,0))
    rectangle(x+40,y-90,10,-30,0,(0,0,0))
    rectangle(x,y-50,50,10,0,(0,0,0))

Maintenant, que nous avons les lettres, il nous suffit d’y faire appel pour créer les noms.

Premièrement le F-16 :

def F_16(x,y):
    F(x,y)
    tiret(x,y-50)
    un(x+50,y)
    six(x+70,y)

Ensuite le F-22 :

def F_22(x,y):
    F(x,y)
    tiret(x,y-50)
    deux(x+40,y)
    deux(x+100,y)

Et dernièrement le F-35 :

def F_35(x,y):
    F(x,y)
    tiret(x,y-50)
    trois(x+40,y)
    cinq(x+100,y)

Les difficultés

La principale difficulté était de trouver les bonnes proportions et coordonnées à mettre pour positionner les formes.

Au début, une autre difficulté que nous avons rencontrée était d’utiliser des fonctions pour créer les avions, mais nous avons rapidement réussi.

L’IMAGE FINALE

Le fichier .py

Avions de l’armée américaine – F16 F22 F35Télécharger