Game_2020-07-04_01-15-07
Blog

Day 2 – Learning Javascript For Rpg Maker MV (Journey Of A Noob)

I’ve read that one of the best ways to learn is to be able to explain it to someone else, so here you go, I’m leaving you my lecture notes that I’ve put together.

I will try to provide explanations on some terms of the vocabulary but I frankly advise you to go learn by yourself the basics of Javascript because I may be wrong since I’m a novice!

Calling a custom menu

  • Assigning a keyboard key

Thanks to Javascript, we have the possibility to add a new key of our choice which is not assigned by default to Rpg Maker MV

You can found the core code in “rpg_core” > line 3002.

Input.keyMapper["80"] = "customMenu"; 
// This will let us call our custom Scene (menu) without going through the console.
// "80" refers to "P" on the keyboard.

Note that the number in square brackets [80] represents Javascript indexing, Rpg Maker Mv interprets it only. Please search on Google for “Javascript keyCodes” to find out which number corresponds to which key on the keyboard.

  • We link the keyboard key to our personal menu

“Alias_” is used in order to avoid writing over “Scene_map” while keeping the possibility to use its properties. Think of it as a “dummy” that you can re-use at will. 

You can found the core code in “rpg_scenes” > “Scene_Map” > line 587.

_alias_scene_map_update = Scene_Map.prototype.update; 
Scene_Map.prototype.update = function()
{
    _alias_scene_map_update.call(this);
    if (Input.isTriggered("customMenu")) SceneManager.push(Scene_CustomMenu);
};

Coding the custom menu

 or Creating the civil status form

You have to understand that vanilla Javascript loves to declare everything so we’ll start by saying what’s the name of our menu.

You can found the core code in “rpg_scenes” > “Scene_Map” > line 959.

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

Scene_CustomMenu.prototype = Object.create(Scene_MenuBase.prototype);
Scene_CustomMenu.prototype.constructor = Scene_CustomMenu;

Scene_CustomMenu.prototype.initialize = function() 
{
    Scene_MenuBase.prototype.initialize.call(this);
};

Before continuing we will warn Rpg Maker to load all elements of the window at once otherwise there is a risk of delay between the display of some elements.

Scene_CustomMenu.prototype.update = function ()
{
    if (!this.drawWindows) 
    {
        this._customWindow.drawAllItems();
        this._drawWindows = true;
    }

    if (Input.isTriggered("cancel")) SceneManager.pop();
}

Now that we gave it a name, we will tell Javascript that our CustomMenu has a body.

Scene_CustomMenu.prototype.create = function ()
{
    Scene_MenuBase.prototype.create.call(this);
    this._customWindow = new Window_Custom(0, 0, 320, 240);
    this.addWindow(this._customWindow);
}

So we’re telling Rpg Maker that our CustomMenu will be based on the core “Scene_MenuBase” (prototype refers also as a dummy-clone safety mesure).

Then we use “this” because we’re lazy to writte the whole name of the clone again and we describe how we want the body be like (where it will be locate, how tall and big). That’s the reason why we needed to use prototype this way you won’t overwrite someone else “body”.

Lastly we make sure this clone goes to our “customMenu” child “customWindow”. Yeah, in Javascript you’ve a Parent (ex: customMenu) and everything that will be attached to it is called a child (ex: customWindow). 

This is why it’s important you know the basics of Javascript so you can learn to “read” a piece of code.

customWindow can be considered as the skin of our body since without it Javascript won’t know how customMenu looks like. So now, we’re going to describe it to Rpg Maker.

function Window_Custom()
{
    this.initialize.apply(this, arguments);

}

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

Window_Custom.prototype.initialize = function (x, y, width, height)
{
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.drawAllItems();

Next we can finally add content to this customWindow, thinks like details of the skin.

Window_Custom.prototype.drawAllItems = function ()
{
    // Example 1: we are going to write what variable n°2 contains and where and how we want it to be displayed.
    this.drawText ($gameVariables.value(2), 0, 0, this.width - this.padding * 2, "center"); // line 255
    // Example 2: we are going to display an icon > icon number > X > y position
    this.drawIcon (45, 48, 48); // line 381
    // Example 3: we are going to display a faceset, line 439
    this.drawFace ("Leila", 0, 96, 96, 144, 144);
    // Example 4: we are going to display a charaset, line 454
    this.drawCharacter ("Leila", 0, this.padding, this.padding + 96); // if you don't count the padding then the edge (of the window?) will be over the character
    // Example 5: we are going to display a gauge, line 465
    this.drawGauge (0, 0, 100, 1, "#64fb7d", "#148be7"); // position + degrading effect
}

But again we gonna borrow from another body (Window_base) the data we need to use so we don’t have write it again ourself. The above options are detailed in “rpg_windows”.