【ハイドラ】RPGツクールMZ プラグイン入門、そして画面に額縁を作成した【エメドラ】

RPGツクールMVを始めようと思い、はや３年。
何かモチベが上がらんわーと思っていたところRPGツクールMZが発売されました。

今回は***ATB(アクティブタイムバトル)***が追加されたということで、
「よっしゃ、やるで」と思った訳ですが。何か物足りない。
そう、画面に額縁が無いのだ。

画面に額縁が無い限り、オレのやる気はゼロだ。

プラグイン作ればいいじゃん。
あれやろ、HTML5だろ？オレReactだよヨユーじゃん。
自分もそう思ってた時期がありました。

PixiJS

あかん、全く解らん。

ここからスタート。
プラグインの情報もほとんどない。
なるほど、これは私が入門書を書くしかないのですね。

というわけで、流行りのZennに入門書を書いてみました。
[RPGツクールMZ 「伝統的RPGデザイン」プラグイン作成入門]
(https://zenn.dev/pepaperon_p/books/e1c8682c9610f82c2bbb)

が、Qiitaのほうが気楽に書ける気がするので
プラグイン作成入門をこちらにも書いてみます。
ネタ投稿はQiitaのほうが良いですよね。

　∧∧∧∧∧∧∧∧∧∧∧∧∧∧∧∧∧∧∧∧
＜ Qiita! 圧倒的SEO! Qiita! 圧倒的SEO! ＞
　∨∨∨∨∨∨∨∨∨∨∨∨∨∨∨∨∨∨∨∨
    ( ﾟ∀ﾟ)o彡°( ﾟ∀ﾟ)o彡°( ﾟ∀ﾟ)o彡°

画面の枠を作成するにはどうすればいいのか

幸い、デフォルトでRPGツクールMZはタイトル画面のみ枠を付ける機能がありました。
ここを改造してみましょう。

rmmz_scenes.js

Scene_Title.prototype.createBackground = function() {
    this._backSprite1 = new Sprite(
        ImageManager.loadTitle1($dataSystem.title1Name)
    );
    this._backSprite2 = new Sprite(
        ImageManager.loadTitle2($dataSystem.title2Name)
    );
    this.addChild(this._backSprite1);
    this.addChild(this._backSprite2);
};

このloadTitle2というのがデフォルト枠画像のようです。

ImageManager.loadTitle2($dataSystem.title2Name)

こいつを

ImageManager.loadTitle2("titleframe")

こうします。

では、これでSamplePlugin.jsを作成してみましょう。

SamplePlugin.js

//=============================================================================
// RPG Maker MZ - Sample Plugin
//=============================================================================

/*:
 * @target MZ
 * @plugindesc A sample for practice.
 * @author ***
 *
 * @help SamplePlugin.js
 *
 * Here's a description.
 */

/*:ja
 * @target MZ
 * @plugindesc 練習用のサンプルです。
 * @author ***
 *
 * @help SamplePlugin.js
 *
 * ここに説明文を書きます。
 */

(() => {

    Scene_Title.prototype.createBackground = function() {
        this._backSprite1 = new Sprite(
            ImageManager.loadTitle1($dataSystem.title1Name)
        );
        this._backSprite2 = new Sprite(
            ImageManager.loadTitle2("titleframe")
        );
        this.addChild(this._backSprite1);
        this.addChild(this._backSprite2);
    };

})();

画像はこちらに置いておきました。
titleframe.png

このSamplePlugin.jsとtitleframe.pngをプロジェクトに配置しましょう。

• [プロジェクトフォルダ]/js/plugins/SamplePlugin.js
• [プロジェクトフォルダ]/img/titles2/titleframe.png

ツール > プラグイン管理 > プラグインリスト > プラグインの設定

画面解像度も変更しましょう。

ツール > データベース > システム２ > 高度な設定

|名前|値|
|:-----------|------------:|:------------:|
|画面の幅| 1280|
|画面の高さ| 800|
|UIエリアの幅| 1180|
|UIエリアの高さ| 700|

それではテストプレイしてみましょう。

やはり格調高い。そしてこれをゲーム画面に実現したい訳です。

今回は、流行りのZennに記事を書いてみたご報告と
改めてQiitaの良さを実感した所感のご報告でした。