De 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 lutin (pour la barre) et une variable.
Voici les différentes étapes à réaliser :
- créer un lutin 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 lutin.
- 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 lutins en fonction du scroll
Les lutins 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 lutins restent sur place (pas de scroll).
- Un scroll de +100 signifie que tous les lutins doivent être bougés de 100px vers le bas.
- Un scroll de -100 signifie que tous les lutins doivent être bougé de 100px vers le haut.
Le code à mettre dans les lutins 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 lutin à 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.
}">
</iframe>
<a style="background-color:#FFAB1A;border-style:none;border-radius:4px;color:#fff;cursor:pointer;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;font-weight:700;padding-left:15px;padding-right:15px;text-align:center;line-height:40px;margin:10px;display:inline-block;" target="_blank" href="https://scratch.mit.edu/projects/379882224/">Aller sur la page du projet
</a>
<a style="background-color:#4D97FF;border-style:none;border-radius:4px;color:#fff;cursor:pointer;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;font-weight:700;padding-left:15px;padding-right:15px;text-align:center;line-height:40px;margin:10px;display:inline-block;" target="_blank" href="https://scratch.mit.edu/projects/379882224/editor/"><img src="https://fr.scratch-wiki.info/w/images/6/63/Voir_%C3%A0_l%27int%C3%A9rieur.svg"></img> Voir à l'intérieur
</a>
<a style="background-color:#0FBD8C;border-style:none;border-radius:4px;color:#fff;cursor:pointer;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;font-weight:700;padding-left:15px;padding-right:15px;text-align:center;line-height:40px;margin:10px;display:inline-block;" target="_blank" href="https://scratch.mit.edu/create?is_remix=1&original_id=379882224&title=Remix"><img src="https://fr.scratch-wiki.info/w/images/2/2a/Remix.svg"></img> Remixer
</a>
</html>
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écors. Ce décors, 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écors sur deux axes (une par axe) :
(scroll-x)(scroll-y)
Voici un tableau regroupant les scripts à ajouter pour que le décors 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 lutin 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 lutins. Son costume devra être le plus grand possible, même si il déborde de l'éditeur de costume.
Il ne reste plus qu'à créer ce script dans le lutin 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
