Créer son menu custom partie 1/3.

Bonjour tout le monde,

Voilà j'ai pensé faire un tuto pour apprendre à customiser un menu pour son projet sans avoir de réelles connaissances en script et de manière assez simple.

Le tuto sera en 3 parties pour bien ce repérer.

-Partie 1,modification de base
-Partie 2,ajout d'options
-Partie 3,ajout de scripts


On va pouvoir commencer,mais avant tout copier et coller le script scene_menu au dessus de main.


Partie 1,modification de base :

On va commencer par les choses basiques dans la partie 1,puis on va pousser un peu plus dans la customisation de votre menu par la suite.

Voyons ensemble 5 petites choses essentielles,qui pourront même vous servir pour modifier d'autres script dans rpg maker xp.

1-Paramétrer X,Y
2-Changement de police
3-Changement de couleur
4-Changement de taille
5-Opacity
6-Mettre un fond


1-Paramétrer X,Y.(abscisse et ordonnée)

Petit rappel:

Donc dans les script c'est pareil,lorsqu'on voit (340,234)la plus part du temps cela correspond à la position d'un élément,pas forcément la fenêtre,parfois le texte,une jauge,une image,ect...en modifiant c'est coordonnées vous déplacerez l'élément.

Voyons le menu de base de rpg maker xp.

Menu de départ:

Maintenant avec un exemple de X,Y modifiés:

X,Y modifiés:

Pour y parvenir rien de plus simple,dans le script scène_menu rendez vous à la ligne 47.

Code:

    
# Make play time window
    @playtime_window = Window_PlayTime.new
    @playtime_window.x = 0
    @playtime_window.y = 224
    # Make steps window
    @steps_window = Window_Steps.new
    @steps_window.x = 50
    @steps_window.y = 320
    # Make gold window
    @gold_window = Window_Gold.new
    @gold_window.x = 20
    @gold_window.y =400#416
    # Make status window
    @status_window = Window_MenuStatus.new
    @status_window.x = 150#160
    @status_window.y = 0

A quoi cela correspond t-il ? D'abord on peu voir les fameuses coordonnées X,Y,puis aussi des noms qui vont avec PlayTime,Steps,Gold,MenuStatus,donc les coordonnées correspondent à l'emplacement de leurs fenêtres (non pas au textes internes aux fenêtres,même si ils ce déplaceront avec bien entendu)on verra par la suite comment créer nous même de nouvelles fenêtres avec d'autres informations pour notre menu.

Donc modifiez ces coordonnées comme écrit dans le code par exemple.

Petite astuce,pour toute modifications de lignes,textes,ect...vous pouvez mettre un # devant pour vous souvenir de l'ancienne mesure,le # mettra alors le texte en vert dans vos script ce qui voudras dire qu'il ne prends plus en compte c'est lignes.Attention à mettre ça en fin de ligne pour pas créer des bugs.

Si vous avait suivis,vous avez pu voir que la fenêtre du menu marqué 'item,compétence,ect... ' n'apparait pas dans la liste des fenêtres.
Tout simplement car vous devez vous même rajouter des lignes.
Vous allez donc lignes 27 et vous rajoutez :

