RMMV Help Creating a Window With Javascript in MV

[Kozar927]

Hi and thanks in advance for reading. I have been trying to make a simple menu in RPG Maker MV for almost a month (on and off) now and no matter what I do I cant seem to get anything that works. I have watched long video tutorials (1hr+) and ended with code that does nothing, I have read through long threads and tutorials and end up with something that doesn't meet my needs. Essentially what I'm trying to do is create a menu that displays text and is scrollable. I have 5+ years of experience writing JavaScript (not for RPG maker games) and somehow I still cant figure this out haha. I prefer to use a script call. The script will take in an array I use to store information about the player and then print the information. I have watched tutorials on creating a window but nothing works for me. This thread got me the closest:

Creating Custom Windows In Events Using Script Calls

Hi, my name is Zekarius, and I have been using RPGMaker since VXAce. I was starting to get really proficient with ruby and then, just recently, I acquired MV to see if the more powerful graphics engine and whatnot was worth making games in. I have decided I would like to make games in MV but the...

forums.rpgmakerweb.com

but the problems I am still having are:
1) Window not scrollable
2) Cant figure out how to close the window
and most importantly
3) The window does not pause the game, my character is still moving in the background

That being said this is the only thing I have tried that actually drew a window to the screen, so for that I am thankful.

I have no issue using a plugin for this assuming it will accommodate me using data from my array in order to populate the window. I have tried a few plugins but I cant figure out how to populate the window buy using data from my array.

Can anyone point me to information on how to just make a simple text menu in RPG maker MV that will pause my game like the main menu does and scroll through a long chunk of text featuring things like:

Player Name: <info from first index of my array>
Player Height: <Info from second index of my array>
Etc. etc.

the text does not need to be selectable. Its all just to be read, so I would prefer a simple window scroll.

Thank you so much for any assistance offered!

EDIT: I just realized I may have posted this in the wrong section of the forum. I apologize if so, feel free to move.

 

[Anyone]

Don't have time to write a complete template, but this should get you started.

This is a fully functioning plugin creating a Scene overlaying the map (thus pausing the game) and creating a window that uses the drawItem() function to handle each line of data that's fed into it.

