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

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

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

#画面に額縁が無い限り、オレのやる気はゼロだ。
![ウルティマ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/18f9d5f2-3c65-a38e-fb73-3154f0c47fb2.png)

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

[PixiJS](https://www.pixijs.com/)
![PixiJS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/500a2376-8212-bc98-6224-1c0b83579188.png)

#あかん、全く解らん。

![ヤムチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/5d083797-b06c-7d28-d50c-74200e4e18d9.png)
ここからスタート。
プラグインの情報もほとんどない。
なるほど、これは私が入門書を書くしかないのですね。

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

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

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

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

```js: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というのがデフォルト枠画像のようです。

```js
ImageManager.loadTitle2($dataSystem.title2Name)
```

こいつを

```js
ImageManager.loadTitle2("titleframe")
```

こうします。

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

```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](https://github.com/pepaperonp/rmmz_traditional_frame)

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

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

***ツール > プラグイン管理 > プラグインリスト > プラグインの設定***
![プラグイン説明.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/1f6e2604-8faf-89d1-6b6e-9f6163900122.png)

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

***ツール > データベース > システム２ > 高度な設定***
![画面サイズ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/b491b22f-550c-0676-fd6c-48e495610a4a.png)

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

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

![タイトル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/48c80eef-929c-7017-fe4b-abb9aa043aa0.png)

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

![ツクール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533968/21740067-3f3a-5c06-d2ba-ea62cfd5af46.png)

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