Creating Custom Menu for Plugin

[MenaKatep]

So, I'm definitely having some trouble figuring out exactly what I need to do. I know Javascript but I can't seem to follow the flow of these Javascript functions within the core scripts. I have created a new scene based off of scene_menubase(which scene would you recommend inheriting from?). I wanted to add custom actions to the window and use images to select them too. When I get to this point, I'm not really sure what to do. I've been looking at Window_Command and inheriting from it to utilize the addCommand function; however, I don't quite understand its usage. I tried reading through some custom scripts that modify the game's normal menu but it seems like they just modify the existing menu and bind commands to the pictures. I feel like I should understand this better since I already know Javascript but it feels so cryptic whenever I dive in.

If anyone could point me in the right direction or give me a basic rundown, then I'd be really appreciative!

 

[Trihan]

Okay, so if your scene is entirely unique (think "separate-screen" minigames that you want to drive via a new scene) then you'd inherit from Scene_Base. Most menu additions will inherit from Scene_MenuBase. If you have a new menu scene that deals with items or skill, you can inherit from Scene_ItemBase. What you inherit from basically depends on what functionality you need for the scene you're creating. If you don't need any properties or functions of a given class, there's no point in inheriting from it.

addCommand works thusly:

this.addCommand(text for command, handler name, enabled flag);

The text for command is literally what you want to appear in the selection box for the command name, be it "Formation" or "Bananas" or whatever.

The handler name is just a string. Can be anything you like, but should ideally describe the command. So for a Formation command, you could just have the handler be called "formation".

By itself the handler does absolutely nothing. Nothing at all. It's just a string, lying there.

The first step to getting a new command to do something is to bind a function to its handler in the initialize function of the command window:

this.setHandler(handlername, this.functionname.bind(this));

(you can also call setHandler in a Scene class on a named window)

handlername must match the handler name you set for the command. functionname can be called anything, but again it should be related to what the function will do.

You then create the function which actually processes the command.

Now what will happen is that when you select the command from your window, it will check its handlers to see if a function has been bound to the handler with a name matching the command. If so, that function will be called.

 

[MenaKatep]

Ok, so I went ahead and changed the Primary Scene to inherit from Scene_Base. I created a Menu Scene just under that, that inherits Primary Scene. The Menu Scene is where I will display my menu. Would you recommend I use Window_Command to do this and will I have the functionality to use the image loader and add icons for the command in .addCommand?

 

[Trihan]

I would recommend you use Window_Command if you have a command window in your scene. It really depends on what you want the scene to consist of. I'll PM you about this and see if I can help you figure out how to accomplish what you want.

 

[Rink27]

addCommand works thusly:

this.addCommand(text for command, handler name, enabled flag);

The text for command is literally what you want to appear in the selection box for the command name, be it "Formation" or "Bananas" or whatever.

The handler name is just a string. Can be anything you like, but should ideally describe the command. So for a Formation command, you could just have the handler be called "formation".

The first step to getting a new command to do something is to bind a function to its handler in the initialize function of the command window:

this.setHandler(handlername, this.functionname.bind(this));

Now what will happen is that when you select the command from your window, it will check its handlers to see if a function has been bound to the handler with a name matching the command. If so, that function will be called.

I have a question related to this. For my custom menu, I've yet to add any custom commands yet. However, I've added a description window that presents different information depending on the highlighted command. What I've tried so far is:

    Window_CommandInfo.prototype.refresh = function() {

        /*if(this._value != this._commandWindow.currentData().symbol) {
            this._value = this._commandWindow.currentData().symbol;
            var width = this.contents.width - this.textPadding() * 2;
            this.contents.clear();
            this.drawText(this._commandWindow.currentData().name, this.textPadding(), 0, width, _labelAlign);
        }*/

        var width = this.contents.width - this.textPadding() * 2;
        this.contents.clear();

        if(this._commandInfoWindow.currentData().name == "Artefacts") {
            this.drawText("Artefacts Description comes here. ", 0, this.lineHeight() * 1, width, 'left');
        } else {
            this.drawText("Hello. Command Description comes here. ", 0, this.lineHeight() * 1, width, 'left');
        }
    };

The commented out code was what I was trying to follow (It displayed a different name for the various commands which were presented as icons).

However, currentData is not defined for me.
I see from rpg_windows, the currentData handled as follows:

Window_Command.prototype.currentData = function() {
    return this.index() >= 0 ? this._list[this.index()] : null;
};

Window_Command.prototype.isCurrentItemEnabled = function() {
    return this.currentData() ? this.currentData().enabled : false;
};

Window_Command.prototype.currentSymbol = function() {
    return this.currentData() ? this.currentData().symbol : null;
};

Window_Command.prototype.currentExt = function() {
    return this.currentData() ? this.currentData().ext : null;
};

But from the rpg_windows, I see that the various commands are separated into different functions:

Window_MenuCommand.prototype.makeCommandList = function() {
    this.addMainCommands();
    this.addFormationCommand();
    this.addOriginalCommands();
    this.addOptionsCommand();
    this.addSaveCommand();
    this.addGameEndCommand();
};

So I'm a bit confused how to use an if/case conditional to reference the correct command and output its relevant custom description.
Not sure if my if conditional method is efficient.
Edit: Not sure if I have to include a function about adding commands. Especially for when I add custom commands in the future, what would be best to inherit from for this.

 

[Trihan]

There's a currentSymbol property that tells you which command is currently selected.

 

