Créer une interface de menu en 7 étapes SANS utiliser Ruby [PSDK]

7 Réponses • 1379 Vues

Bonjour,

Je vais vous expliquer comment créer votre propre interface de menu en utilisant uniquement des événements communs sous PSDK.
Attention, il existe peut être une méthode plus simple, mais celle-ci fonctionne très bien pour moi et fonctionnera surement tout aussi bien dans vos projet.

Vous pourrez obtenir ce genre de résultats :


(interface du menu pour Pokémon Mistral, peut encore changer)

Première étape : Dessiner l'interface

Pour dessiner une interface, chacun sa manière de faire, certains sauront être bien plus créatifs que moi, je ne peux évidemment pas vous donner de superbes interfaces toutes faites mais si vous voulez essayer avant de vous mettre au dessin, voici quelques images très simples qui feront l'affaire :

Spoiler
















Une fois vos interfaces réalisées (ou téléchargées) on peut préparer le terrain pour les implémenter.

Deuxième étape : Préparer le terrain

Vous aurez besoin de :
1 Interrupteur
-> On le nommera "Interrupteur Interface Menu" dans la suite du tuto

1 Variable
-> On la nommera "Variable Interface Menu" dans la suite du tuto

4 Events Communs  : (En réalité on a pas besoin d'autant d'évents commun mais je préfère tout diviser pour que ce soit plus compréhensible)
 
-> On les nommera :
    - "Interface Menu Main" => Servira à la détection des touches préssées par le joueur
    - "Activation du Menu" => Servira à la détection de l'appel du menu
    - "Affichage Image Menu" => Pour afficher les images de l'interface
    - "Affichage Item" => Pour lancer les différents items (Pokédex, sac, carte dresseur...)
dans la suite du tuto


Troisième étape : Détecter l'appel du menu

Rendez-vous dans l'évent commun "Activation du Menu"
Remplissez le comme suit :

Déclenchement : 2-Processus Parallèle
Interrupteur conditionnel : Un des interrupteurs qui restent toujours ON pendant le jeu (vous pouvez en créer un nouveau et le mettre sur ON dès le début si vous voulez)

Liste des commandes d'événement :

 
<>Condition : Script : Input::Keyboard.press?(Input::Keyboard::V)
    <>Interrupteur [XXXX: Interface Menu] = Activé
    Fin Condition

C'est tout ! Avec ça on va détecter si le joueur appuie sur "V" et dans ce cas on activera notre interrupteur.


Quatrième étape : "Afficher Image"

Remplissez cet event comme suit :
Déclenchement : 0 - Appel

Cet event commun permet d'afficher la bonne image en fonction des choix du joueur, les choix du joueurs auront pour effet de modifier la valeur de la variable "Interface Menu" (par exemple avec les images données la variable pourrait avoir ces valeurs :
0 pour le pokédex
1 pour les pokémon
2 pour le sac
3 pour la carte dresseur
4 pour les options
5 pour sauvegarder
6 pour quitter)

Donc on commence par effacer l'image Numéro 1 et ensuite c'est un simple enchaînement de condition et d'affichages d'image :

<> Effacer image N.1
<> Condition : Variable[XXXX: Interface Menu] == 0
    <> Afficher image : N.1, "Nom de l'image correspondant au pokédex", Coin (0,0), (100%,100%), 255, Normal
    <>
 :    Sinon
    <> Condition : Variable[XXXX: Interface Menu] == 1
        <> Afficher image : N.1, "Nom de l'image correspondant au menu pokémons", Coin (0,0), (100%,100%), 255, Normal
        <>
    :    Sinon
...
... Continuer pour chaque image
...

Cinquième étape : "Affichage Item"

Remplissez cet event comme suit :
Déclenchement : 0 - Appel

On va faire la même chose qu'à l'étape 4 sauf qu'ici on ne détermine pas quelle image afficher mais plutôt quel item appeler (quand le joueur sélectionne un item)

<> Effacer image N.1
<> Condition : Variable[XXXX: Interface Menu] == 0
    <> Script : Graphics.freeze
    <> Attendre 12 frames
    <> Script : GamePlay::Dex.new.main
    <> Attendre 12 frames
    <> Script : Graphics.transition
    <>
 :    Sinon
    <> Condition : Variable[XXXX: Interface Menu] == 1
        <> Script : Graphics.freeze
        <> Attendre 12 frames
        <> Script : call_party_menu(::Yuki::Var::TMP1, $actors, :menu)
        <> Attendre 12 frames
        <> Script : Graphics.transition
        <>
    :    Sinon
...
... Continuer pour chaque item
...

Liste des items :

Pokédex = GamePlay::Dex.new.main
Pokémon = call_party_menu(::Yuki::Var::TMP1, $actors, :menu)
Sac = GamePlay::Bag.new.main
Carte Dresseur = GamePlay::TCard.new.main
Options = GamePlay::Options.new.main
Sauvegarder = GamePlay::Save.new.main (pose quelques soucis, utilisez la commande "forcer_sauvegarde" pour le moment, vous pouvez demander la confirmation au joueur avant)

Petite subtilité : pour l'item "quitter" vous n'avez pas besoin de script, désactivez juste l'interrupteur "Interface Menu" dans la condition et Effacez l'image N.1

Pourquoi ces "Attendre 12 frames" ?
Parce que pour certains menus (notamment le pokédex et le sac, il faut un petit temps de chargement quasiment imperceptibles, attendre 12 frames permet de laisser le temps aux Graphics de fonctionner correctement, sans cela vous pourriez avoir des freeze)

Voilà, on passe à la grosse partie (pas si grosse que ça)

Sixième étape : Animer l'interface

