[Written Tutorial] Plugin Development Tutorial #1 - Creating Params and Windows (Patreon)

 Ever want to create your own plugin for RPG Maker MV? Well, this guide is for you. Firstly, go ahead and create your .js file with what ever editor you use. I prefer Visual Studio Code.

In the code, set up your Author name and Description: 

/*:
* @author William Ramsey
* @plugindesc My Plugin Description
*
*/

Next, lets go over 3 main params. (For a full list, see here). The param types we're going to go over are text, number, and file. Let's go ahead and create them! Let's also add a help section.

/*:
* @author William Ramsey
* @plugindesc My Plugin Description
*  
* @param Text Param
* @type text
* @default Some Text!
*
* @param Number Param
* @type number
* @desc My Number
* @min 0
* @max 50
* @decimals 5
*
* @param File Param
* @type file
* @dir audio/bgm
* @require 1
* @desc Pick a song!
*
* @help
* This is
* some help text!
*/

Finally, lets go ahead and create our main function. We're going to 'wrap it' so that nobody can modify its code from an external source.

(function() {
   //code here
})(); 

Let's create a variable called params so that we can grab the param data set. Then lets set 3 variables equal to the params!

 

(function() {

var params = PluginManager.parameters("my_plugin");

var text = params["Text Param"];
var number = params["Number Param"];
var file = params["File Param"];

})();

Lets create a variable called lh, we're going to use this variable to size our window properly. Make it equal to the windows line height by doing this:

var lh = Window_Base.prototype.lineHeight()*2;

Now we're going to display this information in a window on the map! Lets create a window like this:

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

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

My_Window.prototype.initialize = function() {
Window_Base.prototype.initialize.call(this, 0, 0, Graphics.boxWidth, lh);
this.refresh();
}

(Don't click that link, it was falsely detected as one)

Finally lets add some text to our new window.

My_Window.prototype.refresh = function() {
this.contents.clear();
this.drawText(text, 0, 0);
}

Now we're almost done! All we need to do from here is to add the window to the map. We're going to alias the original Scene_Map.prototype.start function and add more information to it.

var smstart = Scene_Map.prototype.start;
Scene_Map.prototype.start = function() {
smstart.apply(this, arguments);
this.my_window = new My_Window();
this.addChild(this.my_window);
}

That's it! Now you should have a fully functional plugin.

Full code:

/*:
* @author William Ramsey
* @plugindesc My Plugin Description
*  
* @param Text Param
* @type text
* @default Some Text!
*
* @param Number Param
* @type number
* @desc My Number
* @min 0
* @max 50
* @decimals 5
*
* @param File Param
* @type file
* @dir audio/bgm
* @require 1
* @desc Pick a song!
*
* @help
* This is
* some help text!
*/

(function() {

var params = PluginManager.parameters("my_plugin");

var text = params["Text Param"];
var number = params["Number Param"];
var file = params["File Param"];

var lh = Window_Base.prototype.lineHeight()*2;

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

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

My_Window.prototype.initialize = function() {
Window_Base.prototype.initialize.call(this, 0, 0, Graphics.boxWidth, lh);
this.refresh();
   }

My_Window.prototype.refresh = function() {
this.contents.clear();
this.drawText(text, 0, 0);
   }

var smstart = Scene_Map.prototype.start;
Scene_Map.prototype.start = function() {
smstart.apply(this, arguments);
this.my_window = new My_Window();
this.addChild(this.my_window);
   }

})();