Créer des boutons avec le stylo (tutoriel)

Créer des boutons 100% stylo

Ce tutoriel traite de comment réaliser un bloc permettant de créer des boutons 100% stylo avec des clones.

Idée

Dans un projet n'utilisant que du stylo, comment faire pour réaliser des boutons interactifs ?

Le bloc estampiller ne pouvant pas être utilisé selon la communauté pour ces projets, il faut donc utiliser un générateur de bouton.

Idée :

Une fois ce tutoriel terminé, libre à vous d'ajouter de quoi écrire du texte dans les boutons (ici, le tutoriel traite d'ajouter des icônes personnalisées).

Limitations

Comme indiqué plus haut, le générateur de bouton fonctionnera avec des clones. Il ne pourra pas y avoir plus de 300 boutons en même temps (si votre projet ne génère aucun clone) sur Scratch. Vous pouvez cependant utiliser Turbowarp et sa fonction clones infinis pour réaliser plus de boutons, mais le projet ne serait alors pas fonctionnel sur Scratch.

Réalisation (Ajouter un bouton)

Tout d'abord, il va falloir créer un lot de variables POUR CE SPRITE SEULEMENT.

Danger :

Utilisez bien pour ce sprite seulement pour les variables suivantes, sinon le projet ne fonctionnera pas s'il y a plus d'un bouton.

Créer les variables

Info :

Libre à vous de les nommez comme vous les voulez, mais sur ce tutoriel, elle seront nommées ainsi.

clone : y supérieur::variables ring
clone : y inférieur::variables ring
clone : x droit::variables ring
clone : x gauche::variables ring
clone : bordure ?::variables ring
clone : bordure : épaisseur::variables ring
clone : bordure : couleur::variables ring
clone : bouton : couleur::variables ring
clone : bouton : couleur si touché par la souris::variables ring
clone : bouton : précision::variables ring
clone : identifiant::variables ring
clone : icône dédiée::variables ring
clone : survolé ?::variables ring

Listes

Attention :

La liste est pour TOUS les sprites !

clone : boutons à supprimer::list ring

Réalisation

Ensuite, il vous faudra définir un long bloc personalisé qui suit :

Info :

Tous les blocs personnalisés sui suivent sont réalisés sans rafraichissement d'écran.

définir Bouton (identifiant), position sup x:(gauche x) y:(haut y) inf x:(droite x) y:(bas y) <bordure ?> (couleur bordure) (épaisseur bordure), bouton (couleur) (précision) (couleur si survolé), avec icône (icône)
mettre [clone : y supérieur v] à (haut y)
mettre [clone : y inférieur v] à (bas y)
mettre [clone : x gauche v] à (gauche x)
mettre [clone : x droit v] à (droite x)
si <(clone : y inférieur) > (clone : y supérieur)> alors {
mettre [clone : identifiant v] à (clone : y supérieur)
mettre [clone : y supérieur v] à (clone : y inférieur)
mettre [clone : y inférieur v] à (clone : identifiant)
}::control  // inverser l'axe y si les valeurs sont inversées
si <(clone : x droit) < (clone : x gauche)> alors {
mettre [clone : identifiant v] à (clone : x droit)
mettre [clone : x droit v] à (clone : x gauche)
mettre [clone : x gauche v] à (clone : identifiant)
}::control  // inverser l'axe x si les valeurs sont inversées
mettre [clone : bordure ? v] à <bordure ?>
mettre [clone : bordure : épaisseur v] à (épaisseur bordure)
mettre [clone : bordure : couleur v] à (couleur bordure)
mettre [clone : bouton : couleur v] à (couleur)
mettre [clone : bouton : couleur si touché par la souris v] à (couleur si survolé)
mettre [clone : bouton : précision v] à (précision)
mettre [clone : icône dédiée v] à (icône)
mettre [clone : identifiant v] à (identifiant) // définissez un identifiant différent pour tous vos boutons
si <[boutons à supprimer v] contient (identifiant)> alors {
répéter jusqu'à ce que <non <[boutons à supprimer v] contient (identifiant)>> {
supprimer l'élément (position de (identifiant) dans [boutons à supprimer v]) de [boutons à supprimer v]
}@loopArrow::control
}::control // si le bouton existait déjà par le passé, sa suppression n'affectera pas le nouveau bouton
créer un clone de (moi même v)

La suite du code se déroule dans deux blocs Quand je commence comme un clone
On a sous le premier :

Quand je commence comme un clone
répéter jusqu'à ce que <[boutons à supprimer v] contient (clone : identifiant v)> {
dessiner bouton::custom
}@loopArrow::control
supprimer l'élément (position de (clone : identifiant) dans [boutons à supprimer v]) de [boutons à supprimer v]
supprimer ce clone

On a sous le second :

