Scratch Wiki Accueil/tutos/006 Scrolling


Le scrolling

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, et vous connaissez forcément : si, c'est ce à quoi sert la barre sur le côté de l'écran, elle vous permet de faire défiler la page !

Oui mais sur Scratch ?

En effet, vous voyez peut-être mal le rapport entre le fait de faire défiler du texte 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
  • 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 (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 variables. Voici un aperçu de ce que nous tenterons de faire :

  • 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

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.

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

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 lutin est cliqué
répéter jusqu'à <non <souris pressée?>> :: control cstart
donner la valeur (souris y) à y
end

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

Voilà pour la scrollbar !

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 !

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 :

(scrollx)
(scrolly)

Voici un tableau regroupant les scripts à ajouter pour que le décor défile en fonction d'une flèche :

Script Description
quand [flèche haut v] est cliqué
ajouter à (scrolly) (10)
Haut
quand [flèche bas v] est cliqué
ajouter à (scrolly) (-10)
Bas
quand [flèche droite v] est cliqué
ajouter à (scrollx) (10)
Droite
quand [flèche gauche v] est cliqué
ajouter à (scrollx) (-10)
Gauche