Code:

  
    @command_window = Window_Command.new([160, [s1, s2, s3, s4, s5, s6])
    @command_window.index = @menu_index
    @command_window.x = 0
    @command_window.y = 61
    
    @command_window.opacity = 255

Voila maintenant vous pouvez déplacer toutes vos fenêtres.Le chiffre 160,correspond à la largeur de la fenêtre.On rajoute aussi une ligne d'opacity qui nous servira par la suite.

X,Y menu choix déplacé:

Maintenant que l'on sais comment déplacer les fenêtre on va voir comment modifier le contenu.D'abord la police d'écriture,attention tout de même si vous mettez des polices que vous seul avait sur votre PC les gens ne verront pas le texte,donc penser à soit mettre Arial,Tahoma,des police par defaut window par exemple,ou alors copier la police dans votre dossier du projet pour que les gens puisse l'avoir.

Pour commencer avant d'apporter de nouvelles modifications on va ajouter des infos dans notre script.
Des infos pour chaque fenêtre.
Donc on va copier au dessus du script au dessus de la ligne 1 ces petits bloc de textes.Chaque bloc est lié aux fenêtres,des lignes on été ajoutées pour simplifier les modifications.

Gold:

Playtime:

MenuStatus:

Steps:

Parfois on voit en fin de ligne un ',2',cela signifie que le texte partira de droite à gauche,par exemple là pour gold ça permet de pouvoir augmenter le chiffre de l'argent sans pour autant empièter sur le 'G',ça pourras vous etre utile par la suite,par contre ça s'applique par defaut que aux scripts liés au window base:

Exemple:

Code:

 self.contents.draw_text(124-cx, -8, cx, 32, $data_system.words.gold, 2)

2-Changement de police :

Exemple:

Code:

self.contents.font.name = "Tahoma"

Code:

self.contents.font.name = "Arial"

Remplacez soit les noms de police soit copier la ligne,généralement si vous ne savez pas ou la copier ou que ça bug copier là de préférence en dessous une phrase type :

Code:

self.contents = Bitmap.new(width - 32, height - 32)

3-Changement de couleur :

Pour changer les couleurs,trouvez ces lignes un peu partout dans les partie de script ajouté,sachant que si vous voulez changer la couleur de gold,allez dans le petit morceau de script qu'on à ajouter window_gold,pas la peine d'aller modifier d'autres trucs un peu partout pour trouver ou peut être la ligne qui correspond:

Code:

 self.contents.font.color = Color.new(130, 130, 85, 255)

Correspond à R,V,B,transparence.
Rouge,vert,bleu.Diminuer la transparence comme les autres chiffres toujours entre 0 et 255.
Pour vous guider vous pouvez aller sur ce genre de site :
https://web.njit.edu/~kevin/rgb.txt.html

4-Changement de taille :

Exemple (vous avez juste à modifer le chiffre pour augmenter ou diminuer la taille de la police):

Code:

self.contents.font.size = 22

5-Opacité :

De 0 à 255,0 étant une invisibilité totale de la fenêtre.

Code:

self.opacity = 0

Après avoir fait tous ça,vous devriez obtenir quelque chose comme ça (en mettant l'opacité de chaque fenêtre à 0) :

Exemple:

Alors maintenant quoi qu'on fait ??

6-Mettre un fond :

A moins que vous voulez un menu avec un fond tout noir 3 possibilités s'offre à vous,la première remettre l'opacité partout à 255,soit d'ajouter ces lignes :

Code:

@spriteset = Spriteset_Map.new

Code:

@spriteset.dispose

Code:

@spriteset.update

Coller les ici (toujours dans votre scène menu,si vous avez bien coller tout les petits codes du dessus c'est vers la ligne 230) :

Code:

  def main
    
    @spriteset = Spriteset_Map.new
    
    # Make command window
    s1 = $data_system.words.item
    s2 = $data_system.words.skill
    s3 = $data_system.words.equip
    s4 = "Statut"
    s5 = "Sauvegarder"
    s6 = "Quitter le jeu"
    @command_window = Window_Command.new(160, [s1, s2, s3, s4, s5, s6])
    @command_window.index = @menu_index

puis plus bas vers ligne 300

Code:

    # Dispose of windows
    @command_window.dispose
    @playtime_window.dispose
    @steps_window.dispose
    @gold_window.dispose
    @status_window.dispose
    
    @spriteset.dispose

et enfin presque juste en dessous :

Code:

  def update
    # Update windows
    @command_window.update
    @playtime_window.update
    @steps_window.update
    @gold_window.update
    @status_window.update
    
    @spriteset.update

Exemple map fond:

La 3ème et dernière solution (la plus classe   ) ça va être de mettre une image de fond (de taille 640x480 de préférence).

Pour cela même principe que sur le dessus on va coller 2 lignes.

Code:

     @sprite = Sprite.new
    @sprite.bitmap = RPG::Cache.picture("PANDA1")

Vous les placez de cette façon :

Code:

class Scene_Menu
  #--------------------------------------------------------------------------
  # * Object Initialization
  #     menu_index : command cursor's initial position
  #--------------------------------------------------------------------------
  def initialize(menu_index = 0)
    @menu_index = menu_index
    
     @sprite = Sprite.new
    @sprite.bitmap = RPG::Cache.picture("PANDA1")

N'oubliez pas de mettre l'image appeler 'PANDA1' dans votre dossier pictures,si l'image porte un autre nom changer le aussi dans la ligne de script pour que ça corresponde.

menu avec image de fond:

Bon voilà c'est terminé pour la partie 1.J'espère c'était simple et bien expliqué,n'hésitez pas à me dire si quelque chose ne vas pas.Dans la prochaine partie on vera comment ajouter des nouvelles options dans son menu et modifier le curseur de selection des choix.

rah làlà.
Arretez de modifier les scripts directe à la source, monkey patché les quoi.
C'est un coup à foutre la merde dans les scripts et les futurs que tu peux ajouter plus tard.

Au pire des cas copier coller le script à modifier et mettez le au dessus de main.
Ainsi celui de base ne change pas, et le logiciel prendra en compte le script au dessus de main.

Sinon c'est bien, je t'ajoute des points.

Sauf que ça nous permet de comprendre un peu plus sur la modification des scripts, pour les débutants dont je fais partie. Il faudra que je m'amuse un peu plus avec ces modifications même si c'est vraiment limite. Changer de couleur, changer de police, changer de position.

Merci pour ce tuto.
Hâte de voir en quoi ça retourne la suite

Ca change pas ce que j'ai dis.

Citation :

Au pire des cas copier coller le script à modifier et mettez le au dessus de main.
Ainsi celui de base ne change pas, et le logiciel prendra en compte le script au dessus de main.

Beaucoup de gens on des bugs de lancement / bug système à cause de modifications apporté à la source.

Les scripts externe que l'on ajoute au projet se base sur les scripts de base. Si ils sont modifié le script ne peux pas marcher ou mal marcher.

Jin a écrit:

Au pire des cas copier coller le script à modifier et mettez le au dessus de main.
Ainsi celui de base ne change pas, et le logiciel prendra en compte le script au dessus de main.

Mais au tout début genre ligne 7 j'ai bien précisé :

Kasbak a écrit:

'On va pouvoir commencer,mais avant tout copier et coller le script scene_menu au dessus de main.'

Justement pour pas modifier la source et après pareil pour gold,ect... tout est ajouter dans le scène_menu pas de modification à la source.

Accroma a écrit:

Sauf que ça nous permet de comprendre un peu plus sur la modification des scripts, pour les débutants dont je fais partie. Il faudra que je m'amuse un peu plus avec ces modifications même si c'est vraiment limite. Changer de couleur, changer de police, changer de position.

Merci pour ce tuto.
Hâte de voir en quoi ça retourne la suite

Ouai là c'est limite,mais celui qui sais pas ça pour son menu ça peu être gênant par la suite,donc autant l'expliquer dès le début,mais le second tuto ça va devenir plus utile,en tous cas j'espère^^.

J'ai pas encore pris le temps de lire mais c'est cool que tu l'es fais! Tu peux être sur que je vais lire

Merci, c'est franchement pratique pour les amateurs de voir ce genre de chose en reprenant les bases.

Super intéressant! Merci beaucoup!

Désolé Kasbak, j'ai pas lu tout le tuto, j'ai regardé les premières ligne pour voir si tu le mentionnais, mais j'ai pas vu ^^
Autant pour moi.
Dans ce cas c'est très bien.

Merci à Kasbak d'avoir concocté ce tuto. Rien que cette 1ère partie permet aux débutants de personnaliser un brin leur projet
Juste une chose : lorsque je copie les blocs des textes (Gold,Playtime...) au-dessus de la ligne 1 de Scene_Menu comme tu le suggère, cela m'efface le texte de la fenêtre concernée dans le Menu de mon jeu.
Cela dit j'ai trouvé la parade en explorant un peu et en allant modifier directement les scripts concernés (Window_Command, Window_Gold...etc...)

En fait c'est surement que la fenêtre est là mais positionnée ailleurs par rapport au x y. En tout cas content que ça te serve ce tuto