JavaScript Tips & Tricks

Introduction

While writing some JavaScript code in your RPG Maker MV plugins, web applications, and whatever, there are somewhat small things you're ignoring. They may not often affect your script performance and results, but practically you should pay attention on them to write more efficient code and avoid unwanted effects. Here some useful tips for such those.

Tip #1: Avoid global variables, always declare local variables

Minimize the use of global variables. This includes all data types, objects, and functions. Global variables and functions can be overwritten by other scripts.

All variables used in a function/scope should be declared as local variables. Local variables must be declared with the var keyword, otherwise they will become global variables.

Tip #2: Declarations on top

It is a good coding practice to put all declarations at the top of each script or function. This will:

  • Give cleaner code
  • Provide a single place to look for local variables
  • Make it easier to avoid unwanted (implied) global variables
  • Reduce the possibility of unwanted re-declarations

Tip #3: Initialize variables

It is a good coding practice to initialize variables when you declare them. This will:

  • Give cleaner code
  • Provide a single place to initialize variables
  • Avoid undefined values

var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};

Tip #4: Never declare Number, String, or Boolean objects

Declaring these types as objects, slows down execution speed, and produces nasty side effects.

  • Use {} instead of new Object()
  • Use "" instead of new String()
  • Use 0 instead of new Number()
  • Use false instead of new Boolean()
  • Use [] instead of new Array()
  • Use /()/ instead of new RegExp()
  • Use function (){} instead of new function()

Tip #5: Beware of automatic type conversions

Beware that numbers can accidentally be converted to strings or NaN (Not a Number). JavaScript is loosely typed. A variable can contain different data types, and a variable can change its data type:

var x = 5 + "7"; // x is "57", typeof x is a string

Tip #6: Use === comparison

The == comparison operator always converts (to matching types) before comparison. The === operator forces comparison of values and type.

0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true; // false

Tip #7: Use Parameter Defaults

If a function is called with a missing argument, the value of the missing argument is set to undefined. Undefined values can break your code. It is a good habit to assign default values to arguments.

function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}

or shorter one...

function myFunction(x, y) {
y = y || 0;
}

Tip #8: End Your Switches with Defaults

Always end your switch statements with a default. Even if you think there is no need for it.

Tip #9: Avoid Using eval()

The eval() function is used to run text as code. In almost all cases, it should not be necessary to use it. Because it allows arbitrary code to be run, it also represents a security problem.

Source

w3schools.com

[RMMV Plugin] Advanced Parallax

Version: v1.00

Introduction

This plugin allows you to have more control on map parallaxes by defining them in the map notetag. It also allows you to define multiple layered parallaxes (either behind or in front of the tiles and characters), a bit like in RPG Maker XP games, which have panoramas and fogs. Additionally, you can make animated parallaxes (having more than one frame).

Contact me for support/bug report:

listra92@gmail.com
https://www.facebook.com/don.listRA92

Map Notetag

Example:

<parallax>
name: StarlitSky
loopx: true
loopy: true
sx: 4
sy: $gameVariables.value(1)
depth: 1
frames: 4
framesp: 2
</parallax>

Read the instructions for the explanation.

Animated Parallaxes

You can make parallaxes animated with more than one frame. For such that, put several files in \img\parallaxes folder, for example StarlitSky_1.png, StarlitSky_2.png, ... for each frame of the parallax StarlitSky defined in the map note. For non-animated ones, just put the file as usual, i.e. StarlitSky.png.

Download Plugin

MK_AdvParallax.js

[RMMV] How to Use & Update Plugins + General Q/A

Introduction

For those who don't know about that, plugins in RPG Maker MV are basically extending scripts that are managed by PluginManager in a game system script rpg_managers.js. Unlike in RPG Maker VX Ace and former, RPG MV editor provides plugin manager for such that, as shown in the picture below. I explain it in the next section.

Adding, Removing, and Configuring Plugins

  1. Put a plugin (.js file) to add into directory: [game_directory]\js\plugins
  2. In the RPG MV editor, open Tools -> Plugin Manager... (F10).
  3. To add a plugin, double click the blank entry at the bottom.
  4. Click the Name: combo box to select a plugin (all in the plugin directory).
  5. Click the Status: combo box to enable/disable the plugin (whether to let it loaded & executed by the game system).
  6. Some plugins provide certain parameters to configure. Double click on a parameter to change its value.
  7. Click the Help... to see instructions for the plugin.
  8. Click OK if you're done.
  9. To reorder a plugin, right click -> Cut (Ctrl+X) on it and right click -> Paste (Ctrl+V) on the place you think it should be.
  10. To remove a plugin, right click -> Delete (Del) on it. Note that the file won't be deleted from the disk.

Updating Plugins

Some 'baka's said that we have to recreate a new project for the current one in order to update some plugins. Well, here I explain the better way to update plugins. First, put an 'updated' plugin into the plugin directory and replace the existing 'old' one. Then, there are two cases:

Case 1: Only difference on some script code.

You don't need to do anything with the plugin manager, just playtest the game to see some effects.

Case 2: Difference on the parameters definition.

The plugin may not work well when running the game, especially dealing with newly added parameters. So, do the following steps:

  1. Open the plugin manager.
  2. Remove a plugin you want to update. Note that any changes on the parameter values will be lost.
  3. Add the plugin again, reconfigure the parameters, and reorder it.
  4. Save your project and playtest the game to see some effects.

RPG MV Plugins General Q/A

