Day.png);">
Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace
RM MV/MZ

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

Sorties: Star Trek: Glorious Wolf - (...) / Sorties: Dread Mac Farlane - episode 3 / News: Plein d'images cools créées par (...) / Sorties: Star Trek: Glorious Wolf - (...) / Jeux: Final Fantasy 2.0 / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

550 connectés actuellement

29191044 visiteurs
depuis l'ouverture

6095 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Blog Alioune Fall

Fairy Tail Constellations

Planète Glutko

ConsoleFun

Le Comptoir Du clickeur

Tous nos partenaires

Devenir
partenaire



Menu tournant

Comment réaliser la base d'un menu principal circulaire, ou ring menu, façon Secret of Mana.

Ecrit par Gari le 09/05/2020


❤ 0

Faire un menu tournant en événements le plus simplement possible






Ce tutoriel suit les bases suivantes :
- changer quelque chose quand la valeur d'une variable change
- faire un menu personnalisé

Il n'est pas ici question de faire un système extrêmement complexe. Des scripts existent déjà sur le sujet, qui feront sans doute cela plus proprement, ainsi que des moyens de programmation plus avancés pour rajouter des options. Cependant, si le faire en événements vous intéresse, vous trouverez ici le fonctionnement théorique de ce type de menu, et sa mise en pratique sur RPG Maker XP.


Un menu tournant/circulaire, c'est quoi ?

Ce nom vient de l'anglais "ring menu", un menu en forme d'anneau popularisé par Secret of Mana (1993). Il se caractérise par sa forme circulaire affichant les options du menu par des icônes tournantes, au lieu du traditionnel affichage par lignes de texte dans une colonne.

image
Secret of Mana, SNES.





I/ Principe de fonctionnement du menu circulaire

Apparence

Si le menu est assez joli visuellement, il peut s'avérer un peu tordu à mettre en place si on ne visualise pas précisément son fonctionnement. Pour cela, partons d'un menu standard :

image

Quand vous ouvrez un menu standard sans mémorisation, votre curseur se trouve toujours sur sa valeur 0, généralement l'inventaire. Les sorts correspondent à la valeur d'inventaire + 1, Equiper à la valeur d'inventaire +2, et Options à +3. La valeur de la position, c'est une variable, qu'on peut déplacer vers le haut ou le bas, et qui additionne ou soustrait. Si vous voulez revenir à l'inventaire d'un coup à partir d'options, il faut donc remettre le curseur sur inventaire, et donc sa valeur à 0 au prochain appui vers le bas. C'est le principe d'une boucle.

Maintenant, pour le menu circulaire :

image

Cela fonctionne pareil, à la différence qu'on utilise les touches gauche et droite. Quand vous appuyez sur droite, vous additionnez 1, et quand vous appuyez sur gauche, vous soustrayez 1. Et quand vous arrivez à votre valeur minimale (0), ou maximale (3), vous rembobinez. La seule différence, c'est que ce n'est pas votre curseur qui bouge, mais les éléments de votre menu (en l'occurence des icônes).

Et elles bougent dans un sens bien particulier.

Le principal piège dans ce menu, c'est le déplacement des icônes lors de l'appui d'une touche. Instinctivement, le cerveau humain veut que quand notre curseur prend +1, nos images se décalent aussi vers le droite. Voici le résultat :

image
La flèche orange à gauche montre le type de déplacement que l'on veut, celle de droite ce qu'on a fait.

Votre curseur va bien s'additionner, mais le résultat visuel est un peu perturbant, car le placement des autres icônes est inversé par rapport à ce qu'on voudrait. Pour remédier à cela, quand vous pressez la touche droite, vous voulez donc que vos icônes se décalent dans le sens inverse des aiguilles d'une montre, soit vers la gauche :

image

Et c'est ce résultat que l'on veut visuellement. Maintenant, on peut passer à la mise en pratique.



La programmation sur RPG Maker XP

Comme indiqué au début, l'objectif est d'aller au plus simple. Voici ce dont vous aurez besoin pour faire un menu circulaire à quatre segments :
- 4 icônes (placées dans Pictures dans ce tuto)
- (optionnel) une image de cercle
- (optionnel) une image assombrissante

- 3 événements communs
- 2 interrupteurs
- 1 variable

La seule chose qui variera selon votre menu, c'est le nombre d'icônes et leur position sur votre écran, et non le reste de la programmation.

Appeler son menu

