De Scratch Wiki en Français
Sommaire
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 horizontale ou verticale si la page est trop grande pour être affichée en une fois!
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.
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.
Info :
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
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)
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) |
Bas |
quand [flèche bas v] est cliqué ajouter à (scrolly) (-10) |
Haut |
quand [flèche droite v] est cliqué ajouter à (scrollx) (10) |
Gauche |
quand [flèche gauche v] est cliqué ajouter à (scrollx) (-10) |
Droite |
Ensuite, il suffit de créer ce script dans un lutin représentant l'arrière-plan. Cet arrière-plan doit si possible être géant (s'il devient automatiquement plus petit, utilisez ce tuto) :
quand le drapeau vert pressé répéter indéfiniment aller à x (scrollx) y (scrolly) end
