❤ 0 Custom Menu System par pointeur
Bonjour à toutes et à tous. Ceci est mon premier tutoriel et j'espère qu'il sera compréhensible et qu'il vous servira.
Il existe plusieurs façons de créer un CMS et je viens donc vous proposer une méthode qui, je l'espère, vous facilitera la vie
Dans ce CMS, nous utiliserons essentiellement des variables.
*Bien comprendre ce que sont les variables et les pointeurs vous aidera pour comprendre ce tutoriel (voir les Joke's tuts dans la rubrique RPG maker toutes versions est vivement recommandé). Vous trouverez cependant une explication sur les variables et pointeurs dans ce tutoriel. Je mettrais également des petites étoiles devant des astuces, rappels, ou explications concernant surtout les débutants.
Tout ce qui composera votre menu sera défini par une variable. Que ce soit les différents onglets de votre menu, les objets/armes, personnages etc.
Réfléchissez avant d'agir ! Il vous faudra structurer votre menu et penser à tout ce que vous voulez y mettre. Une fois cela fait, vous pourrez ainsi créez vos variable dans l'ordre car c'est important pour utiliser votre pointeur de la meilleur manière.
Je ne vais pas créer un menu complet mais vous donner un début de menu. Si vous comprenez la philosophie de ce CMS, vous n'aurez pas de difficulté pour le mettre à votre sauce.
Mon code ne prenant pas en compte l'intégralité d'un vrai menu (différents objet, états, héros, magies, options, etc.) il sera donc important de bien comprendre plutôt que de suivre ce code à la lettre. Je tenterai d'expliquer le mieux possible pour que vous puissiez aller plus loin.
Pour commencer, je vais reprendre les différents menus qu'a utiliser Ulrezaj dans sont tuto sur le CMS par switch. Ainsi, nous aurons les variables suivantes.
Variables à créer :
- [001] Objets
- [002] Magie
- [003] Equipement
- [004] Etat
- [005] Options
- [006] Sauvegarder
- [007] Quitter
- [008] Touche Menu
- [009] Ptr Menu
Interrupteurs (switch) à créer :
- Menu
Evènements communs à créer :
- Initialisation Menu
- Pause
- Effacer images
- Menu
- Affichage
- Navigation Menu
Maintenant que tout est créé, il n'y a plus qu'a !
Initialisation Menu :
Nous allons mettre une condition vérifiant que le menu n'est pas activé puis initialiser les variables qui permettrons de naviguer dans le menu. Ptr Menu est le pointeur Menu.(La réinitialisation se fera chaque fois que le menu sera fermé. Donc ne réinitialisez pas les variable Potions/Epée etc sous peine de les voir disparaître à chaque fois que vous fermé le menu ^^).
Nom de l'évènement : Initialisation Menu
Déclenchement : Processus parallèle
Interrupteur de déclenchement : Aucun (ne pas cocher)
Citation: <>Si interrupteur [0001:Menu] sur OFF
<>Variables(s): [0001:Objets] = , 0
<>Variables(s): [0002:Magie] = , 0
<>Variables(s): [0003:Equipement] = , 0
<>Variables(s): [0004:Etat] = , 0
<>Variables(s): [0005:Options] = , 0
<>Variables(s): [0006:Sauvegarder] = , 0
<>Variables(s): [0007:Quitter] = , 0
<>Variables(s): [0008:Ptr Menu] = , 1
<>
Fin
<> |
Pause :
Afin de stopper tout les évènements et éviter de vous faire attaquer dans un A-RPG pendant que vous consulter votre menu, nous allons mettre le jeu en pause.
Nom de l'évènement : Pause
Déclenchement : Démarrage automatique
Interrupteur de déclenchement : 0001:Menu (cocher)
Citation:
Effacer Images :
Cet événement est important surtout si vous utilisez déjà des images pendant le jeu comme une barre de vie ou l'affichage de votre argent ou vos menu de combat dans un RPG classique.
*Astuce : Après avoir mit le premier effacer image, faites, ctrl-C ctrl-V Espace, changer le numéro, Entrée et ainsi jusqu'à 50 ou 126 avec le patch.
Nom de l'évènement : Effacer Images
Déclenchement : Appel
Interrupteur de déclenchement : Aucun (ne pas cocher)
Citation: <>Effacer une image: 1
<>..............................
<>..............................
<>Effacer une image: 50
<> |
Menu :
Nous arrivons donc à l'événement qui permettra de faire apparaître et disparaître le menu par l'appuis d'une touche. J'ai choisi la touche + mais libre à vous de choisir celle que vous voulez.
On attendra donc l'appuis de la touche + puis nous vérifierons si la valeur de la variable Touche Menu est égale à 20 (ce qui correspond à la touche +). Puis nous vérifions l'état du Menu ON/OFF pour savoir si nous ouvrons ou fermons le menu.
Toutes les demandes d' appuis d'une touche utilisé dans ce tutoriel ont l'option Attendre jusqu'à ce qu'une touche soit pressée coché.
Pour l'évènement Menu dans les Touche(s) à prendre en compte seule Touches +, -, *, /, .(20, 21, 22, 23, 24) sera cochée.
*N'oubliez pas d'ajouter les conditions qui interdirons l'ouverture du menu comme un interrupteur combat par exemple car dans mon exemple seul le menu est traité.
*Rappel d'appuis d'une touche : Enregistrer le code de la touche dans signifie que la variable que vous avez choisi sera modifié en fonction de la touche que vous appuierez.
Vous remarquerez qu'il y a un nombre à côté de chaque touche dans Touche(s) à prendre en compte. Ce nombre est la valeur que prendra votre variable lorsque vous appuierez cette touche. Par exemple, en appuyant sur Touche Bas la variable passera à 1, en appuyant sur Touche + elle passera à 20 etc.
Nom de l'évènement : Menu
Déclenchement : Processus parallèle
Interrupteur de déclenchement : Aucun (ne pas cocher)
Citation: <>Appuis d'une touche: [0008:Touche Menu]
<>Si variable[0008: Touche Menu] 20
<>Si interrupteur[0001:Menu] sur OFF
<>Jouer effet sonore: item1
<>Modifier ton écran: (R100,V100,B100,S000),1.0 Sec.
<>Interrupteur(s): [0001:Menu] activé(s)
<>Appeler un évènement: Effacer Images
<>
: Sinon
<>Jouer effet sonore: item2
<>Modifier ton écran: (R100,V100,B100,S100),1.0 Sec.
<>Interrupteur(s): [0001:Menu] désactivé(s)
<>Appeler un évènement: Effacer Images
<>
Fin
<>
Fin
<> |
Affichage :
Alors ici, tout dépendra de la façon dont vous voulez animer votre menu. Si vous optez pour un curseur qui se déplace sur votre menu, vous aurez deux images (celle du menu et celle du curseur qui change de position). Si vous optez pour la solution de changement de couleur, une seule image peux suffire. C'est l'option que je vais choisir pour ce tuto. Vous pouvez également faire un menu avec plusieurs images et animations, à vous d'innover, mais ce n'est pas ce que je vais traiter.
Nous allons vérifier par une succession de conditions les valeurs de nos variable et choisir l'image qui correspondra.
*J'ai créé des images sous paint en 320x240 au format BMP 256 couleurs qui prennent donc la totalité de l'écran en jeu pour créer directement mon menu. Ainsi, dans mon exemple, je ne modifie que l'image n°1 à la position centré (160,120).
*Menu base Objets est l'image montrant l'intégralité du menu avec Objets d'une couleur différente pour montré que nous sommes sur cet onglet et ainsi de suite.
*Menu Objets est l'image du menu Objets qui s'affiche lorsque vous avez sélectionné Objets dans le menu de base.
Nom de l'évènement : Affichage
Déclenchement : Processus parallèle
Interrupteur de déclenchement : 0001:Menu (Cocher)
Citation: <>Si variable[0001:Objets] 0
<>Si variable[0002:Magie] 0
<>Si variable[0003:Equipement] 0
<>Si variable[0004:Etat] 0
<>Si variable[0005:Options] 0
<>Si variable[0006:Sauvegarde] 0
<>Si variable[0007:Quitter] 0
<>Si variable[0009:Ptr Menu] 1
<>Afficher une image: 1, Menu Base Objets, (160,120)
<>
: Sinon
<>Si variable[0009:Ptr Menu] 2
<>Afficher une image: 1, Menu Base Magie, (160,120)
<>
: Sinon
<>Si variable [0009:Ptr Menu] 3
<>Afficher une image: 1, Menu Base Equipement, (160,120)
<>
: Sinon
<>Si variable [0009:Ptr Menu] 4
<>Afficher une image: 1, Menu Base Etat, (160,120)
<>
: Sinon
<>Si variable [0009:Ptr Menu] 5
<>Afficher une image: 1, Menu Base Option, (160,120)
<>
: Sinon
<>Si variable [0009:Ptr Menu] 6
<>Afficher une image: 1, Menu Base Sauvegarde, (160,120)
<>
: Sinon
<>Si variable [0009:Ptr Menu] 7
<>Afficher une image: 1 Menu Base Quitter, (160,120)
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>Si variable [0001: Objets] 1
<>Afficher une image: 1, Menu Objets, (160,120)
<>
Fin
<>Si variable [0002: Magie] 1
<>Afficher une image: 1, Menu Magie, (160,120)
<>
Fin
<>Si variable [0003: Equipement] 1
<>Afficher une image: 1, Menu Equipement, (160,120)
<>
Fin
<>Si variable [0004: Etat] 1
<>Afficher une image: 1, Menu Equipement, (160,120)
<>
Fin
<>Si variable [0005: Options] 1
<>Afficher une image: 1, Menu Options, (160,120)
<>
Fin
<>Si variable [0006: Sauvegarder] 1
<>Afficher une image: 1, Menu Sauvegarder, (160,120)
<>
Fin
<>Si variable [0007: Quitter] 1
<>Retour à l'écran titre
<>
Fin
<> |
Navigation Menu :
Nous arrivons donc à la parti la plus intéressante, l'utilisation du pointeur. Il y aura beaucoup d'explications mais il se peux que cela ne soit pas suffisant pour les débutants, surtout ceux qui ne comprennent pas les variables, mais je vais essayer de rendre les choses le plus claire possible. N'hésitez pas à relire les phrases et les exemples. C'est la parti la plus importante à comprendre !!!
Le code que je vais vous présenter n'est pas complet car le menu lui-même ne l'est pas. C'est un exemple qui vous servira de base/référence. Il n'y a donc pas de déplacement Gauche/Droite, pas de sous-menu, etc. Mais il fonctionne si vous voulez le tester.
L'appuis touche aura Bas, Gauche, Droite, Haut, Décision, Annulation de cochée.
Je vais cependant réexpliquer brièvement comment est composée une variable, ce qu'est un pointeur, comment l'utiliser, utiliser des conditions pour borner notre pointeur en fonction du menu.
Le pointeur est une variable que vous utiliserez pour pointer une autre variable et ainsi agir dessus ou récupérer sa valeur. Pour utiliser une variable en pointeur il faut cocher l'option D'après la variable.
Une variable à une identitée, un nom et une valeur.
Exemple : [0003: Equipement] 0
Lorsque vous utilisez une variable en pointeur, sa valeur correspondra à l'identitée de la variable pointée.
Exemple : [0009: Ptr Menu] 3 Signifie que Ptr Menu pointe la variable dont l'identitée est 3 (la 3ème variable). Donc dans notre exemple, Ptr Menu pointe Equipement.
Pour le menu, nous attendrons l'appuis d'une touche qui augmentera ou diminuera la valeur du pointeur. Il passera donc de 1 à 2 puis 3 etc. Il pointera donc nos variables [0001: Objets], [0002: Magie], [0003: Equipement], etc. Lorsque nous validerons notre choix, le pointeur modifiera la valeur de la variable qu'il pointe.
Exemple : Notre pointeur Ptr Menu est initialisé à 1 et pointe donc la variable [0001: Objets] 0.
[0008: Touche Menu] 1 donc nous appuyons sur la direction Bas et nous augmentons la valeur du pointeur [0009: Ptr Menu] +1.
Notre pointeur Ptr Menu à donc maintenant pour valeur 2 et pointera la variable [0002: Magie] 0
Lorsque nous validerons, nous modifierons la valeur de la variable pointée (Selon votre menu vous utiliserez Rendre égale(s) à, Additionner, Soustraire etc.) J'utiliserai Rendre égale(s) à dans cet exemple.
[0008: Touche Menu] 5 donc nous avons appuyé sur la touche Entrée et d'après la variable Ptr Menu nous modifions la valeur de la variable pointée, ici la variable Magie.
Exemple : [V[0009]]= 1 Donc la variable Magie prend pour valeur 1. [0002: Magie] 1.
Lorsqu'une variable est utilisé en pointeur elle prend la forme [V[0009]].
Borner le pointeur par des condition : Si vous avez bien compris comment allait fonctionner notre menu, vous comprenez donc que le pointeur peux actuellement prendre toutes les valeurs (et ce pointer lui-même d'ailleurs ^^).
Le menu que j'ai choisi est vertical et ressemble donc à ça :
Objets
Magie
Equipement
Etat
Options
Sauvegarder
Quitter
Ce que nous voulons c'est faire défiler notre menu de Objets à Quitter. Et lorsque nous sommes sur Objets, en appuyant sur Touche Haut revenir à Quitter et lorsque nous sommes sur Quitter, en appuyant sur Touche Bas revenir à Objet.
Pour cela nous allons mettre une condition qui vérifie que si Ptr Menu est inférieur à 1 alors on le rend égale à 7 et si Ptr Menu est supérieur à on le rend égale 1.
Jusque là, c'est simple. Mais votre menu sera plus complexe que celui que je vous présente et vous vous êtes embêté à comprendre ce qu'est un pointeur donc ce serai bien de pouvoir l'utiliser d'avantage qu'entre 1 et 7. Donc il faudra bien penser à mettre ces bornes lorsque vos menus sont à 0 (donc ajouter une succession de conditions).
Dans le cas où vous choisiriez Objets, vous pouvez modifier la valeur de votre pointeur à 30 par exemple et mettre un nouveau bornage, par exemple entre 30 et 35.
Ainsi, si vous avez placé vos objets de 30 à 35, votre pointeur naviguera entre ces dernières. C'est pour ça que l'ordre de vos variable est important.
[0001: Objets] 1
[0009: Ptr Menu] 30
[0030: Potions]
[0031: Ethers]
[0032: Tentes]
[0033: Elixirs]
[0034: Antidotes]
[0035: Queues de phénix]
La touche retour devra donc également modifier la valeur du pointeur pour qu'il puisse revenir à 1.
Vous pouvez également utiliser un deuxième pointeur. Et sachez qu'un pointeur peux pointer un autre pointeur et ainsi de suite ^^ Vous pouvez donc faire pleins de choses avec cela, que soit un CMS ou même un système de combat personnalisé.
Nom de l'évènement : Navigation Menu
Déclenchement : Processus parallèle
Interrupteur de déclenchement : 0001:Menu (Cocher)
Citation: <>Appuis d'une touche: [0008: Touche Menu]
<>Si variable [0008: Touche Menu] 1
<>Jouer effet sonore: Cursor2
<>Variable(s): [0009: Ptr Menu] + , 1
<>Si variable [0009: Ptr Menu] 7 > strict
<>Variable(s): [0009: Ptr Menu] = , 1
<>
Fin
<>
: Sinon
<>Si variable [0008: Touche Menu] 4
<>Jouer effet sonore: Cursor2
<>Variable(s): [0009: Ptr Menu] - , 1
<>Si variable [0009: Ptr Menu] 1 < strict
<>Variable(s): [0009: Ptr Menu] = , 7
<>
Fin
<>
Fin
<>
Fin
<>Si variable [0008: Touche Menu] 5
<>Jouer effet sonore: choice2
<>Variable(s): [V[0009]] = , 1
<>
Fin
<>Si variable [0008: Touche Menu] 6
<>Jouer effet sonore: buzzer1[/color]
<>// Cette suite de condition permet de sortir du menu en utilisant également la
<>// Touche d'annulation 0 par soucis de confort.
[color=violet] <>Si variable [0001: Objets] 0
<>Si variable [0002: Magie] 0
<>Si variable [0003: Equipement] 0
<>Si variable [0004: Etat] 0
<>Si variable [0005: Options] 0
<>Si variable [0006: Sauvegarder] 0
<>Si variable [0007: Quitter] 0
<>Modifier ton écran: (R100,V100,B100,S100), 1.0 Sec.
<>Interrupteur(s): [0001: Menu] désactivé(s)
<>Appeler un évènement: Effacer Images
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>
Fin
<>Si variable [0001: Objets] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 1
<>Variable(s): [0001: Objets] - , 1
<>
Fin
<>Si variable [0002: Magie] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 2
<>Variable(s): [0001: Magie] - , 1
<>
Fin
<>Si variable [0003: Equipement] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 3
<>Variable(s): [0003: Equipement] - , 1
<>
Fin
<>Si variable [0004: Etat] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 4
<>Variable(s): [0004: Etat] - , 1
<>
Fin
<>Si variable [0005: Options] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 5
<>Variable(s): [0005: Options] - , 1
<>
Fin
<>Si variable [0006: Sauvegarder] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 6
<>Variable(s): [0006: Sauvegarder] - , 1
<>
Fin
<>Si variable [0006: Quitter] 1 ou plus
<>Variable(s): [0009: Ptr Menu] = , 7
<>Variable(s): [0006: Quitter] - , 1
<>
Fin
<>
Fin
<> |
A vous de jouer !!!
|