It uses RPG MZ as base (don't have MV installed) but you can simply ignore the commented code & the plugin manager (you can remove the entire first section if needed)

You can either use the RPG Maker MV way of Plugin Commands or use a script command to push my Scene into the SceneManager via:

SceneManager.push(Template_Menu_Scene);

/*:
 * @target MZ
 * @author Anyone
 * @plugindesc Template for a Window in a new Scene
 *
 * @help
 *
 * @command Open_Menu
 * @text Open Scrollable Menu
 * @desc Opens a scrollable menu.
 */

PluginManager.registerCommand("Scrollable_Window_Template", "Open_Menu", args => {
    SceneManager.push(Template_Menu_Scene);
});

// Everything below this is necessary


const test_Data = [
];
const test_itemNumber = 20;
function test_populateData (number) {
    for (let i = 0; i < number; i++) {
        test_Data.push({name: `Element ${i}`})
    }
}
test_populateData(test_itemNumber);

class Template_Menu_Scene extends Scene_MenuBase {
    constructor() {
        super(...arguments);
    }

    create() {
        super.create();
        this.createTemplateScrollableWindow();
    }

    createTemplateScrollableWindow() {
        const rect = this.templateScrollableWindowRect();
        this._templateScrollableWindow = new Template_Scrollable_Window(rect);
        this.addChild(this._templateScrollableWindow);
        this._templateScrollableWindow.refresh();
        this._templateScrollableWindow.activate();
    }

    templateScrollableWindowRect() {
        const x = 0
        const y = this.mainAreaTop();
        const width = Graphics.boxWidth;
        const height = Graphics.boxHeight;
        return new Rectangle(x, y, width, height)
    }
}

class Template_Scrollable_Window extends Window_Selectable {
    constructor() {
        super(...arguments);
    }

    maxItems() {
        return test_Data.length;
    }

    drawItem(index) {
        const rect = this.itemLineRect(index);
        const text = test_Data[index].name;
        this.drawText(text, rect.x, rect.y, this.textWidth(text), "left")
    }
}

This is what the template looks like:

Note how I scrolled to Element 6.

You can use this as orientation. Things like the background, the thick lines underneath each element, etc. can be edited by overwriting the default functions of Window_Selectable, Window_Scrollable & Window_Base by adding a method of the same name to my Window Object.

Refer to Window_Scrollable if you want to change the way scrolling works (e.g. smooth scrolling vs. line by line).

Explanation:
Window_Selectable, which is based on Window_Scrollable, already features an in-built method to do something for each entry of an array.
The drawItem() method is automatically called when the window is refreshed via the drawAllItems() method and receives the index of the current item in the array.
You can use this to access the data of that item in your array and draw Text, icons, images, etc.

For every item, I receive the index (0- the end of the maxItems() method) and can thus access the item in the array of the test data I generated.

The Manipulation of the position, in this instance, works easiest through creating a rectangle based on the itemLineRect function which determines where a rectangle would have to be drawn - thus allowing me to use those rectangles x & y values.

Now I have to get back to work. ^^"""

 

[Kozar927]

Thank you much!! Will try this when I get home today

 

[Kozar927]

Don't have time to write a complete template, but this should get you started.

This is a fully functioning plugin creating a Scene overlaying the map (thus pausing the game) and creating a window that uses the drawItem() function to handle each line of data that's fed into it.

It uses RPG MZ as base (don't have MV installed) but you can simply ignore the commented code & the plugin manager (you can remove the entire first section if needed)

You can either use the RPG Maker MV way of Plugin Commands or use a script command to push my Scene into the SceneManager via:

SceneManager.push(Template_Menu_Scene);

View attachment 254107

/*:
 * @target MZ
 * @author Anyone
 * @plugindesc Template for a Window in a new Scene
 *
 * @help
 *
 * @command Open_Menu
 * @text Open Scrollable Menu
 * @desc Opens a scrollable menu.
 */

PluginManager.registerCommand("Scrollable_Window_Template", "Open_Menu", args => {
    SceneManager.push(Template_Menu_Scene);
});

// Everything below this is necessary


const test_Data = [
];
const test_itemNumber = 20;
function test_populateData (number) {
    for (let i = 0; i < number; i++) {
        test_Data.push({name: `Element ${i}`})
    }
}
test_populateData(test_itemNumber);

class Template_Menu_Scene extends Scene_MenuBase {
    constructor() {
        super(...arguments);
    }

    create() {
        super.create();
        this.createTemplateScrollableWindow();
    }

    createTemplateScrollableWindow() {
        const rect = this.templateScrollableWindowRect();
        this._templateScrollableWindow = new Template_Scrollable_Window(rect);
        this.addChild(this._templateScrollableWindow);
        this._templateScrollableWindow.refresh();
        this._templateScrollableWindow.activate();
    }

    templateScrollableWindowRect() {
        const x = 0
        const y = this.mainAreaTop();
        const width = Graphics.boxWidth;
        const height = Graphics.boxHeight;
        return new Rectangle(x, y, width, height)
    }
}

class Template_Scrollable_Window extends Window_Selectable {
    constructor() {
        super(...arguments);
    }

    maxItems() {
        return test_Data.length;
    }

    drawItem(index) {
        const rect = this.itemLineRect(index);
        const text = test_Data[index].name;
        this.drawText(text, rect.x, rect.y, this.textWidth(text), "left")
    }
}

This is what the template looks like:
View attachment 254108
Note how I scrolled to Element 6.

You can use this as orientation. Things like the background, the thick lines underneath each element, etc. can be edited by overwriting the default functions of Window_Selectable, Window_Scrollable & Window_Base by adding a method of the same name to my Window Object.

Refer to Window_Scrollable if you want to change the way scrolling works (e.g. smooth scrolling vs. line by line).

Explanation:
Window_Selectable, which is based on Window_Scrollable, already features an in-built method to do something for each entry of an array.
The drawItem() method is automatically called when the window is refreshed via the drawAllItems() method and receives the index of the current item in the array.
You can use this to access the data of that item in your array and draw Text, icons, images, etc.
View attachment 254109
For every item, I receive the index (0- the end of the maxItems() method) and can thus access the item in the array of the test data I generated.

The Manipulation of the position, in this instance, works easiest through creating a rectangle based on the itemLineRect function which determines where a rectangle would have to be drawn - thus allowing me to use those rectangles x & y values.

Now I have to get back to work. ^^"""

Forgot to quote you. Thanks again!

 

[Kozar927]

Don't have time to write a complete template, but this should get you started.

This is a fully functioning plugin creating a Scene overlaying the map (thus pausing the game) and creating a window that uses the drawItem() function to handle each line of data that's fed into it.

It uses RPG MZ as base (don't have MV installed) but you can simply ignore the commented code & the plugin manager (you can remove the entire first section if needed)

You can either use the RPG Maker MV way of Plugin Commands or use a script command to push my Scene into the SceneManager via:

SceneManager.push(Template_Menu_Scene);

View attachment 254107

/*:
 * @target MZ
 * @author Anyone
 * @plugindesc Template for a Window in a new Scene
 *
 * @help
 *
 * @command Open_Menu
 * @text Open Scrollable Menu
 * @desc Opens a scrollable menu.
 */

PluginManager.registerCommand("Scrollable_Window_Template", "Open_Menu", args => {
    SceneManager.push(Template_Menu_Scene);
});

// Everything below this is necessary


const test_Data = [
];
const test_itemNumber = 20;
function test_populateData (number) {
    for (let i = 0; i < number; i++) {
        test_Data.push({name: `Element ${i}`})
    }
}
test_populateData(test_itemNumber);

class Template_Menu_Scene extends Scene_MenuBase {
    constructor() {
        super(...arguments);
    }

    create() {
        super.create();
        this.createTemplateScrollableWindow();
    }

    createTemplateScrollableWindow() {
        const rect = this.templateScrollableWindowRect();
        this._templateScrollableWindow = new Template_Scrollable_Window(rect);
        this.addChild(this._templateScrollableWindow);
        this._templateScrollableWindow.refresh();
        this._templateScrollableWindow.activate();
    }

    templateScrollableWindowRect() {
        const x = 0
        const y = this.mainAreaTop();
        const width = Graphics.boxWidth;
        const height = Graphics.boxHeight;
        return new Rectangle(x, y, width, height)
    }
}

class Template_Scrollable_Window extends Window_Selectable {
    constructor() {
        super(...arguments);
    }

    maxItems() {
        return test_Data.length;
    }

    drawItem(index) {
        const rect = this.itemLineRect(index);
        const text = test_Data[index].name;
        this.drawText(text, rect.x, rect.y, this.textWidth(text), "left")
    }
}

This is what the template looks like:
View attachment 254108
Note how I scrolled to Element 6.

You can use this as orientation. Things like the background, the thick lines underneath each element, etc. can be edited by overwriting the default functions of Window_Selectable, Window_Scrollable & Window_Base by adding a method of the same name to my Window Object.

Refer to Window_Scrollable if you want to change the way scrolling works (e.g. smooth scrolling vs. line by line).

Explanation:
Window_Selectable, which is based on Window_Scrollable, already features an in-built method to do something for each entry of an array.
The drawItem() method is automatically called when the window is refreshed via the drawAllItems() method and receives the index of the current item in the array.
You can use this to access the data of that item in your array and draw Text, icons, images, etc.
View attachment 254109
For every item, I receive the index (0- the end of the maxItems() method) and can thus access the item in the array of the test data I generated.

The Manipulation of the position, in this instance, works easiest through creating a rectangle based on the itemLineRect function which determines where a rectangle would have to be drawn - thus allowing me to use those rectangles x & y values.

Now I have to get back to work. ^^"""

Unfortunately this didn't work for me. I created a plugin file, pasted the code you provided directly into it, saved, activated it in plugin manager, and attempted to call it using the script call you provided, and it says "Template_Menu_Scene is not defined". Anyone have any ideas? Sorry it took me so long to test this. life has been crazy lately. I seem to be unable to create a window using any advice, lol. I'm sure im just doing something wrong.

 

[Anyone]

Unfortunately this didn't work for me. I created a plugin file, pasted the code you provided directly into it, saved, activated it in plugin manager, and attempted to call it using the script call you provided, and it says "Template_Menu_Scene is not defined". Anyone have any ideas? Sorry it took me so long to test this. life has been crazy lately. I seem to be unable to create a window using any advice, lol. I'm sure im just doing something wrong.

Nah it seems like MV is more silly than I remembered.
There's a couple of things that have to be done, from turning the text into a self-executing function (which MZ has done away with), to removing functions, the plugin manager is just command line without registry, and it seems to also use a different way of iterating through items at a glance.

This is closer, but still does not show the window or the elements correctly:

/*:
 * @target MV
 * @author Anyone
 * @plugindesc Template for a Window in a new Scene
 *
 * @help
 */


// Everything below this is necessary

(function() {
    const Template_Scrollable_Window_Plugin = {};
    Template_Scrollable_Window_Plugin.Game_Interpreter_pluginCommand =
        Game_Interpreter.prototype.pluginCommand;
    Game_Interpreter.prototype.pluginCommand = function(command, args) {
        Template_Scrollable_Window_Plugin.Game_Interpreter_pluginCommand.call(this, command, args);
        if (command === 'Open_Template_Menu_Scene') {
            SceneManager.push(Template_Menu_Scene);
        }
    };

    const test_Data = [
    ];
    const test_itemNumber = 20;
    function test_populateData (number) {
        for (let i = 0; i < number; i++) {
            test_Data.push({name: `Element ${i}`})
        }
    }
    test_populateData(test_itemNumber);

    class Template_Menu_Scene extends Scene_MenuBase {
        constructor() {
            super(...arguments);
        }

        create() {
            super.create();
            this.createTemplateScrollableWindow();
        }

        createTemplateScrollableWindow() {
            const rect = this.templateScrollableWindowRect();
            this._templateScrollableWindow = new Template_Scrollable_Window(rect);
            this.addChild(this._templateScrollableWindow);
            this._templateScrollableWindow.refresh();
            this._templateScrollableWindow.activate();
        }

        templateScrollableWindowRect() {
            const x = 0;
            const y = 0;
            const width = Graphics.boxWidth;
            const height = Graphics.boxHeight;
            return new Rectangle(x, y, width, height)
        }
    }

    class Template_Scrollable_Window extends Window_Selectable {
        constructor() {
            super(...arguments);
        }

        maxItems() {
            return test_Data.length;
        }

        drawItem(index) {
            const rect = this.itemLineRect(index);
            const text = test_Data[index].name;
            this.drawText(text, rect.x, rect.y, this.textWidth(text), "left")
        }
    }
})();

I'd have to look back into how MV was handling the selectable object, but I'm currently done with the C and not really in the right headspace for it.

You can find your answer in the Window_Selectable part of the original MV files and study it as example of how you can build a window.

Sorry but can't be of more help rn.

 

[Kozar927]

Nah it seems like MV is more silly than I remembered.
There's a couple of things that have to be done, from turning the text into a self-executing function (which MZ has done away with), to removing functions, the plugin manager is just command line without registry, and it seems to also use a different way of iterating through items at a glance.

This is closer, but still does not show the window or the elements correctly:

/*:
 * @target MV
 * @author Anyone
 * @plugindesc Template for a Window in a new Scene
 *
 * @help
 */


// Everything below this is necessary

(function() {
    const Template_Scrollable_Window_Plugin = {};
    Template_Scrollable_Window_Plugin.Game_Interpreter_pluginCommand =
        Game_Interpreter.prototype.pluginCommand;
    Game_Interpreter.prototype.pluginCommand = function(command, args) {
        Template_Scrollable_Window_Plugin.Game_Interpreter_pluginCommand.call(this, command, args);
        if (command === 'Open_Template_Menu_Scene') {
            SceneManager.push(Template_Menu_Scene);
        }
    };

    const test_Data = [
    ];
    const test_itemNumber = 20;
    function test_populateData (number) {
        for (let i = 0; i < number; i++) {
            test_Data.push({name: `Element ${i}`})
        }
    }
    test_populateData(test_itemNumber);

    class Template_Menu_Scene extends Scene_MenuBase {
        constructor() {
            super(...arguments);
        }

        create() {
            super.create();
            this.createTemplateScrollableWindow();
        }

        createTemplateScrollableWindow() {
            const rect = this.templateScrollableWindowRect();
            this._templateScrollableWindow = new Template_Scrollable_Window(rect);
            this.addChild(this._templateScrollableWindow);
            this._templateScrollableWindow.refresh();
            this._templateScrollableWindow.activate();
        }

        templateScrollableWindowRect() {
            const x = 0;
            const y = 0;
            const width = Graphics.boxWidth;
            const height = Graphics.boxHeight;
            return new Rectangle(x, y, width, height)
        }
    }

    class Template_Scrollable_Window extends Window_Selectable {
        constructor() {
            super(...arguments);
        }

        maxItems() {
            return test_Data.length;
        }

        drawItem(index) {
            const rect = this.itemLineRect(index);
            const text = test_Data[index].name;
            this.drawText(text, rect.x, rect.y, this.textWidth(text), "left")
        }
    }
})();

I'd have to look back into how MV was handling the selectable object, but I'm currently done with the C and not really in the right headspace for it.

You can find your answer in the Window_Selectable part of the original MV files and study it as example of how you can build a window.

Sorry but can't be of more help rn.

That's okay. I appreciate the help none the less. Can anyone else perhaps point me in the right direction? I guess I need more assistance than I thought haha. It's much more complicated than I assumed it would be. I'm just looking for a very simple menu to display information I have stored in an array. is their a plugin that can help me perhaps?

 

[Kozar927]

Bump

 

[ThreeSixNine]

Have you ever seen this plugin by casper667? It might work for your needs.

 

[Kozar927]

Have you ever seen this plugin by casper667? It might work for your needs.

Thanks for the reply! I have read through everything related to this plugin and I cant quite see how this helps me. Its possible im missing something so I would greatly appreciate any clarification you can offer. I can use information from a javascript array to populate a menu using this plugin somehow? It seems to just work with plugin commands, and seems pretty rigid in the sense that it would always be a multi-panel window with categories, unless i'm missing something.

 

[ThreeSixNine]

If you are looking for menu that displays text and scrolls, this plugin does that.

• You can disable all the default categories and add a custom category.
• You can then load the custom category with entries.
• Within the entries you can add text and even display a picture.

This plugin adds a command to the main menu that you can customize the name of.
You could even call the encyclopedia scene from a common event linked to a button, if you have Yanfly Button Common Events.

Also, speaking of Yanfly plugins, Common Event Menu could also be another option. Although I do not know if it supports scrolling, it is fairly customizable.

 

[Kozar927]

If you are looking for menu that displays text and scrolls, this plugin does that.

• You can disable all the default categories and add a custom category.
• You can then load the custom category with entries.
• Within the entries you can add text and even display a picture.

This plugin adds a command to the main menu that you can customize the name of.
You could even call the encyclopedia scene from a common event linked to a button, if you have Yanfly Button Common Events.

Also, speaking of Yanfly plugins, Common Event Menu could also be another option. Although I do not know if it supports scrolling, it is fairly customizable.

I apologize for possibly misunderstanding still, but I can populate this menu with Javascript? Thats the part I cant seem to determine and the most important part for me. All of my data is in an array and id like to be able to determine how that array populates the menu, which means I need to be able to interact with this plugin with scripting in some way. Thanks again for all the help.

 

[ThreeSixNine]

Let me ask you one question: Does the information in the actor's array change throughout the course of the game? Or is it static information that doesn't change once it's displayed?

 

[Kozar927]

Let me ask you one question: Does the information in the actor's array change throughout the course of the game? Or is it static information that doesn't change once it's displayed?

Changes all the time.

Its an array containing many elements (some are sub arrays in themselves) with all sorts of stats about the player. This is why I need to control how the info is read out to display. I cant do a simple loop on the array reading off each element. For some I need to append text to the element. For some I need to access a sub array ( eg. ary[5][2]; ) I know how to handle displaying all the info using Javascript I just need to find a way to make the window to begin with and print my text to it.

 

[Kozar927]

Just a hail Mary bump. I'm really not sure where even to go to learn more about this. I would be very grateful if someone could even point me in the right direction to getting a simple window setup.

 

[ATT_Turan]

I know you mentioned this in your first post, but...there are tutorials for this

I think what would make it easiest for others to help you is if you follow such a guide, see if it works or not, then post your code here for us to help you examine.

There's the one you linked to, then on YouTube there's this video:


Please make sure to post code in the CODE tags (the </> icon on the edit bar).

 

[Kozar927]

I know you mentioned this in your first post, but...there are tutorials for this

I think what would make it easiest for others to help you is if you follow such a guide, see if it works or not, then post your code here for us to help you examine.

There's the one you linked to, then on YouTube there's this video:


Please make sure to post code in the CODE tags (the </> icon on the edit bar).

I’ll take a look. Thanks

Edit: this is actually the video I mentioned in the OP that I followed and ended up with code that seemed to do nothing. Are there any other good ones?

 

[Traverse]

My advice is to take a look at how the default MV engine does menus. If you know how it makes the default party menu, you will know how make your own.

To provide some context, the way the engine works is that the party menu is actually a completely separate screen from the map. This is called a "Scene" by the engine and which Scene the player is currently on is handled by "SceneManager".

When you are on a map, the current scene is called "Scene_Map". When in battle, it is "Scene_Battle". When in the party menu, "Scene_Menu". "Scene_Menu" has its own sub-scenes for the submenus, like "Scene_Item", "Scene_Equip", "Scene_Status", etc. You can see the code for these scenes in the file "rpg_scenes.js" in your project's "js" folder.

Despite the default menu background looking like the map you were on, you're not actually on "Scene_Map" anymore - the engine just takes a screenshot of the map before switching Scenes and blurs it and then uses it as the background for the menu screen.

There are usually multiple Windows in a menu. When you open up the default party menu, the command bar on the left is one window, called "Window_MenuCommand". The one with the party portraits and HP/MP bars is a separate window called "Window_MenuStatus". The small box displaying the party's gold is yet another, called "Window_Gold".

The code for all the window objects is accessible in the "rpg_windows.js" file.

Even though you say you don't need it to be selectable, I can tell you that in the default engine, "Window_Selectable" (and by extension, those that inherit from Window_Selectable, like Window_Command and Window_HorzCommand) are the only* Windows that have any code that checks for player input. If you do not use it or one of its inheritors, you will have to write your own code to detect player input in order to implement your scrolling functionality for the window. You can take a look at how Window_Selectable does it to get an idea of what to do.

Even if you do use Window_Selectable or one of its variants, you will likely have to modify it to do what you want, as by default it makes a selectable cursor rectangle and using it to scroll makes it happen the way you scroll through things in the item menu (i.e. cursor doesn't scroll the list unless it's at the top or bottom of the visible list).

* Technically, Window_Message also checks for player input, but the only buttons it checks for are the OK and Cancel buttons and not the arrow keys you'd need for scrolling.