La programmation évènementielle à travers  un scrolling différentiel dans Scratch

Première partie : réaliser un scrolling différentiel

Scratch nous l'avons vu permet de comprendre rapidement quelques notions sur le développement logiciel à travers une interface ludique.
Scratch est orienté programmation évènementielle, c'est par exemple le type de programmation que l'on utilise dans les automates industriels et dans la robotique.
En programamtion évènementielle, le programme est piloté par des évènements. 
Tous les programmes ne se Scratch donc sera C'est aussi pourquoi Scratch n'est pas forcément un bon outil pour apprendre à développer  la majeure partie des logiciels tels que les logiciels de gestion qui eux correspondent à une suite séquentielle de fonctions).
Scratch est donc aussi un bon outil pour apprendre la robotique et la programmation des automates industriels.

Loin des automates industriels, dans cette première partie, on s’intéresse à la programmation « traditionnelle »  dans Scratch à travers un effet de Scrolling

Le scrolling différentiel en lui-même est assez classique et l'objectif dans cet exemple sera surtout de voir un premier programme  qui ouvrira la voie  vers de logiciels plus sophistiqués.

1- Le scrolling du décor 


Le principe est le même que celui de regarder une vache dehors depuis un train en déplacement :
vu de notre place nous sommes immobiles et la vache de déplace.
En vérité, la vache ne bouge pas et c'est notre train qui avance.

L'effet de scrolling est identique à la vue depuis le train. Le chat ne bouge pas tandis qu'on va faire déplacre les arbres.


L'effet scrolling dans scratch

La première étape consiste à créer un nouveau lutin que l'on appellera : decor1Niveau1
et dans lequel on dessinera un arbre.

scrolling scratch1

 

scrolling scratch2

scrolling scratch3

 

Pour obtenir notre premier effet de scrolling du décor, et donner l'impression que le chat avance, on déplace l'arbre en sens inverse de la direction du chat.
C'est à dire que :

Quand on veut avoir l'impression que le chat avance à droite :
- Le chat de bouge pas, il regarde à droite
- L'arbre va vers la gauche

Quand on veut avoir l'impression que le chat avance à gaucche :
- Le chat de bouge pas, il regarde à gauche
- L'arbre va vers la droite

Pour commencer, on va simplement déplacer le lutin arbre vers la gauche quand la fleche droite du clavier est pressée (et vice versa)

scrolling scratch4

 

Il reste à orinter le chat. Pour notre effet de scrolling, le chat ne se déplace pas.
On doit donc simplment modifier son aspect :dans scracth cela consiste à changer son costume.

Par défaut le chat n'a pas de costume avec le regard à gauche.
Pour complèter les costuimes du chat, il faut simplement ajouter des costumes au chat en dupliquant ceux existants et faisant une symétrie axiale

scrolling scratch5

scrolling scratch6

A noter qu'en informatique, il est préfarable de ne pas choisir des noms de variables de type a b c i .... on préfère des noms de variables qui permettent de comprendre un progamme en le regardant.

Des noms de costumes plus parlant vont simplifier la compréhension des scripts

scrolling scratch7

 

Le chat doit regarder dans la bonne direction, c'est à dire vers la droite quand la touche droite est pressée et vers la gauche quand la touche gauche est pressée

scrolling scratch8

Pour donner l’impression que le chat court, on boucle sur le changement de son costume à droite et à gauche

scrolling scratch9

À ce stade on a un premier  effet de scrolling


Vous pouvez charger le fichier correspondant à cette étape ici : fichier1


Le chat court sur place, et le décor avance en sens inverse : cela donne l’impression que le chat avance.
La fenêtre de dessin de scratch est l’équivalent de la fenêtre du train et la vache se déplace.

 

 


 

Pour obtenir un défilement infini, le principe consiste à repositionner  lutin de l’arbre (decor1Niveau1) à droite quand il sort à gauche, et vice versa quand il sort à droite.

Concrètement la fenêtre de scratch utilise un système de coordonnées suivant :

scrolling scratch10

Donc si notre lutin « decor1Niveau1 » va plus loin que le bord  droit de la fenêtre de visualisation scratch (x >largeurFenetre ) alors il faut le replacer à gauche (et vice versa)

 Si la largeur fenêtre est bien de 480, scratch n’autorise que des position sur x allant de -284 à 359

Une version possible de scripte de scrolling infini sera donc :


scrolling scratch11

C’est-à-dire que si la position du lutin arbre est inférieure à -283 , on le replace à droite

scrolling scratch12

Et inversement si la position du lutin arbre est supérieure à 357 on le replace à gauche

scrolling scratch13

A ce stade, nous avons ce qu’on appelle un scrolling infini

Vous pouvez charger le fichier correspondant à cette étape ici : fichier2



 

Sur le même principe, on va utiliser un effet visiuel dont le principe est que : plus un décor est loin dans l’arrière - plan, plus il avance doucement. Le soleil, les nuages  vont avancer  dans la même direction que l’arbre, mais a des vitesses inférieures
On crée donc un nouveau lutin nuage, avec le même code mais avec des pas d’avance plus petits : 0.5

scrolling scratch14

A ce stade notre scrolling différentiel fonctionne, et on pourrait très bien ajouter d’autres plans : des montagnes par exemple qui se situeraient entre le plan (layer) des nuages et celui des arbres avec une vitesse intermédiaire.

Le résultat donnerait : fichier3

 

 


Cette article sur Scratch fait partie de notre formation à Domicile pour apprendre l'informatique à Veigy, Douvaine et dans le Chablais : www;veiginfo.com

 

@2018 - veiginfo.fr - dépannage informatique à domicile - Assistance et formation informatique - Veigy-Foncenex et environs
Loading...