Pour cela, vous devrez au préalable interdire l'utilisation du menu de base de XP, et utiliser un interrupteur pour interdire/autoriser votre menu principal. A faire en initiant votre jeu, par exemple lors de la prise en main de votre héros, mais également pour chaque événement de type action et autorun (sauf si vous voulez activer votre menu pendant un dialogue ou une scène importante image).

Ce premier interrupteur va conditionner le lancement de votre premier événement commun, qui vérifie si une touche spécifique est pressée pour lancer le menu.

Les choses indispensables à faire dans la condition "touche pressée" est atteinte (sans else) :
- désactiver l'interrupteur qui enclenche l'événement commun : cela permet d'éviter les conflits avec vos deux autres événements communs. Si vous laissez cet événement commun, il continuera d'afficher votre menu quand vous voulez le quitter.
- insérer toutes les images de votre menu, en prenant soin que la première soit mise à valeur (zoom de l'icône, transparence des icônes non sélectionnées, ou changement de couleur). Pour des raisons pratiques, il est recommandé de mettre l'origine (The Origin) à milieu (center).
- à la fin, activer l'interrupteur du curseur, soit enclencher vos deux autres événements communs.


Programmer le curseur du menu

Cela tient dans le deuxième événement commun, qui doit détecter si le joueur appuie sur l'une des touches possibles pour ce menu. L'événement est donc en processus parallèle, avec l'interrupteur précédent en condition.

L'indispensable :
- un bouton de validation, avec à l'intérieur quatre conditions, liées à votre variable curseur, qui comme vu plus haut, peut donc avoir une valeur de 0, 1, 2 et 3 (ou 1, 2, 3 et 4 si vous préférez, la seule condition étant que les chiffres se suivent selon un ordre logique). Selon la valeur de la variable, vous atterrissez dans un sous-menu différent.

- deux conditions reliées aux touches droite et gauche, qui contrôlent la valeur de la variable curseur. Si c'est vers la droite on additionne, la gauche on soustrait, sans oublier de prendre en compte la valeur maximale pour la droite (3), et la minimale (0) pour la gauche.

image

- un bouton d'annulation, pour quitter le menu. La condition comprend donc la désactivation de l'interrupteur curseur, les images du menu à effacer, la variable curseur à remettre à 0, et la réactivation de l'interrupteur autorisant l'ouverture du menu.

image IMPORTANT : Si vous souhaitez utiliser la même touche pour entrer et sortir du menu, vous ne pourrez pas utiliser la condition si "touche [...] est pressée" (Button [...] is triggered) sous peine d'obtenir un bug (le menu se rouvrira automatiquement à chaque fois que vous sortez du menu). Vous devez utiliser "Script", avec la formule Input.trigger?[Input::touchesouhaitée]. Ce code ne validera l'appui qu'une seule fois, même si vous maintenez la touche appuyée. Utiliser cette méthode vous permettra aussi de conserver un code clair, sans imbrication et sans Attendre additionnel (un seul suffit pour chaque événement).


Changer la position des icônes selon la valeur du curseur

Il s'agit de notre troisième événement, celui qui vérifie la valeur de la variable curseur, et positionne les icônes de notre menu en fonction. Pourquoi ne pas l'avoir inséré dans l'événement précédent, affilié aux touches droite et gauche ? Cela est en pratique possible, mais aurait créé un inconvénient majeur : votre héros continuerait à bouger à droite et à gauche, et ce dans votre menu. C'est pour cela que cette partie est à part, car elle permet d'éviter que le héros ne se déplace quand vous consultez votre menu (et accessoirement, elle évite aussi d'avoir à a) doubler cet évenement pour les deux directions, ou b) créer d'autres appels d'étiquettes (Label et Label Jump).
A ce titre, cet événement commun est donc en automatique, avec le même interrupteur de condition que le précédent, les deux étant liés.

Si vous suivez, vous devinez que cet événement contient quatre conditions, liées à la variable curseur. Maintenant, on va partir du principe que vous affichez votre menu exactement au centre de votre écran. C'est ici que nos images insérées en mode centré vont nous servir, car elles éviteront d'avoir à faire des calculs supplémentaires pour être bien positionnées.

Pour ce menu, j'ai choisi comme repère un diamètre de 100 pixels, simple à calculer pour XP. Voici un petit schéma qui récapitule cela :

image

Pour ce tutoriel, on part du principe que notre curseur est statique et qu'il reste en haut. Seules nos icônes bougent. Pour différencier la sélection active (l'icône du haut) du reste, j'ai choisi de la zoomer légèrement (120% au lieu de 100) et d'afficher les autres avec un opacité de 150.

