LoginSignup
1
2

More than 3 years have passed since last update.

【RPGツクールMV】【JavaScript】初学者向け解説:公式プラグイン「TitleCommandPosition.js」から分かる構造

Last updated at Posted at 2020-07-06

目的

コアスクリプトの理解のため、シンプルにまとまっている公式プラグイン「TitleCommandPosition.js」を読み解いてみました。

RPGツクールMVの主要コード(コアスクリプト)はJavScriptで書かれています。
はじめてプラグインを制作する方の参考になれば幸いです。
本稿では変数、無名関数、prototypeメソッドが登場します。

「TitleCommandPosition.js」とは

タイトルコマンドウィンドウの位置を変更する公式プラグインです。
新規プロジェクトの中に同梱されています。

コード

プラグインパラメーターはマークアップ記法だと崩れるので、省略します。
ES2015前の記法で書かれているため、変数はvarを使用しています。

 (function(){

    var parameters = PluginManager.parameters('TitleCommandPosition');
    var offsetX = Number(parameters['Offset X'] || 0);
    var offsetY = Number(parameters['Offset Y'] || 0) ;
    var width = Number(parameters['Width'] || 240);
    var background = Number(parameters['Background'] || 0);

    var _Window_TitleCommand_updatePlacement =
            Window_TitleCommand.prototype.updatePlacement;
    Window_TitleCommand.prototype.updatePlacement = function(){
        _Window_TitleCommand_updatePlacement.call(this);
        this.x += offsetX;
        this.y += offsetY;
        this.setBackgroundType(background);
    };

    Window_TitleCommand.prototype.windowWidth = function(){
        return width;
    }

 })();

・即時関数((function(){})();)でオリジナルコアスクリプトの浸食を防いでいる
・パラメーターvar parameters、offsetX、offsetY 、width 、background の値を受けとり、
再定義することでコアスクリプトを改変している。

    var parameters = PluginManager.parameters('TitleCommandPosition');

TitleCommandPositionはプラグイン名。
プラグイン名をリネームするとパラメーターを受けとれず、正しく動作しない理由はここ。

    var _Window_TitleCommand_updatePlacement =
            Window_TitleCommand.prototype.updatePlacement;

rpg_window.jsの5746行目、Window_TitleCommand.prototype.updatePlacementを
_Window_TitleCommand_updatePlacementという名前で定義。

Title.Commandのプロパティを参照して、updatePlacementというプロパティを作っていたものを、プラグインの_Window_TitleCommand_updatePlacementで置き換えているのですね。

関数の中身は自分自身を呼び出して、パラメーターで追加された処理を実行しています。
コアスクリプトではthis.x(X座標)this.y(Y座標)のみを取得してたのを……

コアスクリプト:

Window_TitleCommand.prototype.updatePlacement = function() {
    this.x = (Graphics.boxWidth - this.width) / 2;
    this.y = Graphics.boxHeight - this.height - 96;
};

プラグインではパラメーターからX座標、Y座標を受けとり、ウィンドウ背景まで定義できます。
変数backgroundは0:通常、1:暗い 、2:透明です。

プラグイン:

    Window_TitleCommand.prototype.updatePlacement = function() {
        _Window_TitleCommand_updatePlacement.call(this);
        this.x += offsetX;//変数offsetXに入っているパラメーターの値か0を採用する
        this.y += offsetY;//変数offsetYに入っているパラメーターの値か0を採用する
        this.setBackgroundType(background);//変数background入っているパラメーターの値を採用する
    };

コアスクリプト:


    Window_TitleCommand.prototype.windowWidth = function() {
        return 240;//固定
    };

プラグイン:


    Window_TitleCommand.prototype.windowWidth = function() {
        return width;//変数widthに入っているパラメーターの値を採用する
    };

終わりに

これから始める方の役に立てば幸いです。
お気づきの点がありましたら、コメントを頂けますと幸いです。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2