Quand je commence comme un clone
répéter jusqu'à ce que <[boutons à supprimer v] contient (clone : identifiant v)> {
si <<(clone : y supérieur) > ((souris y) - (clone : bordure : épaisseur))> et <(clone : y inférieur) < ((souris y) + (clone : bordure : épaisseur))>>alors {
si  et <<(clone : x droit) > ((souris x) - (clone : bordure : épaisseur))> et <(clone : x gauche) < ((souris x) + (clone : bordure : épaisseur))>> alors {
mettre [clone : survolé ? v] à [true]
si <souris pressée> alors {
exécuter la fonction (clone : identifiant)::custom
}::control
} sinon {
mettre [clone : survolé ? v] à [false]
}::control
} sinon {
mettre [clone : survolé ? v] à [false]
}::control
}@loopArrow::control

Libre à vous de gérer les fonctions pouvant être exécutées. On a sous définir dessiner bouton :

définir dessiner bouton
mettre la taille du stylo à (précision)
si <(clone : survolé ?) = [true]> alors {
mettre la couleur du stylo à (clone : bouton : couleur)
} sinon {
mettre la couleur du stylo à (clone : bouton : couleur si touché par la souris)
}::control
aller à x:(clone : x gauche) y:(clone : y supérieur)
répéter ((([plafond v] de (((clone : y supérieur) - (clone : y inférieur)) / (précision))) * (précision)) / (2)) fois {
stylo en position d'écriture
répéter (1) fois {
aller à x:(clone : x gauche) y:(ordonnée y)
aller à x:(clone : x droit) y:(ordonnée y)
ajouter ((0) - (précision)) à y
aller à x:(clone : x gauche) y:(ordonnée y)
ajouter (précision) à y
}@loopArrow::control 
relever le stylo
ajouter ((-2) * (précision)) à y
}@loopArrow::control // fond du bouton
si <(clone : bordure ?) = [true]> alors {
mettre la taille du stylo à (clone : bordure : épaisseur)
mettre la couleur du stylo à (clone : bordure : couleur)
aller à x:(clone : x gauche) y:(clone : y supérieur)
stylo en position d'écriture
aller à x:(clone : x droit) y:(clone : y supérieur)
aller à x:(clone : x droit) y:(clone : y inférieur)
aller à x:(clone : x gauche) y:(clone : y inférieur)
aller à x:(clone : x gauche) y:(clone : y supérieur)
relever le stylo
}::control // bordure
aller à x:(((clone : x gauche) + (clone : xx droit)) / (2)) y:(((clone : y supérieur) + (clone : y inférieur)) / (2)) // centre du bouton
tracer icône (clone : icône dédiée)::custom

Créer des Îcones

Il ne vous reste qu'à créer des icônes pour vos boutons. En voici quelques unes :

définir tracer icône (icône)
si <(icône) = [valider]> alors {
mettre la couleur du stylo à [#008858]
mettre la taille du stylo à (4)
ajouter (-4) à x
s'orienter à (-45)
avancer de (4) pas
stylo en position d'écriture
avancer de (-8) pas
s'orienter à (45)
avancer de (12) pas
relever le stylo
} sinon {
si <(icône) = [recommencer]> alors {
mettre la couleur du stylo à [#d20000]
mettre la taille du stylo à (4)
ajouter (6) à y
s'orienter à (90)
stylo en position d'écriture
répéter (26) fois {
avancer de (1) pas
tourner @turnRight de (10) degrés
}@loopArrow::control
avancer de (4) pas
tourner @turnLeft de (215) degrés
avancer de (4) pas
avancer de (-4) pas
tourner @turnRight de (90) degrés
avancer de (4) pas
relever le stylo
} sinon {
si <(icône) = [flèche bas]> alors {
mettre la couleur du stylo à [#000000]
mettre la taille du stylo à (2)
ajouter (-3) à y
stylo en position d'écriture
s'orienter à (45)
avancer de (6) pas
avancer de (-6) pas
s'orienter à (-45)
avancer de (6) pas
relever le stylo
} sinon {
si <(icône) = [flèche haut]> alors {
mettre la couleur du stylo à [#000000]
mettre la taille du stylo à (2)
ajouter (-3) à y
stylo en position d'écriture
s'orienter à (-135)
avancer de (6) pas
avancer de (-6) pas
s'orienter à (135)
avancer de (6) pas
relever le stylo
} sinon {
si <(icône) = [petit carré]> alors {
mettre la taille du stylo à (8)
mettre la couleur du stylo à [#009e69]
ajouter (-4) à x
ajouter (4) à y
stylo en position d'écriture
ajouter (8) à x
ajouter (-8) à y
ajouter (-8) à x
ajouter (8) à y
relever le stylo
} sinon {

}::control
}::control
}::control
}::control
}::control

Sentez-vous libre d'ajouter et de combinez des icônes pour en réaliser de nouvelles, ou de changer les couleurs. Les icônes seront centrées au milieu du bouton.

C'est bon ! Vous pouvez désormais ajouter des boutons !