Bonjour à toutes et à tous!!

Aujourd'hui j'ai pas trop la flemme, donc je vais vous faire un petit tuto.
Il me semblais qu'un tuto semblable à celui que je vais faire existais déjà, mais après une petite recherche, je me suis rendu compte que non.

Enfin bon, si c'était le cas, il n'est pas facile à retrouver avec la fonction rechercher ^^ (ou alors je suis bigleux, ce qui est aussi fort possible.)

Ce tuto vous expliquera comment faire de manière général un menu en événement. Je vais tenter d'être le plus général possible.


Pour commencer, voyons la structure de notre menu et quels seront les outils nécessaires...

1- Une variable pour la position du curseur
2- Des belles images pour chaque options (même si c'est du texte, en évènement on a pas les moyens d'afficher un texte où on veut autrement qu'avec l'affichage d'image. et de toute façon, avec des images, ce sera beaucoup plus beau et plus dynamique qu'avec le "proposé un choix")
3- Un interrupteur pour chaque menu/sous-menu (un menu sera un évènement commun ou non (ça dépend de sa nature) en démarrage automatique)
4- Un interrupteur pour créer une touche d'annulation du menu (Pas nécessaire pour les menus "obligatoire" comme le choix d'un personnage au début du jeu)
5- Une variable "Touche" qui nous permettras de savoir quelle touche a été pressée par le joueur


Alors voilà maintenant le "plan" de notre menu :

I- Initialisation :
1- Disposition des images
2- Initialisation de la variable Curseur : Curseur = 1
3- Initialisation de l'interrupteur Annulation : Annulation = désactivé


II- Boucle principale
C'est là que va être le cœur de notre menu.

1- Gestion de l'affichage : Modifier les images en fonction de la position du curseur.
2- Gestion des entrées : Modifier la position du curseur en fonction de la touche pressée par le joueur
3- Gestion des bornes de notre menu : Vérifié la valeur de la variable Curseur et agir en conséquence (Vérification qu'elle ne soit pas supérieur au nombre d'option)

III- Résultat
En fonction de l'option sélectionnée et acceptée par le joueur, on appel tel ou tel menu, ou on quitte le menu.

1- Retrait des images
2- Désactivation de l'interrupteur du menu en cours (afin de ne pas avoir plusieurs menu actif en même temps)
3- Vérification de l'interrupteur "Annulation". Si il est activé, on quitte le menu, sinon on appel un autre menu

Voilà à quoi ressemble donc généralement un menu.

Suivons maintenant ces étapes pas à pas :
Tout d'abord, si votre menu peut-être appelé plusieurs fois (menu de base, menu de combat, menu pour changer de character etc...), utilisez un évènement commun en mode démarrage automatique (qui se lance lorsque l'interrupteur que vous spécifiez pour ce menu s'activera). Sinon, s'il n'est appelé qu'une fois durant une partie, vous pouvez le faire en évènement simple.


I-
Pour l'initialisation, je pense que tout est dit... Vous pouvez jeter un coup d'œil à l'annexe "Effets pour les images" vers de ce poste pour vous donner des idées pour l'apparition de vos images. Sinon, j'estime que vous savez quand même comment modifier la valeur d'une variable ou d'un interrupteur.
Aussi, ayez en tête que ces images devront être l'état "non sélectionné" de vos images. A l'initialisation de vos images, aucune ne doit être sélectionnée. Ainsi, si vous faites un effet non-sélectionné => Noir et blanc; Sélectionné => Couleur, n'oubliez pas de modifié le ton de vos images à l'initialisation.

NB : Utilisez si possible le numéro d'image associé à la valeur que vous assignez à l'option qu'elle représente (par exemple l'option 1 est représenté par l'image 1, l'option 2 par l'image 2 etc...) ou alors avec juste un décalage (par exemple l'option 1 est représenté par l'image 7, l'option 2 par l'image 8 etc...). Cela vous aidera pour la suite.
De même, choisissez judicieusement la valeur de vos option en fonction de leurs positions (par exemple, l'option 1 est au dessus de l'option 2 qui est elle-même au dessus de l'option 3 etc... Si vous mettez tout dans le désordre, ça va être un sacré bordel pour savoir quelle est la nouvelle option sélectionnée par le joueur lorsqu'il pressera des touches...)

