De Scratch Wiki en français

m (Lutin > sprite)
 
(40 versions intermédiaires par 6 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
----
+
{{Titre|Le scrolling}}
<div style="margin: 0.5em; padding: 0.25em 0.9em;"><center><span style="font-size:2em">'''Le scrolling'''</span></center></div>
 
----
 
  
 
== Définition ==
 
== Définition ==
  
Tout d'abord, qu'est-ce que le scrolling ? Vous connaissez sans doute ce mot, mais au cas où, je précise qu'il s'agit à la base d'un mot anglais, et si vous cherchez à le traduire, cela donne "défilement". On l'utilise dans l'informatique très souvent, elle vous permet de faire défiler la page de façon horizontal ou verticale si la page est trop grande pour être affichée en une fois!
+
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.
  
=== Oui mais sur Scratch ? ===
+
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...
  
En effet, vous voyez peut-être mal le rapport entre le fait de faire défiler une page et... la programmation. Pourtant, il existe! Sur Scratch, le scrolling est souvent utilisé, parfois si discret que vous ne le voyez pas! Quelques exemples courants :
+
== Façon n°1 : Avec scrollbar (barre de défilement) ==
* la barre de défilement citée ci-dessus pour un texte trop long pour être affiché en une fois
 
* l'arrière-plan d'un jeu (vous savez, on pense que le personnage se déplace, mais non, c'est juste l'arrière-plan qui bouge !)
 
Il en existe plein d'autres, mais ce sont ceux que l'on va aborder dans ce tuto.
 
  
== Tutoriel 1 : Scrollbar (ou barre de défilement) ==
+
La "scrollbar" (aussi appelée "[https://fr.wikipedia.org/wiki/Barre_de_d%C3%A9filement 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.
  
La scrollbar (vous avez dû comprendre qu'il s'agissait de la barre de défilement) peut sembler simple à première vue, mais ce n'est pas toujours le cas... bon, ok, c'est presque impossible quand on ne connait pas les [[Scratch_Wiki_Accueil/les_blocs/donn%C3%A9es|variables]]. Voici un aperçu de ce que nous tenterons de faire :
+
Pour reproduire ce comportement, il faudra utiliser un sprite (pour la barre) et une [[Variables|variable]].
* utiliser une variable pour placer des éléments
 
* utiliser cette même variable pour les faire défiler
 
* créer une scrollbar permettant de faire défiler ces éléments
 
  
=== Placer des lutins selon 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
  
Les lutins (les "objets" avec des scripts, des costumes et des sons) que vous allez utiliser seront chacun des éléments de la liste que vous ferez défiler. Vous pouvez également utiliser un seul lutin immense qui défilera en fonction de la scrollbar.
+
=== Créer la barre ===
  
Créons les lutins "image", "texte" et "bouton". L'image fera 120*100 (c'est sa taille), soit 100 px de hauteur, le texte fera 120*150 et le bouton 120*50 (on va mettre toutes leurs longueurs à 120, c'est plus joli). Bon, si c'est du charabia pour vous (oui, du "charabia"), importez juste une image et regardez la hauteur de cette dernière.
+
# 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.
  
{{Note|Astuce : pour savoir la hauteur de votre image, allez sur le costume contenant l'image et regardez sous le nom, dans la miniature du costume ; il y a des nombres, c'est les dimensions du costume. La hauteur, c'est le nombre après l'astérisque (*).}}
+
La barre contiendra ce script :
 
 
Bref, après cette super astuce, on va utiliser une variable :
 
 
 
<scratchblocks>
 
(scrolly)
 
</scratchblocks>
 
 
 
Elle permettra tout d'abord de placer les lutins sur la scène. Dans le lutin "Image", contenant une image (logique), utilisez ce script :
 
  
 
<scratchblocks>
 
<scratchblocks>
 
quand le drapeau vert pressé
 
quand le drapeau vert pressé
 
répéter indéfiniment
 
répéter indéfiniment
aller à x (0) y (scrolly)
+
mettre [scroll-y v] à (ordonnée y) // pour que le défilement (vertical) soit modifié en fonction de la position de barre
end
+
fin
</scratchblocks>
 
  
C'est là que ça se complique. On veut désormais placer le lutin "Texte" (devinez ce qu'il contient : du texte !). Pour ça, on va devoir changer les scripts, alors voici ceux que vous devrez utiliser :
+
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
<scratchblocks>
+
répéter jusqu'à ce que <non <souris pressée ?>> // quand la barre est glissée
quand le drapeau vert pressé
+
mettre y à ((souris y) + (différence-y)) // la barre suit la souris
répéter indéfiniment
+
fin
aller à x (0) y ((scrolly) + (135))
 
end
 
 
</scratchblocks>
 
</scratchblocks>
  
Pourquoi 135 ? Car c'est la somme de la moitié de la hauteur de l'image, de la moitié de la hauteur du texte et de 10 (l'écart entre le texte et l'image).
+
=== Déplacer les sprites en fonction du scroll ===
  
135 = hauteur de l'image / 2 + hauteur du texte / 2 + 10
+
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.
  
135 = 100 / 2 + 150 / 2 + 10
+
* 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.
135 = 50 + 75 + 10
+
* Un scroll de -100 signifie que tous les sprites doivent être bougé de 100px vers le haut.
 
 
Voilà.
 
 
 
Maintenant, on s'occupe du bouton, qui sera sous l'image (et qui contient comme costume un... bouton. Si, si). On utilise comme script :
 
  
 +
Le code à mettre dans les sprites influencés par le scrolling :
 
<scratchblocks>
 
<scratchblocks>
 
quand le drapeau vert pressé
 
quand le drapeau vert pressé
 
répéter indéfiniment
 
répéter indéfiniment
aller à x (0) y ((scrolly) - (85))
+
aller à x (0) y (0) // la position de base de votre sprite à l'écran
end
+
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
 
</scratchblocks>
 
</scratchblocks>
  
Pourquoi 85 ? A votre avis ?
+
{{Idée|Si le scroll de la variable est trop "fort" ou pas assez "fort", vous pouvez multiplier sa valeur. Le script deviendra alors :
 
 
85 = hauteur de l'image / 2 + hauteur du bouton / 2 + 10
 
 
 
85 = 100 / 2 + 50 / 2 + 10
 
 
 
85 = 50 + 25 + 10
 
 
 
Vous avez compris ? Tant mieux. Pourquoi (-) au lieu de (+) ? Car le bouton sera sous l'image, et non au dessus.
 
 
 
=== Faire défiler les éléments à l'aide de la scrollbar ===
 
 
 
Attention, ce script peut paraître compliqué :
 
 
 
 
<scratchblocks>
 
<scratchblocks>
quand ce lutin est cliqué
+
quand le drapeau vert pressé
répéter jusqu'à <non <souris pressée?>> :: control cstart
+
répéter indéfiniment
donner la valeur (souris y) à y
+
aller à x (0) y (0)
end
+
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
 
</scratchblocks>
 
</scratchblocks>
 +
Un multiplicateur de 2 rendra le scroll 2x plus fort, tandis qu'un multiplicateur de 0.5 rendra le scroll 2x moins fort.
 +
}}
  
Tout simplement, si on clique sur le lutin le contenant, celui-ci va aller à la hauteur de notre pointeur jusqu'à ce qu'on cesse de cliquer. Alors, tout simplement, insérez ce script dans le lutin de la scrollbar, avec un rectangle comme costume (dont la taille serait d'environ 10*100). Mais attention, cela ne permet pas de faire défiler la liste ! Alors ce script sera nécessaire :
+
{{Projet|379882224}}
 
 
<scratchblocks>
 
quand ce lutin est cliqué
 
répéter jusqu'à <non <souris pressée?>> :: control cstart
 
donner la valeur (souris y) à y
 
mettre [y v] à (ordonnée y)
 
end
 
</scratchblocks>
 
 
 
Voilà pour la scrollbar !
 
  
 
== Tutoriel 2 : Arrière-plan ==
 
== Tutoriel 2 : Arrière-plan ==
  
Dans certains jeux, tels que les jeux de plate-forme, on peut voir le personnage évoluer dans un décor, qui défile à l'arrière-plan alors que le personnage reste en réalité sur place. Comment créer cela, me direz-vous? C'est beaucoup plus simple que la scrollbar! Vous voulez essayer? Tant mieux, ce tutoriel est là pour ça!
+
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.
 
 
Cette fois, c'est très simple, 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 :
 
  
<scratchblocks>
+
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) :
(scrollx)
+
<sb>(scroll-x)</sb><sb>(scroll-y)</sb>
(scrolly)
 
</scratchblocks>
 
  
Voici un tableau regroupant les scripts à ajouter pour que le décor défile en fonction d'une flèche :
+
Voici un tableau regroupant les scripts à ajouter pour que le décors défile en fonction d'une flèche :
  
{| class="wikitable sortable"
+
{|class="wikitable"
 
!Script
 
!Script
 
!class="unsortable"|Description
 
!class="unsortable"|Description
 
|-
 
|-
 
|<scratchblocks>
 
|<scratchblocks>
quand [flèche haut v] est cliqué
+
quand la touche [flèche haut v] est pressée
ajouter à (scrolly) (10)
+
ajouter (10) à [scroll-y v]::variables
 
</scratchblocks>
 
</scratchblocks>
 
|Bas
 
|Bas
 
|-
 
|-
 
|<scratchblocks>
 
|<scratchblocks>
quand [flèche bas v] est cliqué
+
quand la touche [flèche bas v] est pressée
ajouter à (scrolly) (-10)
+
ajouter (-10) à [scroll-y v]::variables
 
</scratchblocks>
 
</scratchblocks>
 
|Haut
 
|Haut
 
|-
 
|-
 
|<scratchblocks>
 
|<scratchblocks>
quand [flèche droite v] est cliqué
+
quand la touche [flèche droite v] est pressée
ajouter à (scrollx) (10)
+
ajouter (10) à [scroll-x v]::variables
 
</scratchblocks>
 
</scratchblocks>
 
|Gauche
 
|Gauche
 
|-
 
|-
 
|<scratchblocks>
 
|<scratchblocks>
quand [flèche gauche v] est cliqué
+
quand la touche [flèche gauche v] est pressée
ajouter à (scrollx) (-10)
+
ajouter (-10) à [scroll-x v]::variables
 
</scratchblocks>
 
</scratchblocks>
 
|Droite
 
|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 si 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 :
 +
<scratchblocks>
 +
quand le drapeau vert pressé
 +
répéter indéfiniment
 +
aller à x (scroll-x) y (scroll-y)
 +
fin
 +
</scratchblocks>
 +
 +
{{Tuto}}
 +
 +
[[en:Scrolling (sprites)]]
 +
[[de:Bewegter Hintergrund]]

Version actuelle datée du 27 mai 2021 à 22:50


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 sprite (pour la barre) et une variable.

Voici les différentes étapes à réaliser :

  1. créer un sprite 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 sprite.
  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 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
 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 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 si 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
Cet article fait partie de la catégorie des tutos
Tous les articles de cette catégorie :
Les cookies nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation des cookies.