De Scratch Wiki en Français

m (Oui mais sur Scratch ?)
m (Définition)
 
Ligne 3 : Ligne 3 :
 
== Définition ==
 
== 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...
+
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) ==
 
== Façon n°1 : Avec scrollbar (barre de défilement) ==

Version actuelle datée du 26 mars 2020 à 16:55


Le scrolling


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 :

  1. créer un lutin servant de barre de défilement
  2. utiliser une variable pour déterminer la position de tous les éléments affichés à l'écran

Créer la barre

  1. Créez un nouveau lutin.
  2. Dessinez comme costume une barre horizontale ou verticale (selon la direction dans laquelle scroller).
  3. 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.
  4. 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
 Idée :
Si le scroll de la variable est trop "fort" ou pas assez "fort", vous pouvez multiplier sa valeur. Le script deviendra alors :
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é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
Cet article fait partie de la catégorie des tutos
Tous les articles de cette catégorie :