【解決済み】ステータス画面を改造するとステータス項目が重なってしまう

アバター
エックリ
記事: 54
登録日時: 2020年8月18日(火) 20:43
お住まい: 犬のしっぽ

【解決済み】ステータス画面を改造するとステータス項目が重なってしまう

投稿記事by エックリ » 2020年8月22日(土) 22:48

こんにちは。
ステータス画面の項目を左側に寄せて、右側に立ち絵を入れるスペースを作りたいと思っています。

「rpg_windows.js」を元に新しいプラグインを作って改造しているのですが上手くいきません…
「攻撃力」や「防御力」などの項目が重なってしまいました。

添付画像の上段のような形にしたいのですが、下段のようになってしまいます。
Test.png


実際に作成したスクリプトがこちらです。
SimpleStatusMenu_Test.js
(5.99 KiB) ダウンロード数: 15 回


■やりたいこと
・ステータス画面の項目名とパラメータの位置を調整したい
・項目はコメントアウトなどで一部非表示にしたい(運など)

■現状
・すべてのステータスが重なってしまう(重複して表示?)
・HP、MPの現在値が表示されない

■別プラグインで行う予定のこと
・フォントと文字サイズを変える
・装備スロットの数を増やす
・立ち絵と背景を指定する
・解像度をデフォルトより大きくする

現状の2点が解決できれば完成しそうなのですが、どなたかアドバイスをいただけないでしょうか。
よろしくお願いします。
最後に編集したユーザー エックリ on 2020年8月23日(日) 20:50 [ 編集 1 回目 ]

最近始めた初心者です。
アバター
エックリ
記事: 54
登録日時: 2020年8月18日(火) 20:43
お住まい: 犬のしっぽ

Re: ステータス画面を改造するとステータス項目が重なってしまう

投稿記事by エックリ » 2020年8月23日(日) 10:15

いろいろいじっているうちにここまでできました!

Test2.png

SimpleStatusMenu_Test.js
(6.81 KiB) ダウンロード数: 14 回


本当はHP、MPのバーを消したいのですが、ひとまず表示できました!
すべてのステータスが重複して表示される状態も解消できたと思います。
ただ、ステータスがほかより太字になっていて、原因がわかりませんでした :|
なぜ太字になるのでしょうか…?

■現状
・Lvの数値をほかの数値に揃えたい
・ステータスの項目名と数値の部分が太字(?)になる
最近始めた初心者です。
アバター
Plasma Dark
記事: 669
登録日時: 2020年2月08日(土) 02:29
連絡を取る:

Re: ステータス画面を改造するとステータス項目が重なってしまう

投稿記事by Plasma Dark » 2020年8月23日(日) 11:56

画面をいじりたいと思ったときに追加プラグインを書く、素晴らしいですね。

ただ、ステータスがほかより太字になっていて、原因がわかりませんでした :|
なぜ太字になるのでしょうか…?


forループで繰り返し描画しているので、重なって太く見えています。

SimpleStatusMenu_Test.js を読んで、必要と思われるコードの書き方のコツを列挙します。

1. オートフォーマット機能、ホワイトスペース表示機能を持つエディタを利用する

コード中のインデントに半角スペースとタブ文字が混じっています。
これは読み手に深刻なダメージを与える呪詛の一種ですので、インデントに使用する文字は統一してください。
オートフォーマット機能を持つエディタであれば、ショートカットキーを押すだけでインデントを自動で整えてくれます。(Windows, VSCodeであれば Shift + Alt + F)

インデントの整ったコードは非常に読みやすいです。
提示頂いたコードで言えば、本来不要なfor文のブロックがあることがひと目でわかります。

2. メソッドの直前にJSDoc形式のコメントを書く

特に、メソッドの名前から中身の処理がすぐにわからないような場合に有効です。
例えば、以下のように書きます。

