BillyJack

Villager
Member
Joined
May 6, 2021
Messages
19
Reaction score
17
First Language
English
Primarily Uses
RMMZ
I am attempting to learn JS for RPG maker and having a bit of an issue in altering the main menu.

I would like the basic for adding a button and putting up a new menu. I've looked across several posts and the internet and nothing I have found works.

Thanks for the help in advance.
 

Shaz

Global Moderators
Global Mod
Joined
Mar 2, 2012
Messages
44,752
Reaction score
15,887
First Language
English
Primarily Uses
RMMV

I've moved this thread to Learning Javascript. Thank you.



I think the best thing to do is figure out how the existing menus are added, and do the same.

What you do is entirely dependent on what the new menu is supposed to do.
 

ZoeTornado

Villager
Member
Joined
Oct 5, 2021
Messages
7
Reaction score
4
First Language
English
Primarily Uses
RMMZ
The post is slightly vague, but one possibility I'm interpreting from your post, adding a "button" to the Menu I assume means you wish to a link/command on the main menu to a different submenu/page than one of the ones listed.

If that is the case, the basic way to do this would be to write a plug-in (aka a .js file) to modify a few of the existing parts of the rmmz_scenes javascript file nondestructively to add in your desired functionality.

You'll want to open up a plain text editor or IDE and create a .js file.
Then save it to your gamefolder/js/plugins/ folder under whatever you want to call it.
Then you'll want to add it to the game plug-ins list in the RMMZ/MV editor wherever (this example shouldn't matter, but usually towards the bottom of the list is safe) and turn it ON once there's working code in there.

JavaScript:
//set up up your alias if you wish so you can "save" a version of anything you modify as it was
//before you mess with it using it
youralias = youralias || {}; //replace youralias with whatever you want to call your little library

//this is how you "save" something to that alias by making up a new method that is attached to your
//alias library (called a namespace) which I recommend be similar to the original origin and name of the
//one you are overwriting (usually I just use old_className_methodName so i can find the original easily to look at)
//and then assigning the address of the the old method as though it were a variable (not calling it directly, so no parenthesis)
youralias.old_Scene_Menu_createCommandWindow =  Scene_Menu.prototype.createCommandWindow;

//now here you WILL use the actual name of the function as it is found in the original code, because you are
//essentially replacing it. Thats why we save the old code to an alias in case you screw something up or
//if you need it to do basically the exact same thing but you want to add something around it in order like setting up
//a new variable or having it run a new method before doing the exact functionality it already did.
//In this case it is Scene_Menu.prototype.createCommandWindow()

Scene_Menu.prototype.createCommandWindow = function() {
    const rect = this.commandWindowRect();
    const commandWindow = new Window_MenuCommand(rect);
        //----------------------------------------------------------------vvvvvvvvvvvvvvv
        //somewhere in this list add the button you need on the main menu list
        //I dont think order matters but if it does just put it where you want it
    commandWindow.setHandler("item", this.commandItem.bind(this));
    commandWindow.setHandler("skill", this.commandPersonal.bind(this));
    commandWindow.setHandler("equip", this.commandPersonal.bind(this));
    commandWindow.setHandler("status", this.commandPersonal.bind(this));
    commandWindow.setHandler("formation", this.commandFormation.bind(this));
    commandWindow.setHandler("options", this.commandOptions.bind(this));
    commandWindow.setHandler("save", this.commandSave.bind(this));
    commandWindow.setHandler("gameEnd", this.commandGameEnd.bind(this));
    commandWindow.setHandler("cancel", this.popScene.bind(this));
        //--this is an example with dummy method names, but here you would add
        //the keyword you want to associate with that new submenu or whatever you want this
        //command to point to using this.nameOfTheMethod.bind(this) keep the "this" keyword
        //as it means it is pointing to the Scene_Menu instance you are placing this inside of.
        //You can create a new method to handle moving over to the new Submenu or in the case of
        //adding an existing plug-in sometimes they already have a script call which handles opening
        //that Scene or whatnot and just put the name of that scriptcall in between the this.___.bind(this)
        //
        //My example using dummy method names (without the // in front as that comments it out):
    //commandWindow.setHandler("example", this.exampleMethod.bind(this));
        //----------------------------------------------------------------^^^^^^^^^^^^^^^
        
    this.addWindow(commandWindow);
    this._commandWindow = commandWindow;
};


//Then you will need to create a method to handle transferring over to the new Submenu or opening the window
//or whatever functionality your trying to add via new entry on the menu command list.
//I would recommend just copying and altering an existing method that does something similar if possible.
//Example:

//this is a dummy method but it would be an example of how to do a simple Scene transfer
//ie: putting a new Scene on top of the existing Scene such that when you exit the new scene it will
//return to the main menu...


Scene_Menu.prototype.commandExample = function() {
    SceneManager.push(Scene_Example); //insert the name of your new Scene where Scene_Eaxmple is
};

//you would then put this same method name (in this case commandExample) inside the code we looked at earlier
//aka the this.commandExample.bind(this) snippet

//IF you need the new menu to go through selecting a character first in a similar manner to when you open up
//the Equip Menu for example, then instead what you would do instead is slightly different
//First: instead of a new method along the lines of commandExample(), instead you would put\
//  this.commandPersonal.bind(this)
//inside your createCommandWindow function like so:
//  commandWindow.setHandler("example", this.commandPersonal.bind(this));
//and then modify the onPersonalOk() method like this to include your new option since this is where
//commandPersonal() leads to which determines where it goes next after you select your character:

youralias.old_Scene_Menu_onPersonalOk = Scene_Menu.prototype.onPersonalOk;
//^^^doing this "saves" a reference to the original version before you messed with it you can call if you need to
Scene_Menu.prototype.onPersonalOk = function() {
    switch (this._commandWindow.currentSymbol()) {
        case "skill":
            SceneManager.push(Scene_Skill);
            break;
        case "equip":
            SceneManager.push(Scene_Equip);
            break;
        case "status":
            SceneManager.push(Scene_Status);
            break;
    //this is where we add the new functionality for your new button:
    //-------------------------------------------------------vvvvvvvvvv
        case "example": //put whatever unique keyword you chose to represent that command earlier (called a symbol)
            SceneManager.push(Scene_Example); //put the name of your new Scene here where "Scene_Example" is
            break;
    //--------------------------------------------------------^^^^^^^^^       
    }
};

//doing either of these things should have successfuly "added" a new "button" to the Main Menu commands alongside
//existing ones like Item or Equip etc.

If this was not what you meant, you can still use the ideas here (looking at existing code, modifying it nondestructively, and plugging in things to point where you want it to go, etc) to achieve what it is you meant. This example assumes you already have a Scene to go to, ie one from another plug-in or custom made, and not by any means does it describe how to make one of those from scratch (though it is similar in fundamentals, looking at existing code and modifying it to suit your new needs) and is a more extensive tutorial.

Hope this helped!
 

Attachments

  • tutorial.js
    6 KB · Views: 5

ZoeTornado

Villager
Member
Joined
Oct 5, 2021
Messages
7
Reaction score
4
First Language
English
Primarily Uses
RMMZ
If you are wanting to modify the windows on the menu screen, change their size/placement/content, I would look at Scene_Menu in the rmmz_scenes.js file and try to understand how it puts everything together. You'll notice most of those windows inside it are tailor-made for their specific functions and have a unique class name (Window_Gold, etc.). If you want to modify how one of those behaves look to those specific classes in the rmmz_windows.js file and read how it puts things together.

Usually you'll want to look at the Window_Whatever class code to change stuff that goes inside the window (content, placement of content within).

If you want to put them in different spots or make them a different size or appear at different times or feed them different outside information, that is usually in the Scene_Whatever class portion of the code when the scene puts together all the pieces it usually creates an instance of the new windows and tells it where and how big to make it, etc.

Sometimes specifically with a few of the windows from the editor base code have the location and size variables defined inside the Window_Whatever class instead of the scene, you'll just have to check. Most custom windows will be written more extensible and not rigidly define those parameters internally, but its a case-by-case thing as I can't speak to how others write their code.

If you're writing your own custom Window class to hold special data (very common to want in custom functionality) I would look and seeif any existing Window_Whatever classes already do something very similar to what you want and then use it via inheritance when creating your new Window_Whatever in the
Window_NewWhatever.prototype = Object.create(Window_Parent.prototype);
section of the class definition of your new one. Doing this you can not have to "reinvent the wheel" and can overwrite any paticular sections inside it that don't behave as you would like already.

Some common ones are:
  • Window_Selectable
    • has basic functions for interacting with contents
  • Window_Command
    • has basic "choose from a list" functionality
  • Window_Base
    • this is the most basic window you'll probably use, just has code to make an empty window
  • Window_StatusBase
    • this has functionality for displaying certain content found in Main Menu screens like drawing icons and character images etc
  • Window_ItemList
    • this has functionality for populating and interacting with lists of game items (actual items, skills, equipment, anything that you want to dynamically populate the list with stuff relevant to characters etc)
Again just look at what they do as is, then see how you can modify or insert something to do what you wish instead is gonna be the main way to do stuff with code in this program without headaches. I'm still learning myself, so some of what I say may be slightly inaccurate or maybe not the best practice, though I try to not recommend stuff I haven't messed with firsthand already.
There's lots of good info on these forums, and youtube has tons of good videos for learning about javascript. It's really not that bad, I'm not a pro coder by any stretch but was able to make some custom plugins fairly shortly after reading up on the forums, looking at other working code, and brushing up on some javascript basics. It is important to know that javascript does handle certain things slightly differently than most other programming languages like python or C# or Ruby or whatever, and learning those eccentricities will help you read the code soooo much easier.

Good luck!
 

BillyJack

Villager
Member
Joined
May 6, 2021
Messages
19
Reaction score
17
First Language
English
Primarily Uses
RMMZ
Sorry for taking so long to get back. Work took over my life for the past week.
I should have been more clear.

What i want is on the main menu I want a button. I want this button to open a window. I want to make a recipe based crafting setup and cant find one that does exactly what I want. Plus I might want to adjust how it looks to have a more personal touch.

I know coding in different forms of C and mostly used to a "Function main" style programming so this is a bit different for me. I'm going to study your examples and see if I can get it working.
 

Latest Threads

Latest Posts

Latest Profile Posts

SpaceBot wrote on DoctorMolotov's profile.
I miss you :kaocry:
I have game ideas, but none of them would fit the theme for IGMC. XD
Why the heck do I keep comparing my games to ones made by huge companies? I'd love them to have that level of polish but I'm simply not good enough.
Hell of a day at the London Games Market! :D

1656892272017.png

Check out my haul!

Forum statistics

Threads
123,306
Messages
1,155,664
Members
161,730
Latest member
my_birthday1205
Top