Q: I can't find plugin(s) I want. What should I do?
A: Try searching in the RPG Maker official forum and some other unofficial forums. They may haven't been released yet, since RPG MV was still newly released in end of October, 2015. Or if you think you can, try developing them by yourself.

Q: Do plugin orders matter?
A: In many cases, yes, like scripts in RPG VX Ace and former. Some of them may override variables and/or functions that were defined in the plugin at above, and they may be overriden by one(s) at below. Some of them may also require variables and/or functions defined in the plugin at above.

Q: What capabilities could RPG MV plugins perform?
A: Basically, RPG MV games are HTML5 applications, and the game runner is a Chrome-based mini-browser. Thus, all JavaScript and HTML5 features (including AJAX) are of course applicable. WebGL library features are also applicable due to support on it. So, we could develop a browser-based MMORPG that utilizes AJAX, or even a game using WebGL's 3D graphics renderer.

Q: I want to develop RPG MV plugins by myself. What things do I need?
A: First, and the most important, programming skill and ability to script using JavaScript, like you do for web applications. You can learn JavaScript in w3schools.com.
Second, it's necessary to learn some code in the default RPG MV game system. You can also learn the structures documented in the RPG MV help file.
If your plugin utilizes other existing plugin(s), of course you need to learn their code.

Q: Can I make and apply external JS scripts (not plugin) on RPG MV games?
A: Yes. A thing you need to do is modifying index.html in the game directory. Add the following in the <body> tag, above the element for main.js:
<script type="text/javascript" src="js/yourscript.js"></script>
But still, it's recommended to make them as plugins that can be easily managed using the plugin manager.

[Game] Rhythm of Love!

Version: v1.02 Beta

Overview

Rhythm of Love! is a rhythm game with O2Jam/Guitar Hero gameplay style.

Features

  • 3-line ~ 7-line game mode.
  • Reads a beatmap file that contains information of song file to play, etc., and note data.
  • Reads and displays background picture for the selected beatmap.
  • Support for songs with variable tempo.

Coming in the Next Version

  • Gameplay options.
  • Lists all beatmaps in Songs folder instead of reading beatmap files.
  • Love Meter ("health"/HP) system.
  • More songs coming.

Screenshot

Download

Download Rhythm of Love! (1.40 MB)

Download songs data (24.84 MB)

Songs list:
  • Mark Ronson (feat. Bruno Mars) - Uptown Funk (TV Size) [Expert]
  • Masayoshi Minoshima feat. nomico - Bad Apple!! - Touhou PV [Expert]
  • 西木野真姫 (CV.Pile) - Darling!! (Full) [Hard]
  • 西木野真姫 (CV.Pile) - Darling!! (TV Size) [Hard]
  • 高坂穂乃果(CV.新田恵海)&星空凛(CV.飯田里穂) - Mermaid festa vol.2 ~Passionate~ (TV Size) [Hard]

Notes

You are free to create more beatmaps and/or modify existing ones using a text editor. Contact me if you want to contribute some new beatmaps and the songs or suggest mod for existing ones.

[RMMV Plugin] Advanced Movement

Version: v1.02

Introduction

μ'ki's Advanced Movement is remake from my previous work, Alissa Advanced Move Route (for RPG Maker XP & VX), for RPG Maker MV. It also overrides the Move Toward Player route command to use pathfinding, like my another previous work, Listra Pathfinder Module, does. However, here it uses the A* pathfinding algorithm that already exists in the RPG MV game system, with a little mod to adjust/omit the search limit.

For information about Alissa Advanced Move Route, search the thread at RPGMakerID forum. Sorry, I don't know if it exists, maybe because it has been several years ago.

For information about Listra Pathfinder Module, visit this link.

Contact me for support/bug report:

listra92@gmail.com
https://www.facebook.com/don.listRA92

Features and Usages

  • Adjusts A* pathfinding search depth limit (by default set to 12), if the shortest path to the destination is longer than that value, the character may stop in front of an obstacle.
  • Adjusts whether to use pathfinding for Move toward Player (and other characters) instead of naive movement that doesn't avoid obstacles.
  • Move towards point, just add script in the movement route: this.moveTowardPoint(X, Y);
  • Jump left(4), right(6), up(8), down(2) (one step, triggering Player/Event Touch): this.jumpStraight(direction[, turn_ok = true]);
  • Jump diagonally: this.jumpDiagonally(h, v[, turn_ok = true]);
  • Jump towards point (per step): this.jumpTowardPoint(X, Y);
  • Jump towards char (player/event): this.jumpTowardCharacter(character);
  • this.jumpTowardPlayer();
  • this.jumpAwayFromCharacter();
  • this.jumpRandom();
  • this.jumpForward();
  • this.jumpBackward();
  • this.eraseEvent(event);
  • Flow label: this.label(label_name);
  • Jump to label with condition: this.jumpLabel(label_name[, cond = "true"]);
  • this.endRoute();

Changelog

v1.02:

  • Prepared for compatibility to MK_Pathfinding.js plugin.

v1.01b:

  • 8-direction support for the pathfinding algorithm.

v1.01:

  • Improved the A* algorithm that lagged when targeting a character, since it isn't passable and causes the algorithm search entire pathable tiles.
  • Fixed followers not moving when the player character is in jump mode.
  • 8-direction player movement.

Coming in the Next Version

  • Option to use free/pixel movement system.
  • More movement route commands (probably).

Download Plugin

MK_AdvancedMove.js