Source: Scratch Wiki en français
Définition
Tout d'abord, qu'est-ce que le scrolling ? Le scrolling (en français "défilement") est une technique pour faire défiler la page (ou du contenu sur la page) de façon horizontale ou verticale si la page (on son contenu) est trop grande pour être affichée en une fois.
Cette technique est employée principalement dans les jeux vidéo avec des plateformes (où le niveau est trop grand et ne peut pas être affiché en une fois), mais aussi sur les pages web (où il faut "scroller" pour voir le reste de la page), etc...
Façon n°1 : Avec scrollbar (barre de défilement)
La "scrollbar" (aussi appelée "barre de défilement" ou "ascenseur" en français) est un excellent moyen de se déplacer rapidement et facilement dans un espace trop grand pour être affiché en une fois.
Pour reproduire ce comportement, il faudra utiliser un sprite (pour la barre) et une variable.
Voici les différentes étapes à réaliser :
- créer un sprite servant de barre de défilement
- utiliser une variable pour déterminer la position de tous les éléments affichés à l'écran
Créer la barre
- Créez un nouveau sprite.
- Dessinez comme costume une barre horizontale ou verticale (selon la direction dans laquelle scroller).
- Créez une variable qui contiendra la valeur du défilement dans cette direction. C'est elle qui contiendra le décalage dans la direction.
- Créez aussi une autre variable qui contiendra la distance entre la souris et la barre de défilement quand celle-ci est déplacée. Il est possible que l'utilisateur fasse défiler la page en ne prenant pas la barre par son centre. La barre se "téléportera" alors sur la souris de l'utilisateur. Pour éviter ça, on doit connaitre la distance (horizontale ou verticale) qui sépare la souris de la barre. C'est juste pour avoir une meilleure expérience utilisateur.
La barre contiendra ce script :
quand le drapeau vert pressé répéter indéfiniment mettre [scroll-y v] à (ordonnée y) // pour que le défilement (vertical) soit modifié en fonction de la position de barre fin quand ce sprite est cliqué // pour une meilleur expérience utilisateur mettre [différence-y v] à ((ordonnée y) - (souris y)) // connaitre la distance entre la souris et la barre répéter jusqu'à ce que <non <souris pressée ?>> // quand la barre est glissée mettre y à ((souris y) + (différence-y)) // la barre suit la souris fin
Déplacer les sprites en fonction du scroll
Les sprites que vous utiliserez dans votre projet devront être déplacés en fonction de la valeur dans notre variable utilisée pour scroll.
- Un déplacement de 0 signifie que les sprites restent sur place (pas de scroll).
- Un scroll de +100 signifie que tous les sprites doivent être bougés de 100px vers le bas.
- Un scroll de -100 signifie que tous les sprites doivent être bougé de 100px vers le haut.
Le code à mettre dans les sprites influencés par le scrolling :
quand le drapeau vert pressé répéter indéfiniment aller à x (0) y (0) // la position de base de votre sprite à l'écran ajouter ((0) - (scroll-x)) à x // pour le déplacer en fonction du scroll horizontal ajouter ((0) - (scroll-y)) à y // pour le déplacer en fonction du scroll vertical fin
Idée :
quand le drapeau vert pressé répéter indéfiniment aller à x (0) y (0) ajouter (((0) - (scroll-x)) * (2)) à x // rend le déplacement horizontal 2x plus sensible ajouter (((0) - (scroll-y)) * (2)) à y // rend le déplacement vertical 2x plus sensible fin
Un multiplicateur de 2 rendra le scroll 2x plus fort, tandis qu'un multiplicateur de 0.5 rendra le scroll 2x moins fort.
Tutoriel 2 : Arrière-plan
Dans certains jeux, tels que les jeux de plate-forme, on peut voir le personnage principal évoluer dans un décor. Ce décor, ainsi que les autres éléments du niveau, défile (horizontalement et/ou verticalement) à l'arrière-plan alors que le personnage reste sur place.
Pour arriver à ce résultat, il s'agit de contrôler un arrière-plan en appuyant sur les flèches du clavier. Il vous faudra deux variables si vous souhaitez contrôler votre décor sur deux axes (une par axe) :
(scroll-x)(scroll-y)
Voici un tableau regroupant les scripts à ajouter pour que le décor défile en fonction d'une flèche :
| Script | Description |
|---|---|
quand la touche [flèche haut v] est pressée ajouter (10) à [scroll-y v]::variables |
Bas |
quand la touche [flèche bas v] est pressée ajouter (-10) à [scroll-y v]::variables |
Haut |
quand la touche [flèche droite v] est pressée ajouter (10) à [scroll-x v]::variables |
Gauche |
quand la touche [flèche gauche v] est pressée ajouter (-10) à [scroll-x v]::variables |
Droite |
La scène ne pouvant pas bouger, il faudra utiliser un sprite comme l'arrière-plan. C'est lui qui contiendra le costume à être affiché. Il pourra donc se déplacer tranquillement derrière tous les autres sprites. Son costume devra être le plus grand possible, même s'il déborde de l'éditeur de costume.
Il ne reste plus qu'à créer ce script dans le sprite utilisé par l'arrière-plan pour qu'il puisse se déplacer :
quand le drapeau vert pressé répéter indéfiniment aller à x (scroll-x) y (scroll-y) fin
