De Scratch Wiki en Français

m (Tutoriel 2 : Arrière-plan)
m (Tutoriel 1 : Scrollbar (ou barre de défilement))
Ligne 12 : Ligne 12 :
 
Il en existe plein d'autres, mais ce sont ceux que l'on va aborder dans ce tuto.
 
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) ==
+
== Façon n°1 : Avec scrollbar (barre de défilement) ==
  
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 [[Données|variables]]. Voici un aperçu de ce que nous tenterons de faire :
+
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.
* utiliser une variable pour placer des éléments
+
 
* utiliser cette même variable pour les faire défiler
+
Pour reproduire ce comportement, il faudra utiliser un lutin (pour la barre) et une [[Variables|variable]].
* créer une scrollbar permettant de faire défiler ces éléments
+
 
 +
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 :
 +
 
 +
<scratchblocks>
 +
quand drapeau vert pressé
 +
répéter indéfiniment
 +
mettre [scroll-y] à (ordonnée y)
 +
fin
 +
 
 +
quand ce sprite est cliqué
 +
mettre [différence-y] à ((ordonnée y) - (souris y))
 +
répéter jusqu'à ce que <non <souris pressée ?>>
 +
mettre y à ((souris y) + (différence-y))
 +
fin
 +
</scratchblocks>
  
 
=== Placer des lutins selon une variable ===
 
=== Placer des lutins selon une variable ===
Ligne 98 : Ligne 123 :
 
mettre [y v] à (ordonnée y)
 
mettre [y v] à (ordonnée y)
 
</scratchblocks>
 
</scratchblocks>
 
Voilà pour la scrollbar !
 
  
 
== Tutoriel 2 : Arrière-plan ==
 
== Tutoriel 2 : Arrière-plan ==

Version du 26 mars 2020 à 16:18


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...

Oui mais sur Scratch ?

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 :

  • 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.

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 drapeau vert pressé
répéter indéfiniment
mettre [scroll-y] à (ordonnée y)
fin

quand ce sprite est cliqué
mettre [différence-y] à ((ordonnée y) - (souris y))
répéter jusqu'à ce que <non <souris pressée ?>>
mettre y à ((souris y) + (différence-y))
fin

Placer des lutins selon une variable

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é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.

Info
 Info :
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 (*).

Bref, après cette super astuce, on va utiliser une variable :

(scrolly)

Elle permettra tout d'abord de placer les lutins sur la scène. Dans le lutin "Image", contenant une image (logique), utilisez ce script :

quand le drapeau vert pressé
répéter indéfiniment
aller à x (0) y (scrolly)
end

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 le drapeau vert pressé
répéter indéfiniment
aller à x (0) y ((scrolly) + (135))
end

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).

135 = hauteur de l'image / 2 + hauteur du texte / 2 + 10

135 = 100 / 2 + 150 / 2 + 10

135 = 50 + 75 + 10

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 :

quand le drapeau vert pressé
répéter indéfiniment
aller à x (0) y ((scrolly) - (85))
end

Pourquoi 85 ? A votre avis ?

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é :

quand ce sprite est cliqué
répéter jusqu'à <non <souris pressée?>> :: control cstart
mettre y à (souris y)

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 :

quand ce sprite est cliqué
répéter jusqu'à <non <souris pressée?>> :: control cstart
mettre y à (souris y)
mettre [y v] à (ordonnée y)

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 :