コード: 全て選択

  /**
   * ブロック1(画面左上パート)を描画する
   * ブロック1には以下の内容を描画する
   * - アクター名
   * - アクターのクラス名
   * - アクターの二つ名
   * @param {number} baseY Y座標の基準
   */
  Window_Status.prototype.drawBlock1 = function (baseY) {
    ...(ここでは本質と関係ないのでコードを省略しています。以降の例でも...は省略の意味です)
  };


もちろん、メソッドの名前から処理内容がすぐにわかるような状態にするのが最も望ましいです。

3. マジックナンバーを避ける

座標の描画で度々同じ数字を書かれているようですが、これは定数として書き出しておくと手間や混乱がないです。

コード: 全て選択

/**
 * ステータス描画の左端X座標
 */
const LEFT_X = 6;

/**
 * ステータス名の幅
 */
const PARAMETER_NAME_WIDTH = 120;

/**
 * パラメータ数値描画のX座標オフセット
 */
const PARAMETER_NUMBER_X_OFFSET = 120;

/**
 * ステータス描画の数値の幅
 */
const PARAMETER_NUMBER_WIDTH = 60;
...
Window_Status.prototype.drawParameters = function(x, y) {
  ...
  this.drawText(TextManager.param(2), x, y + lineHeight * 2, PARAMETER_NAME_WIDTH);
  ...
  this.drawText(this._actor.param(2), x + PARAMETER_NUMBER_X_OFFSET, y + lineHeight * 2, PARAMETER_NUMBER_WIDTH,
  'right');
  ...
};


数値幅については、桁数指定するのであれば以下のような書き方もできます。

コード: 全て選択

Window_Status.prototype.parameterNumberWidth = function () {
  return this.textWidth('0000');
};


Lvの数値をほかの数値に揃えたい


drawActorLevelメソッドの中身を調整してあげれば揃えられるかと思います。
アバター
エックリ
記事: 54
登録日時: 2020年8月18日(火) 20:43
お住まい: 犬のしっぽ

Re: ステータス画面を改造するとステータス項目が重なってしまう

投稿記事by エックリ » 2020年8月23日(日) 15:30

Plasma Darkさん、詳しく教えていただきありがとうございます!
VSCodeというソフトをインストールして、コードを修正してみました。
コードを編集するのはほとんど初めてのため理解が合っているか不安ですが…

Test3.png

SimpleStatusMenu_Test.js
(11.35 KiB) ダウンロード数: 2 回


コード: 全て選択

this.drawActorLevel(this._actor, x, y + lineHeight * 0);

↑のxに数字を入れると、「Lv」と「現在のLvの数値」の位置が一緒に左右に動いてしまいました。
検索したら下記のトピックが見つかり、コードを入れたらLvと数値の間を調整できました(画像上段)。

【解決】AltMenuScreen改変でレベル表示の幅指定ができない
https://tm.lucky-duet.com/viewtopic.php?t=8970

コード: 全て選択

Window_Base.prototype.drawActorLevel = function(actor, x, y, width) {   //widthを受け入れるようにする
    var internalWidth = width;
    if (!internalWidth)
    {
        //widthが提供されてない際の対処(実質undefined)としてデフォルト値セット
        internalWidth = 120;
    }
   
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.levelA, x, y, 48);
    this.resetTextColor();
    this.drawText(actor.level, x + internalWidth - 38, y, 36, 'right'); //数値の相対位置をwidthにも依存するよう改変。右寄せの為やや多めに幅取り
};


しかし今度はメニューを開いた時のステータスでもLvの位置が変わってしまいました(画像下段)…… :o
ステータス項目を縦に揃えるために、HPとMPの項目名と数値の間を縮める方法を検索したら海外フォーラムにこのような情報がありました。

Remove gauges and move Hp/Mana numbers
https://forums.rpgmakerweb.com/index.php?threads/remove-gauges-and-move-hp-mana-numbers.75689/

Okay, so what this function is doing is setting a variable called labelWidth to the width of the text "HP", then one called valueWidth to the width of the text "0000" (approximately 62 pixels) and one called slashWidth to the width of the text "/" (approximately 10 pixels). We're then setting some x coordinate variables: x1 is assigned the value of the passed-in x coordinate, plus the passed-in width, minus valueWidth. x2 is assigned the value of x1 minus slashWidth. x3 is assigned the value of x2 minus valueWidth.

Taking an x coordinate of 162 and width of 186, this will make x1 162+186-62 = 286, x2 will then be 286-10 = 276, and x3 will be 276-62 = 214. This gives us the starting coordinate of the current HP, the slash, and the max HP (in reverse order).

So the issue here is that the "width" value being passed in is too high. If we trace back the function calls, we can see this line in drawActorSimpleStatus:

コード: 全て選択

var width2 = Math.min(200, width - 180 - this.textPadding());

So basically what we want to do is make that value smaller. As for drawing the HP right under the name...if we look, the call to drawActorHp is using a value called x2 instead of x, and further up that variable is declared as x + 180. So all we need to do for this is call drawActorHp using x instead.


そこで数値をこのように変えたら、メニュー画面を開いた時のHP・MPは縮まったのですが、ステータス画面では特に変化がありませんでした。

コード: 全て選択

var width2 = Math.min(200, width - 180 - this.textPadding());

var width2 = Math.min(110, width - 180 - this.textPadding());


引用が多くなってしまいすみません。
ステータス画面を調整しつつ、メニューを開いた時のステータスの位置が変わらないようにするにはどうすれば良いでしょうか…?

■現状
・ステータス画面のLv・HP・MPとほかの項目を縦に揃えたい
・メニュー画面のステータスには影響しないようにしたい
最近始めた初心者です。
アバター
Plasma Dark
記事: 669
登録日時: 2020年2月08日(土) 02:29
連絡を取る:

Re: ステータス画面を改造するとステータス項目が重なってしまう

投稿記事by Plasma Dark » 2020年8月23日(日) 18:10

VSCodeというソフトをインストールして、コードを修正してみました。


良いですね。かなり読み手に優しいコードになったかと思います。
フォーマットはかけ忘れることがしばしばあるので、もし不安であればVSCodeの設定から Format On Save をONにしておくと、保存したときに自動でフォーマットをかけてくれます。

しかし今度はメニューを開いた時のステータスでもLvの位置が変わってしまいました(画像下段)


書き換えた drawActorLevel メソッドが Window_Base クラスのものであるためです。
RPGツクールMVのウィンドウ系クラスは全て Window_Base を継承しているため、 Window_Base.prototype.drawActorLevel を書き換えるとあらゆるウィンドウのレベル描画に影響が出ます。
今、書式を整えたいのは WIndow_Status であるため、 Window_Status のメソッドを書き換えてしまうと手っ取り早いです。
アバター
エックリ
記事: 54
登録日時: 2020年8月18日(火) 20:43
お住まい: 犬のしっぽ

Re: ステータス画面を改造するとステータス項目が重なってしまう

投稿記事by エックリ » 2020年8月23日(日) 20:45

Plasma Darkさん、いろいろ教えていただきありがとうございます!

どういう原理でできたのか不明ですが、見様見真似でほぼ理想通りの形にすることができました。
今のところステータス画面以外には影響していないようです。
Test4.png


今回作ったプラグインは、素材というほどのものではありませんが、一応形にはなったのかな?と思います。
改変・再配布などの決まりはありませんので、もし必要な方がいらっしゃいましたらご自由にお使いください。
(ちなみにプログラムの知識ゼロの初心者が作成したので中身はグチャグチャです)

ステータス画面のレイアウトをシンプルに変えるプラグイン
SimpleStatusMenu.js
(14.3 KiB) ダウンロード数: 32 回


ありがとうございました :D
最近始めた初心者です。

“MV:質問” へ戻る