Contenu principal
Cours : Apprendre à coder > Chapitre 4
Leçon 2: Gestion des scènesChangement de scène contrôlé par un bouton
Nous avons réussi à avancer jusqu'ici pour changer de scènes en utilisant seulement des clics de souris, sans contrôle de position. Mais nous avons réalisé qu'il y avait un inconvénient à cette démarche : nous ne pouvions pas utiliser les clics de souris à l'intérieur d'une scène pour une autre interaction. Le moyen utilisé par de nombreux jeux et applications pour solutionner ce problème est d'ajouter des éléments d'interaction utilisateur spécifiques, comme les menus et les boutons, et naviguer entre les scènes en utilisant seulement un de ces éléments. Ajoutons un bouton en haut à droite pour circuler parmi les scènes de notre programme.
Qu'est-ce qu'un "bouton" ? C'est en fait deux choses : 1) un indicateur visuel indiquant qu'une zone est cliquable et 2) la logique qui fait que la zone sera réceptive aux clics. Commençons par l'indicateur visuel, un
rect() avec un text(), et enveloppons-le dans une fonction, dans le cas où nous voudrions l'appeler plusieurs fois :var drawButton = function() {
fill(81, 166, 31);
rect(340, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 344, 29);
};Maintenant, à quel endroit devons-nous l'appeler ? Il nous faut naturellement l'appeler quand nous dessinons la première scène, pour qu'on puisse aller à la suivante :
drawScene1();
drawButton();Il nous faut aussi l'afficher dans toutes les scènes ultérieures. Nous pouvons appeler la fonction à l'intérieur de chaque fonction de dessin de scène, mais il existe un meilleur moyen : coller juste le code à la fin de la fonction
mouseClicked, pour être sûr qu'elle soit appelée à la fin de chaque dessin de scène :mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
drawScene1();
}
drawButton();
};En fait, j'ai menti, ce n'est pas tout à fait aussi simple. Avec le code ci-dessus, nous voyons le bouton sur chaque scène exceptée une. Pouvez-vous déterminer laquelle ? Je vous donne quelques secondes... arrêtez de lire maintenant ! Avez-vous trouvé ? Oui, oui, c'est la scène animée. Le code à l'intérieur de
draw() redessine la scène 4 immédiatement au-dessus du bouton. Nous devons donc l'ajouter aussi à la fin de cette fonction :draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};Et juste au cas où un individu entreprenant s'amuse à faire glisser des bébés jusqu'à en cacher le bouton, appelons la fonction aussi à la fin de
mouseDragged :mouseDragged = function() {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
drawButton();
};Waouh ! Nous avons maintenant un bouton sur chaque scène, en permanence. Allez-y, vérifiez !
Mais, ah ah, vous ne trouvez pas cela drôle ? Le bouton ne fait absolument rien ! Je veux dire que l'utilisateur pourrait penser qu'il fait quelque chose, en décidant de cliquer uniquement
dessus. Mais en fait, il peut cliquer n'importe où et cela fait exactement la même chose. Il est nécessaire que nous modifions la logique de notre fonction
mouseClicked pour qu'elle teste la position de la souris par rapport au bouton avant de décider si il faut un changement de scène.Comme nous l'avons fait dans les défis de boutons, dans l'introduction au JavaScript, il nous faut mettre en place une instruction conditionnelle qui teste les variables
mouseX et mouseY. Habituellement, cela signifie qu'il faut combiner quatre conditions avec l'opérateur &&, vérifiant que mouseX est au-delà du bord gauche, mouseX en-deçà du bord droit, mouseY au-delà du bord supérieur et mouseY en deçà du bord inférieur. Mais notre bouton étant dans le coin en haut à droite, je souhaite offrir à l'utilisateur une plus grande surface réceptive au clic, donc simplifions en testant seulement deux conditions : est-ce que mouseX est au-delà du côté gauche et mouseY est en-deçà du bord inférieur ?mouseClicked = function() {
if (mouseX >= 340 && mouseY <= 45) {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
drawScene1();
}
drawButton();
}
};Et voilà ! Avec cette vérification, nous possédons maintenant un programme où l'utilisateur doit cliquer dans une zone particulière pour pouvoir se rendre sur la scène suivante. Essayez de cliquer, soit sur le bouton, soit en dehors :
Maintenant que nous avons un moyen de savoir si un clic implique un changement de scène, nous pouvons utiliser les clics pour d'autres interactions à l'intérieur de nos scènes, quand on ne clique pas sur le bouton. Cela veut dire que nous pouvons maintenant laisser l'utilisateur ajouter des bébés Winston au clic de souris au lieu de la faire glisser, exactement comme nous le souhaitions à l'origine. Nous allons juste ajouter un 'else' à notre 'if', et déplacer le code de la fonction
mouseDragged à l'intérieur :mouseClicked = function() {
if (mouseX >= 340 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
}
};Remarquez qu'il nous faut conserver le test sur la scène actuelle, pour vérifier que le code ne s'applique que sur cette scène. Et maintenant, il nous est facile d'ajouter une interaction de clic de souris sur les autres scènes aussi. Quoi d'autre pourrions nous laisser l'utilisateur ajouter ? Des tambours ? De la barbe ? Amusez-vous avec le code ci-dessous :
Vous souhaitez rejoindre la discussion ?
C'a aurait été agréable 2 défis entre les 3 dernières scènes :)
Vous avez un lien ou je pourrais pratiquer les 3 derniers exercices sans m'y perdre? :)(2 votes)
Du coup à la fin on doit cliquer pour afficher les bébé et non laisser appuyer sur le clique de la souris.(2 votes)- Et si je veux afficher plusieurs button different, et a chacun son role different comment est ce que je peux faire ? SVP!(1 vote)
- Bonjours.Merci pour le cours. Dans cette leçon je ne vois pas afficher les boutons. La scène semble tronqué. J'ai modifié les coordonnées du bouton pour que ça soit visible. ( rect(10, 10, 50, 25); Toutefois quant je click sur le bouton ça ne change pas de scène.(1 vote)
- oui parfois le log html beug , moi c'est au niveau graphique(1 vote)