みなさん、お久しぶりです！ちぇるしー🍩です！
少し間が空きましたが、一応制作をちまちま進めています✨

では初っ端にこちらをご覧ください！

ゲームのメインキャラクターが全員そろいましたので、キャラクター紹介用のPVもどきを作りました～！
動画制作がめちゃくちゃ苦手なのがバレてしまう…_(:3 」∠)_

さて、前回の記事ではゲームの概要についてさらっと解説しましたが、今回は中身…というか、作業報告になります😉
主にメインメニュー、ステータス画面の改変について詳しく書いていこうと思います～！

目次
1.メインメニューの改変
　1-1.ウィンドウの枠を変更
　1-2.メニューの向きを縦表示から横表示に変更
　1-3.現在地とプレイ時間の表示
　1-4.キャラクターの立ち絵を表示
2.ステータス画面の改変
　2-1.立ち絵の表示
　2-2.ステータス情報の表示位置の変更、非表示

1.メインメニューの改変

実はRPGツクールMVではメインメニューなどの様々なウィンドウは予め用意されており、自分で新しく作る必要は特にないのです。

こちらは私がツクールになれるためにテストで作ったゲームのメインメニューです！イベント作成を試すことがメインだったので、メインメニューは特にいじってませんでした。
つまりこれがツクールのデフォルト(最初の設定)のメニューということになります！

そしてこれが今制作中のゲームのメインメニュー。

かなりお洒落になったと思いませんか！？
主な変更点は以下の4つです！

①ウィンドウの枠を変更
②メニューの向きを縦表示から横表示に変更
③現在地とプレイ時間の表示
➃キャラクターの立ち絵(ミディアムショット)を表示

あれこれ自分なりにいじくって頑張りました…とはいえ、自分でコードを一から書きなおすほどの能力はないので、様々な人たちが作ったたくさんのプラグインをお借りしています。

1-1.ウィンドウの枠を変更
これは別に大した作業はしていません…
プロジェクトフォルダ内の\img\system\Window.pngを別の素材で上書きしただけです(笑)

systemの中にはゲームのシステムに関する画像ファイルが用意されていますので、これらを差し替えると簡単にオリジナルの画面が作られるわけです✨
まあ、使用した枠も実はツクールMVで配信された公式素材なんですが…

1-2.メニューの向きを縦表示から横表示に変更
引き続きあんまり大したことはしてないです！
公式プラグインであるAltMenuScreenをONにすると自動的に横向きのメニュー画面に変更されます。

1-3.現在地とプレイ時間の表示
自分でもトライしてみましたが、なかなかうまくいかず…
こちらで配布されているオリジナルメニュープラグインをお借りしました！

このメニュー画面では現在地とプレイ時間のみの表示となっていますが、本来はインフォメーションメニューも表示されています。
どうやって手を加えたのがちょっと忘れてしまったのですが、多分ウィンドウの縦幅を小さくしただけだと思います💦

ウィンドウの表示位置の変更や、大きさの変更はすべてトリアコンタン様が配布しているGUI画面デザインプラグインで行っています～😊
自分でコードを書き換えることなく、直感的な操作で画面が作られるのでとても便利です！

1-4.キャラクターの立ち絵を表示
一番苦戦したようなしなかったような…！当たり前のようにプラグインをお借りしたのでかなり楽に進められたと思います～！

お借りしたのはGalv's Bust Menuです！海外の方が作られたプラグインなので最初はよくわかりませんでしたが、Galv様のウェブサイトにてデモが配信されていたため見ながらなんとか調整することができました_(:3 」∠)_

こちらがプラグインの画面…わかってたけど…英語……
びっくりするほど英語が嫌いなんですけど、直接数値をいじったりしつつ…
あとはClassは職業のことだろうとか、Expは経験値バーだなとか、読み取れる部分もあったのでなんとかなりました。

パラメータはそれぞれこんな感じかな～と！
Menu Actors→パーティメンバー数
Menu Actor Rows→変更するとステータスが表示されなくなる
Name→キャラの名前
Nickname→二つ名？(使用してないのでわからなかった)
Class→職業
Level→レベル
States→ステート、状態異常の表示
Bars→HP/MPのバー
Show Exp Bar→経験値バーを表示するかどうか
Exp Bar→表示する位置の設定
JP→？
Exp Bar Height→バーの高さ
Show Exp Text→経験値バーのテキスト
Exp Text→次の経験値
Max Exp Text→経験値がマックスの時に表示するテキスト
Exp Bar Color1→？
Exp Bar Color2→？
Bust Y→バスト画像(立ち絵)の表示位置、数値を小さくすると上に寄る
Bust Height→バスト画像の高さ

使用してない部分はわかりかねますが…！
少しでも参考になれば幸いです☺英語読むのも、自分であれこれいじるのも大変だし時間かかりますしね！時短できるところはしていきましょう！

本当はメニューに背景つけたりなんかも試してたんですけど、時間が掛かりそうだったので今回は妥協しました…
次の機会か、もう少し作りこめそうだなと思ったらチャレンジするつもりにしています！

2.ステータス画面の改変

メインメニューに続いてステータス画面をつくっていきます。

これがツクールデフォルトのステータス画面。
なんというか……地味……！

こちらが改変後のメニュー画面です✨
いや、なんか、もっと地味になったな…？！背景とかつけたらきっともっとお洒落にできるはず…！細かな修正はいずれ…。
というのは置いといて、不要な情報を全て非表示にして立ち絵を大きく載せてみました！頑張ったしね…(？)

装備に関しては装備メニューが別にあるので表示しなくていいかなという判断です！あと今回のゲームではレベルの概念はありませんので、レベル関係も全て非表示に。いい装備を集めて強化していってくださいね！