II-1)
Pour ce faire, il faut créer une condition pour chaque valeur de la variable curseur. Normalement, votre curseur doit pouvoir prendre les valeurs de 1 aux nombre d'option de votre menu.
En fonction de l'option sélectionnée, il faut mettre en valeur l'image correspondante et ne surtout pas oublier de remettre les autres images à leur état normale (afin que le joueur n'ait pas l'impression d'avoir plusieurs options sélectionnées). Quelques manières de mettre en valeur votre image sont indiqué en fin de ce post, dans la partie "Mettre en valeur vos images".

Exemple en image (ne faites pas gaffe à la disposition, aux noms et aux effets des images):



II-2)
En première page des commandes d'événement, nous avons une option "Gestion de l'appuie sur une touche". Cliquez dessus et sélectionnez la variable "Touche" pour enregistrer la touche pressée par le joueur.

NB : Chaque touche du jeu (bas, gauche, droite, haut, A, B, C, X, Y, Z, R, L sont codés selon une valeur. Pour le détail de ces valeurs, voir ce post :
https://zarok-rpgmaker.superforum.fr/tutoriels-essentiels-f34/la-gestion-des-touches-t7066.htm

NB : Ne soyez pas trop fantaisistes dans la gestion de vos touches ^^.
Communément, la touche B sert d'annulation (0 du pavé numérique, ou echap de base dans RM) et la touche C d'acceptation (Touche Entrer ou espace de base dans RM). Mais l'important en faites, c'est que vous soyez homogène dans la sélection de vos touches afin que le joueur puisse s'y retrouver facilement.

Bon reprenons.
L'option "Gestion de l'appuie sur une touche" va bloquer l'évènement et attendre que le joueur appuie sur une touche pour continuer. Le code de la touche est ensuite enregistrée dans la variable assignée.

--Touche de déplacement dans le menu--
En fonction de la disposition de votre menu, il faudra effectuer un calcul afin que le curseur se retrouve sur l'option voulu. Par exemple sur un menu simple à la vertical (cf. le menu de base de rpgmaker) la touche haut diminue la position du curseur de 1 et la touche bas augmente le curseur de 1 (en supposant bien sur qu'objet soit l'option 1 et quitter l'option 6).
Pour l'instant, on va simplement modifier la valeur du curseur. On en fait pas attention si la valeur du curseur dépasse ou non le nombre d'option. On va traiter ça dans la prochaine partie (qui sera avant l'affichage).

NB : Ici, on va changer UNIQUEMENT la valeur de la variable "Curseur". C'est une question d'efficacité de lecture et de modification pour plus tard. On sépare bien l'affichage et les traitements (calcul sur les variables etc...).

--Touche active dans le menu--
Si une touche d'acceptation ou d'annulation est pressée, voici comment agir :
Si la touche d'acceptation est pressée, on sort de la boucle
Si la touche d'annulation est pressée, on active l'interrupteur "Annulation" et on sort de la boucle


Exemple :



II-3)
Il est temps maintenant de vérifier si notre curseur est toujours dans le menu. Si ce n'est pas le cas, plusieurs méthode s'offrent à nous (je vais en considérer que 2, les principales peut-être, mais après, il se peut qu'il y en ai d'autre auxquelles je n'ai pas pensé ^^).
1- Une fois au bout du menu, on retourne en haut
2- Si on tente de dépassé le nombre d'option, on reste à la même option.

Déroulement de la méthode 1 :
On test la valeur de curseur. Si elle est strictement inférieur à 1, on la rend égale au nombre d'option, sinon, si elle est strictement supérieur au nombre d'option, on la rend égale à 1.

Déroulement de la méthode 2 :
On test la valeur de curseur. Si elle est strictement inférieur à 1, on la rend égale à 1, sinon, si elle est strictement supérieur au nombre d'option, on la rend égale au nombre d'option.

Exemple pour la méthode 1:



III-
Avant toutes chose, on va commencer par faire disparaitre les images de notre écran puis on va désactiver l'interrupteur de notre menu.
En effet, si on arrive à cet endroit là du code, c'est que notre joueur à décidé de choisir une option (qui peut appeler un autre menu ou qui peut-être une fin en soi) ou alors qu'il a décidé de quitter celui-ci.

Ensuite on test si l'interrupteur "Annulation" (pas besoin si votre menu ne peut-être quitté)
Si annulation est activé => On appelle le menu supérieur, ou alors si on est au menu principale, on ne fait rien (comme ça, on va quitter le menu et revenir sur la carte)
Sinon => On test chaque valeur possible de la variable "Curseur" et on agit en conséquence. Cela peut-être un appel d'un sous-menu (on active l'interrupteur déclenchant l'évènement en démarrage automatique du sous-menu) ou alors on agit en conséquence (par exemple, l'option "travestir son personnage" change le chara du héros en "Fighter-06", bref, faites ce qu'il faut ^^)


J'espère que ce tuto est assez clair et qu'il pourra en aider plus d'un!!!

Surtout, n'oubliez pas que chaque menu est quasiment unique, et que si vous rencontrez certains cas qui n'apparaissent pas dans ce tuto (qui a été fait le plus généralement possible ^^) et que vous n'arrivez pas à résoudre, n'hésitez pas à demander!!


Image final d'un petit menu simple (à 4 options : Magie, Objet, Stats et Quitter) disposé en ligne :




ANNEXES :

Effets pour les images:
Voici en vrac quelques opération simple que vous pouvez combiner pour afficher vos images de manière dynamique et splendide!!

1- Le fondu : Affichez votre image à la position que vous voulez mais avec une opacité nulle puis utilisez la fonction "Déplacer une image" et modifiez l'opacité à 255.
2- Déplacement : Affichez votre image en dehors de l'écran puis avec la fonction "Déplacer une image" ramenez là à la bonne position. (Pour un déplacement horizontale, entrez les bonnes coordonnées en Y dès l'affichage de votre image, et pour le déplacement verticale, entrez les bonnes coordonnées X à l'affichage)
3- Utiliser une transition : Utilisez la fonction : Préparer la transition. Affichez ensuite vos images puis Exécutez la transition
4- Enfin, vous pouvez aussi plusieurs images pour une même option (par exemple, l'image 10 est l'image de votre option et l'image 1 aussi mais avec un ton totalement noir afin qu'elle fasse une sorte "d'ombre". Faites un déplacement de l'ombre verticale vers le haut et un déplacement de l'écriture horizontale vers la gauche qui se rejoigne en même temps au bon endroit (même temps de transition) et là c'est tout beau ).


Mettre en valeur vos images:

1- Image principale en type d'opacité éclairée et les autres en normale
3- Image principale en opacité de 255 et les autres en opacité réduite (180 par exemple)
4- Image principale en ton rouge et les autres normale
5- Menu formant un cercle et l'image principale se trouve au plus près du joueur (principe du menu tournant )



POUR ALLER PLUS LOIN

-Cette section s'agrandira en fonction des questions et des choses qui me passent par la tête (même si à vrai dire, je pourrais mettre des dizaines de choses en plus avec ce qui me passe par la tête, mais je risque de traité vraiment trop de cas différents, et si je m'y met, je risque de faire des tutos pour tout les menus possible et imaginable, ce qui serai un peu long ).

1- Si vous voulez que le curseur apparaisse là où la dernière option a été disposé, il faut utilisé une variable "curseur" par menu et ne pas la réinitialisé à 0 au début de votre menu.

2- Si vous voulez utiliser un curseur et non une modification d'image pour indiquer l'option séléctionné, il faut ajouter une image qui aura l'apparence de votre curseur et lors de la phase II-1) (phase d'affichage dans la boucle), au lieu (ou en plus) de modifier l'apparence de l'image séléctionnée, modifiez aussi la position de l'image represantant le curseur.

3- Si vous faites un menu à plusieurs colonne, il est conseillé de numéroté ses options ligne par ligne puis colonne par colonne.
(exemple avec un menu à 2 colonnes et à 4 lignes :
1 2
3 4
5 6
7 8
Comme ça les touches gauche et droite permettrons d'avancée ou de reculer d'1, et les touches haut et bas d'avancée ou de reculer de 2 (nombre de colonne dans une ligne)