Vous devriez avoir ces coordonnées pour vos images :
image



Conclusion

Vous avez ici un squelette pour créer votre menu. Vous devrezz poursuivre votre menu en événement, ou choisir d'utiliser certains menus de base (comme l'inventaire), ce qui implique des modifications de script.

Une démo est disponible ici pour ceux qui le souhaitent (les RTP sont nécessaires pour avoir le rendu en jeu ; il s'agit d'une version officielle) : https://www.rpg-maker.fr/divers/tutoriels/tuto637_gari_menu_tournant_xp_demo.zip
Ne contenant que le menu en lui-même, les images ont été numérotées de 1 à 6. Cependant, si vous souhaitez garder une marge pour d'autres images qui devraient être masquées lors de l'affichage du menu, il est vivement conseillé d'utiliser une suite de nombres plus élevée, et de préférence une que vous ne réutiliserez pas (par exemple 1000 et suivantes). Pour l'image 6 (celle du halo noircissant), l'image devrait d'ailleurs se situer en-dessous de toutes les autres images de menu (notamment s'il s'agit d'une teinte).


FAQ

Pourquoi RPG Maker XP ?
Ce tutoriel se base sur le tutoriel de Troma, écrit vers 2012, qui utilisait XP comme logiciel. Il est possible de faire un menu similaire sur RPG Maker 2000/2003, avec des adaptations (notamment l'appel des événements, géré différemment, et l'obligation de réaliser un menu intégralement custom le cas échéant).

Je veux pas que mon curseur soit fixe !
Dans ce cas, vos icônes ne se déplacent plus. Vous pouvez choisir une image de curseur qui effectuera le déplacement selon la valeur de la variable curseur, ou jouer sur les couleurs/zoom de vos icônes pour signifier la sélection actuelle.

Je veux plus d'options pour mon menu !
C'est possible. Cependant, en cas de chiffre impair ou d'une valeur supérieure à 6, vous apprécierez sans doute quelques connaissances en trigonométrie pour vous aider à calculer la position de votre image.

Pourquoi préférer une image de teinte à un changement de couleur de l'écran ?
L'option de changement de l'écran économise une ressource. Cependant, cela signifie que vous devez retenir la teinte actuelle de votre écran dans des variables (R, V, B + saturation), et la réafficher en quittant le menu, ce qui n'est pas possible avec les événements de base de XP (ou alors, dépendant de la map ID, créer un gros événement qui stockerait toutes vos teintes selon la map où se trouve le héros). Et le changement de teinte modifie aussi la couleur des icônes. Donc l'image de teinte sous le menu est préférable (il est possible d'utiliser une image de 32*24 et de la zoomer jusqu'à 2000% pour atteindre la résolution de XP).




Ecrit le 27 avril 2020.





gif - posté le 09/05/2020 à 20:32:40 (4782 messages postés) - staff

❤ 0

Egotrip Gigamaxé

Super, c'est une bonne idée de rendre accessible des systèmes qui sont assez éloignés de ce qu'offre RPG-Maker au départ. Merci :).

Itch.io | Twitter | Une IA qui génère des sprites de Pokémon | Cochouchou à la coupe du monde ! | le concours hebdomadaire du meilleur screen !


Nemau - posté le 10/05/2020 à 16:24:09 (52129 messages postés) - honor -

❤ 0

The Inconstant Gardener

Chouette tuto. :lei