変更点は大きく2つ。
①立ち絵の表示
②ステータス情報の表示位置の変更、非表示
では順番に解説していきます！

2-1.立ち絵の表示
メインメニューに続いて、プラグインをお借りしたため簡単に表示させることができました！
お借りしたのはトリアコンタン様のバストアップ表示プラグインです✨

立ち絵用の画像をpictureフォルダに入れて、データベースのアクターのメモ欄にタグを記述するだけで表示されるのでとても簡単です～！
他にも便利なプラグインをたくさん作成されていますので、これからもお世話になりそうです…！

2-2.ステータス情報の表示位置の変更、非表示
この作業はさすがにプラグインに頼るわけにもいかず…レイアウト変更ができるものはないかと探しては見たものの、思うようなものが見当たらなかったため自力で編集しています_(:3 」∠)_

プロジェクトのjsフォルダ内にはダウンロードしたプラグインの他に、ゲームを動かすための基本的なスクリプトが入っています。
rpg_から始まるいくつかのファイルがありますが、今回はウィンドウに関する部分の編集をするのでrpg_window.jsを開きます。

開くと…まあ……当然ずらっとソースコードが表示されるんですけど…！
まず自分が編集したい部分がどこにあるのかを探さなくてはなりません…。膨大な量の中から探すのは大変なのでとりあえずステータス画面のことだから、statusとかいう記述がないかな？と思い検索してみることに！

で！あるにはあったんですけどありすぎでした！ありすぎなんですが、Window_Statusと見出しのようにメモ書きされている場所があったのでそこから見ていきます…

少しずつスクロールしていくと…

Window_Status.prototype.drawBlock1 = function(y) {
    this.drawActorName(this._actor, 6, y);
    this.drawActorClass(this._actor, 192, y);
    this.drawActorNickname(this._actor, 432, y);
};

あっ、なんかそれっぽくないですか？！それっぽいですよね！？
アクターネーム…キャラクターの名前に、アクタークラス…キャラクターの職業！

ここでもう一度、デフォルトのメニュー画面を見てほしいんですが、薄いラインでいくつかのブロックに分かれていることがわかりますよね？
さっきのコードにもdrawBlock1との記述がありました。しかも、その中身は名前と職業…もうここで間違いないでしょう！

私の思った通り、正しかったようで名前と職業をコメントアウトすることで一番上に表示されていた名前と職業は非表示になりました！やったぜ！

Window_Status.prototype.drawBlock2 = function(y) {
    this.drawActorFace(this._actor, 12, y);
    this.drawBasicInfo(204, y);
    this.drawExpInfo(456, y);
};

ちなみにブロック2の内容はこんな感じで、キャラクターのフェイスグラフィックの表示とか経験値に関することが書かれています。その後の内容も各ブロックの内容に沿ったものでした。
BasicInfoってなんやねん！って思いましたが、さらに下へスクロールするとちゃんと中身も書いてありました。

Window_Status.prototype.drawBasicInfo = function(x, y) {
    var lineHeight = this.lineHeight();
    this.drawActorLevel(this._actor, x, y + lineHeight * 0);
    this.drawActorIcons(this._actor, x, y + lineHeight * 1);
    this.drawActorHp(this._actor, x, y + lineHeight * 2);
    this.drawActorMp(this._actor, x, y + lineHeight * 3);
};

レベルの表示なんかもここに含まれてるみたいですねー！
非表示にするついでに、私はこの中にキャラクターの名前と職業もいれてしまいました！

Window_Status.prototype.drawBasicInfo = function(x, y) {
    var lineHeight = this.lineHeight();
    this.drawActorName(this._actor, x, y + lineHeight * 0);
    this.drawActorClass(this._actor, x + 192, y + lineHeight * 0);
    //this.drawActorLevel(this._actor, x, y + lineHeight * 0);
    this.drawActorIcons(this._actor, x, y + lineHeight * 1);
    this.drawActorHp(this._actor, x, y + lineHeight * 2);
    this.drawActorMp(this._actor, x, y + lineHeight * 3);
};

難しいことはなく、さっきみたdrawActorNameとかをコピペしてしまうだけ…うまくいってくれて何よりです。
この調子でいらない部分を消したりする作業を続けていきました。

ステータス情報の表示非表示の切り替えを終えてから気が付いたんですけど、この各ブロックを区切る線の記述もあったんですよね！当たり前なんですが！

Window_Status.prototype.refresh = function() {
    this.contents.clear();
    if (this._actor) {
        var lineHeight = this.lineHeight();
        this.drawBlock1(lineHeight * 0);
        this.drawHorzLine(lineHeight * 1);
        this.drawBlock2(lineHeight * 2);
        this.drawHorzLine(lineHeight * 6);
        this.drawBlock3(lineHeight * 7);
        this.drawHorzLine(lineHeight * 13);
        this.drawBlock4(lineHeight * 14);
    }
};

これがステータス画面の構造を示す記述みたいです。
Lineって入ってるので、drawHorzLineをコメントアウトすると消えてくれました！残しててもよかったんですけど、立ち絵貫通しちゃうので…

以上がメニュー画面の改変の作業です☺
本当に大したことしてないですね！？頑張った感が強かったので振り返っててびっくりしました…いや頑張ったんですけども！

戦闘画面についても触れていこうと思いましたが、長くなりましたのでこの辺りで終わらせていただきます✌

もっとうまくやる方法があるよ、とかこうやりたいんだけどうまくいかないですとか、ございましたらお聞かせくださいませ！できるかどうかはわかりませんが、一緒にやってみたいと思います✨

では、また次回！