Ici on veut pouvoir passer dans les différents états de l'interface, chaque état correspond à une image et aussi à un item à appeler (Équipe pokémon, Carte Dresseur, Sac...)

Dans le résultat final on veut :
Pouvoir passer d'un état à un autre en utilisant les flèches
Activer un état en appuyant sur Entrée ou sur C (donc par exemple appeler le pokédex)
Quitter le menu en appuyant sur X

On va gérer ça dans "Interface Menu Main"
-> On commence par appeler l'évent "Afficher image" qui s'occupe d'afficher la bonne image en fonction des actions du joueur. Celle-ci dispose encore de la variable "Interface Menu" et va donc afficher en premier la dernière image utilisée (ce qui est pratique)
-> Ensuite on gère l'utilisation des flèches (Gauche - Droite ici mais vous pouvez aussi faire Haut - Bas en fonction de votre interface)
-> Puis on gère la sélection de l'item
-> Et enfin la fermeture du menu

Allons dans l'event Interface Menu Main, remplissez le comme suit :
Déclenchement : 1- Automatique
Interrupteur conditionnel : XXXX : Interface Menu

<> Événement commun : Afficher Image
<> Condition : La touche Droite est pressée
    <> Commentaire : On ajoute 1 à la variable à chaque appui de la touche le tout modulo le nombre d'items, ici on a 6 items
    <> Condition : Variable[XXXX : Interface Menu] == 5
        <> Variable[XXXX : Interface Menu] = 0
        <>
      :  Sinon
        <> Variable[XXXX : Interface Menu] += 1
        <>
        Fin Condition
    Événement commun : Afficher Image
    <>
  : Sinon
    <> Condition : La touche Gauche est pressée
        <> Commentaire : On retire 1 à la variable à chaque appui de la touche le tout modulo le nombre d'items, ici on a 7 items
        <> Condition : Variable[XXXX : Interface Menu] == 0
            <> Variable[XXXX : Interface Menu] = 5
            <>
          :  Sinon
            <> Variable[XXXX : Interface Menu] -= 1
            <>
            Fin Condition
        Événement commun : Afficher Image
        <>
      : Sinon
            <> Condition : La touche A est pressée
                <> Événement commun : Afficher menu
                <>
              : Sinon
                <> Condition : Script : Input::Keyboard.press?(Input::Keyboard::X)
                    <> Effacer image : N.1
                    <> Interrupteur [XXXX : Activation du Menu] = Désactivé

Fin de toutes les condtions

Bon c'est pas mal mais il manque juste un petit truc, parce que là ça ne va marcher qu'une fois, il faut que tout cela se boucle tant que l'interrupteur "Interface Menu" n'est pas désactivé donc si on appuie sur les flèches ou sur les touches de validation, ça doit continuer, pour ça rien de plus simple ajoutez ces trois lignes à la fin de l' évent commun "Afficher Image"

<> Interrupteur [XXXX : Interface Menu] = Désactiver
<> Attendre : 3 frames
<> Interrupteur [XXXX : Interface Menu] = Activer

Ici on efface pas l'image mais on relance tout le processus en réactivant l'interface.

Et ceci à la fin de l'évent commun "Afficher Item"

<> Condition : Variable[XXXX : Interface Menu] == 5
    <> Effacer image N.1
    <> Interrupteur [XXXX : Interface Menu] = Désactiver
    <>
    : Sinon
    <> Interrupteur [XXXX : Interface Menu] = Désactiver
    <> Attendre : 3 frames
    <> Interrupteur [XXXX : Interface Menu] = Activer

Cela permet de ne pas relancer le menu après une sauvegarde (sinon le menu serait allumé à chaque fois qu'on revient en jeu)


C'est presque fini !

Septième étape : Retirer l'ancien menu

Ajoutez ce script (Éditeur de script > Placez vos script après)

class Scene_Map
    def call_menu
    $game_temp.menu_calling = false
    end
end

Voilà vous avez fini ! Enfin presque... Vous pouvez encore ajouter des effets sonores, cela rendra encore mieux !

J'espère avoir été utile à certains :)
N'hésitez pas à me poser des questions !

« Modifié: 22 juin 2018, 19:23:35 par Splifingald »

Fonctionnalité PSDK

Super tuto pour ceux qui ne connaissent pas la programmation. Par contre "sans ruby" c'est inexact vu que tu utilises des portions de code pour les conditions :ahde:.
Oui j'avoue y'a un tout petit peu de Ruby mais c'était pour le putaclic et puis ce que je veux dire c'est surtout qu'il n'y a pas besoin de comprendre le Ruby pour faire ça.

Nuri Yuri

HostMaster

Ca serait jamais rentré de toute façons "sans savoir programmer" x)
ln(yo) = <3
Bonjour j'ai suivis votre Tutoriels sur PSDK mais aucun des menus s'affiche ni se lance et mon jeu se met  bien en pause sauf sans les menus et je n'arrive pas à réglé le probléme
Je viens de régler le soucis pour l'affichage du menu par contre quand je clique sur entré ou c aucun Menu (Sac,Pokemon) ne se lance :/

RaimeiHope

Mappeur

tu as oublié de preciser qu'il faut imperativement mettre l'event commun affichage item dans l'interface menu main
Hello,

Merci pour le tuto, fonctionne super bien.
Pour le bug de la sauvegarde, je suis arrivé à le régler

Dans le script :
GamePlay::Save.new.main

Ajouter la ligne :
$running = false

Ce qui nous donne dans l'événement  :
$running = false
GamePlay::Save.new.main

Je viens de le tester, ça fonctionne très bien sans aucun problème.

« Modifié: 06 octobre 2019, 17:53:03 par Avori »


There was an error while thanking
Thanking...