[Rink27]

There's a currentSymbol property that tells you which command is currently selected.

I'm not sure if to include .name or not, but I get a currentSymbol not defined error.
Not sure if I'm checking a number or string either. (The commands also currently don't have icons)

        if(this._commandInfoWindow.currentSymbol().name == "Artefacts") {
            this.drawText("Artefacts Description comes here. ", 0, this.lineHeight() * 1, width, 'left');
        } else {
            this.drawText("Hello. Command Description comes here. ", 0, this.lineHeight() * 1, width, 'left');
        }

 

[Trihan]

Does Window_CommandInfo inherit from Window_Command?

The value you're checking for is the string for the handler that was set when the command was created. So if you're checking the currentSymbol for the new game option in Window_Title, it'd be "newGame".

Also just noticed you're trying to do currentSymbol().name, but that won't work. It's just currentSymbol()

 

[Rink27]

Does Window_CommandInfo inherit from Window_Command?

The value you're checking for is the string for the handler that was set when the command was created. So if you're checking the currentSymbol for the new game option in Window_Title, it'd be "newGame".

Also just noticed you're trying to do currentSymbol().name, but that won't work. It's just currentSymbol()

I left the inheritance as Window_Base (same as my other custom windows) because Window_Command comes from Window_Selectable ... so I kinda assumed it shouldn't be that because I just want info displayed, not selectable options.

Tried currentSymbol() while inheriting from Window_Base and Window_Command. Both gave the same undefined error.
(Would be around half an hour or so till am able to reply again)

 

[Trihan]

Wait, you say you don't want selectable options, but you're trying to make a command window? Those two things contradict each other. What exactly are you trying to do?

 

[Rink27]

Wait, you say you don't want selectable options, but you're trying to make a command window? Those two things contradict each other. What exactly are you trying to do?

Sorry for not explaining properly. It's similar to before where I want a description window for the currently highlighted option. In this case, the various highlighted options are the selectable menu commands in the menu command window.

I want an additional window that informs the player what that command option does, similar to the example image below:
http://s217.photobucket.com/user/Galveraxe/media/default1_zps1d2bf878.jpg.html?w=240

Where when the player hovers over "Equip" the window says "Equip your characters with weapons and armor".
So I've already created a window for this description to be displayed, but I am unsure how to vary this description depending on the highlighted menu command.

Edit: At the moment I do not have any custom commands yet. I'm trying to figure it out with the commands I have now. However, when I do add custom commands, that part of my question was me trying to figure out what would be the best method to add those custom commands to my other commands so that I can similarly display varying descriptions for them also.

 

[Trihan]

Ohh, right. Give your info window a _commandWindow property or something. In your scene, set _commandWindow to the variable holding the instance of Window_Command, then in your info window's refresh function, set its text according to _commandWindow.currentSymbol()

 

[Rink27]

Ohh, right. Give your info window a _commandWindow property or something. In your scene, set _commandWindow to the variable holding the instance of Window_Command, then in your info window's refresh function, set its text according to _commandWindow.currentSymbol()

Well this was confusing, but it somehow works now.
Instead of calling this.createCommandInfoWindow();
which called:

    Scene_Menu.prototype.createCommandInfoWindow = function() {
        //this._commandWindow = Window_Command;
         this._commandInfoWindow = new Window_CommandInfo(0, 0, this._commandWindow);
         this._commandInfoWindow.y = Graphics.boxHeight - this._commandInfoWindow.height;
         this.addWindow(this._commandInfoWindow);
    };

I just ran the following three lines. I referenced the this._commandWindow via a third argument.
(Because I was getting confused using something instead of "this" when calling through a function)

        this._commandInfoWindow = new Window_CommandInfo(0, 0, this._commandWindow);
       this._commandInfoWindow.y = Graphics.boxHeight - this._commandInfoWindow.height;
       this.addWindow(this._commandInfoWindow);

Window_CommandInfo was:

    function Window_CommandInfo() {
        this.initialize.apply(this, arguments);
    }

    Window_CommandInfo.prototype = Object.create(Window_Base.prototype);
    Window_CommandInfo.prototype.constructor = Window_CommandInfo;

    Window_CommandInfo.prototype.initialize = function(x, y, win) {
        var width = this.windowWidth();
        var height = this.windowHeight();
        Window_Base.prototype.initialize.call(this, x, y, width, height);
        this._commandInfoWindow = win;
        this._value = "";
        this.refresh();
    };

Where _commandInfoWindow became the _commandWindow.
And below is how I checked for each command:

Window_CommandInfo.prototype.refresh = function() {
       
        if(this._value != this._commandInfoWindow.currentSymbol()) {
            this._value = this._commandInfoWindow.currentSymbol();

        }
        var width = this.contents.width - this.textPadding() * 2;
        this.contents.clear();
        if(this._commandInfoWindow.currentSymbol() == "item") {
            this.drawText("Inventory Description comes here. ", 0, this.lineHeight() * 1, width, 'left');

        } else if (this._commandInfoWindow.currentSymbol() == "skill") {
            this.drawText("Artefacts Description comes here. ", 0, this.lineHeight() * 1, width, 'left');

        }

etc.

I'm running multiple else if because I didn't want to go through setting up a switch case (Cause I'd need another function for that right?). So now for custom commands I'd have to find out what their handler (?) are.

 

[Trihan]

That's the beauty of it: if you're creating your own commands the handlers are whatever you decide to call them. There's no rule for it.