(par contre Gari, pense à cocher la case "enlever les balises BR" quand tu converties quelque chose, sinon ça double tous les sauts de lignes ^^ - j'ai édité)



Quel RPG Maker choisir ?Ocarina of Time PCPolaris 03 • Le matérialisme c'est quand tu as du matériel.


Roi of the Suisse - posté le 10/05/2020 à 17:53:24 (29766 messages postés) - honor -

❤ 0

Alerte neige !

Citation:

Vous devez utiliser "Script", avec la formule Input.trigger?[Input::touchesouhaitée]. Ce code ne validera l'appui qu'une seule fois, même si vous maintenez la touche appuyée. Utiliser cette méthode vous permettra aussi de conserver un code clair, sans imbrication et sans Attendre additionnel (un seul suffit pour chaque événement).

Exemple d'utilisation de la commande script Input.trigger :

image
Ceci est le code pour faire défiler 3 images à l'appui des touches directionnelles gauche et droite.



L'essentialisme c'est quand ta voiture a un moteur essence. | Es-tu une star ? | Kujira no Hara | Polaris 03 | Planète Glutko


Gari - posté le 10/05/2020 à 19:13:40 (5899 messages postés) - honor

❤ 0

L'explication n'était pas claire ?

J'ai hésité à rajouter les images du code (ou le code dans la balise), mais je préférais expliquer clairement (tout est relatif) le fonctionnement plutôt que balancer le code, ce qui aurait considérablement allongé la sauce.

Pour ton code RotS, je sais qu'il fonctionne, j'ai juste du mal à comprendre comment tu fais pour que le héros ne bouge pas de cette façon (je pense qu'il s'agit d'un extrait du code de la rame de tramway dans Kujira No Hara, soit le menu de choix des destinations ?).


Roi of the Suisse - posté le 11/05/2020 à 08:54:53 (29766 messages postés) - honor -

❤ 0

Alerte neige !

J’explicite pour qu’on sache quoi mettre après Input.trigger::
Actuellement, on ne sait pas ce qu'il faut mettre à la place de "touchesouhaitée".
Ça ne fonctionne pas si LEFT et RIGHT ne sont pas en majuscule ! Le lecteur ne peut pas deviner ça.

Tu peux figer le héros en mettant « démarrage automatique » au lieu de « processus parallèle ».

L'essentialisme c'est quand ta voiture a un moteur essence. | Es-tu une star ? | Kujira no Hara | Polaris 03 | Planète Glutko


Gari - posté le 11/05/2020 à 13:00:50 (5899 messages postés) - honor

❤ 0

J'ai testé en mettant tout en automatique, avec wait=1 ou pas de wait, mais j'ai le même problème d'ouverture/fermeture du menu qu'avec l'ancienne configuration. C'est pour ça que je préfère séparer les commandes à entrer (processus parallèle) de l'affichage des images (automatique).
Je ne saurais pas expliquer pourquoi ce que tu fais ne fonctionne pas sur ma machine (j'ai essayé deux-trois configurations avec et sans attendre, qui se concluent par soit un son mais pas d'image une fois sur deux, soit un freeze du jeu).


Roi of the Suisse - posté le 11/05/2020 à 13:16:22 (29766 messages postés) - honor -

❤ 0

Alerte neige !

Il faut mettre une page 1 en processus parallèle pour détecter l'entrée dans le menu, et la page 2 en démarrage automatique qui est le menu à proprement parler.

Mettre une commande "attendre 1 frame" ne va faire que perturber les conditions.

L'essentialisme c'est quand ta voiture a un moteur essence. | Es-tu une star ? | Kujira no Hara | Polaris 03 | Planète Glutko


Gari - posté le 11/05/2020 à 18:46:46 (5899 messages postés) - honor

❤ 0

Nope.
En l'état actuel des tests avec deux événements communs (celui qui appelle le menu, et le menu en lui-même), j'ai ces deux réponses (sans wait, le tout sous Input.trigger) :
_ la touche pour entrer et quitter le menu est la même : on entend l'effet sonore pour quitter le menu (je n'en ai pas mis au début du menu) mais le menu ne s'affiche qu'une fois sur 10 environ => on retrouve le problème du log qui "avale" les touches.
_ il y a deux touches différentes pour entrer et quitter le menu : freeze destructeur de la vie.

Je pense qu'un changement de position des interrupteurs peut aussi inflluer (pour l'événement d'appel), même si je ne sais pas encore remédier à ce problème.
Et pour la plupart des pc modestes, un wait dans les événements en processus parallèles/autorun est toujours recommandé.
J'avais remarqué aussi sur Wolf que l'ordre des conditions pour la détection de touches dans le code jouait aussi en jeu (les détections de confirmation/annulation fonctionnent mieux en début qu'en fin de code), je ne sais pas si XP présente le même ordre de lecture (haut vers le bas). La détection de la touche d'annulation étant tout en bas sur l'événement que j'ai créé.
Après, j'ai toujours eu l'image des scripts dans RM (ceux avec le RGSS) avec une construction en deux parties pour les menus : la partie qui gère les commandes (Scene) et celle qui gère l'affichage (Window). Mais bon tout ça c'est un peu le brouillard pour moi :D


Degenpy - posté le 18/05/2020 à 22:32:47 (115 messages postés)

❤ 0

Jeune maker qui essaie des trucs.

Très bon tuto, clair et bien expliqué !

Clique ici pour découvrir Ah'ra Project, élu meilleur jeu 2027 selon l'UFC que choisir.

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts/Plugins | Ressources graphiques / sonores | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers