【解決済み】ウィンドウの大きさを変えるとフォントがにじむ

[ホナミ]

いつもお世話になっています。

メッセージウィンドウの大きさを変えたいのですが、下記の部分をプラグインに抜き出して書き換えたところ、大きさは変わったもののフォントが滲んでしまいました。

rmmz_scenes.js >> 555

コード: 全て選択

Scene_Message.prototype.messageWindowRect = function() {
    const ww = Graphics.boxWidth;
    const wh = this.calcWindowHeight(4, false) + 8;
    const wx = (Graphics.boxWidth - ww) / 2;
    const wy = 0;
    return new Rectangle(wx, wy, ww, wh);
};

（幅を変えたかったのでconst ww = Graphics.boxWidth * 0.90にしました）

触る場所が違うか他にも追加しなければいけない処理があるのかとは思うのですが、
現状の知識では見当がつかないため、ご助力いただけましたら幸いです。

[名無し蛙]

見た感じ合ってますよ。
ツクールMZではSceneクラス改造による画面UIの変更を推奨してますし
そもそもメッセージウィンドウは
ウィンドウサイズを変えても文字の表示サイズや表示領域が変わる訳ではないので
歪んだり滲んだりといった結果に繋がるとは思えません。

試しに0.5倍に調整して確認しましたが文字が滲んだ様子はありませんでした。
特殊なプラグイン、特殊なフォントと競合しているか
あるいは「滲む」という概念に認識の齟齬があるとしか…

[Plasma Dark]

システム設定でフォントサイズを21未満にしていないでしょうか。
MV時代から、21px未満の文字を描画しようとすると文字がにじむ問題があります。

viewtopic.php?t=5176

MVのコミュニティ版のコアスクリプトでは、小さいフォント専用に描画メソッドを用意して対応しているようです。同じことを試してみれば解決できるかもしれません。
https://github.com/rpgtkoolmv/corescript/blob/master/js/rpg_core/Bitmap.js#L632

[ホナミ]

返信ありがとうございます！

現象の画像添付もせずに失礼しました。x0.9したものとそうでないものを並べて比較した画像を添付します。
元々他のプラグインをオフにしただけの状態で確認していたのですが、
一度新規作成したばかりのプロジェクトに作成したプラグインを適用してみたところ、やはり同様の現象を確認しました。
（添付画像は分かりやすいようにウィンドウとテキストカラーいじってますが、デフォルトの画像でも確認しました）
ただ、0.5にしたときは発生せず、0.9に近い数字にした時だけ出るようです。
にじむというか、少しぼやける感じになります。

同じプラグイン内に下記の処理も同時に記載していますので、念のため記載します。
（上記の確認時はコメントアウトして確認しています）

コード: 全て選択

    //ネームボックスウィンドウの幅を固定し、同時にネームボックス未使用時に場所を移動させる。
const Window_NameBox_updatePlacement = Window_NameBox.prototype.updatePlacement;
  Window_NameBox.prototype.updatePlacement = function () {
    Window_NameBox_updatePlacement.call(this);
   
    if($gameMessage.speakerName().length == 0 ){
        this.width = 0;
        this.y = 1000
        }
    if($gameMessage.speakerName().length >= 1){
        this.x = 70
        this.width = $gameVariables.value(22);
    }};

    //フォントカラーとアウトラインカラーを変更する
   const _ColorManager_normalColor = ColorManager.normalColor;
   ColorManager.normalColor = function() {
       return (SceneManager._scene instanceof Scene_Map) ?
       "rgba(91, 54, 27, 1.0)": _ColorManager_normalColor.apply(this, arguments);
   };

   ColorManager.outlineColor = function() {
       return (SceneManager._scene instanceof Scene_Map) ?
       "rgba(255, 255, 255, 0.6)" : _ColorManager_normalColor.apply(this, arguments);
   };

ひとまずコード自体は間違っていなかったようでよかったです。
慣れていないためそこから不安でして……。

Plasma Darkさんに記載いただいたMV時代の文字がにじむ現象の対応方法については、
大変申し訳ないのですが私の知識不足で適応箇所が特定できず、まだ試せていません……。

[Plasma Dark]

Plasma Darkさんに記載いただいたMV時代の文字がにじむ現象の対応方法については、
大変申し訳ないのですが私の知識不足で適応箇所が特定できず、まだ試せていません……。

これは表示フォントサイズが21px未満の場合に限った話ですので、今回はおそらく関係なさそうですね。

ただ、0.5にしたときは発生せず、0.9に近い数字にした時だけ出るようです。

ウィンドウの横幅やx座標が整数でなくなっているせいかもしれません。
0.9倍した後で、 Math.floor 等で整数にしてあげるとどうでしょう。

[名無し蛙]

じ、自分の目には同じに見えますね…（節穴）
回答する前にも端数が関係してるかとも思って
適当に半端な数値も入れて試したんですけど変わってるようには見えませんでした。

画面横幅（データベース設定）を816と仮定した場合、
基準となる画面横幅(Grapchis.boxWidth)は マージン分(4 * 2px )小さい808になります。
恐らくはブラウザ出力してスマホで遊ぶ時等に誤タッチが起きないようにする為ですかね？
そこから更にウィンドウ内容の横幅はpadding分（12 * 2）一回り小さい784。
今回のwwを808*0.9(727.2)と仮定した場合、
innerWidthはそのまま703.2になるのでこれが影響している可能性はありますね。
Window_Messageの文字表示処理を見てもinnerWidthが関わってるようには見えないけど
もっと深いpixi.js寄りの処理に影響を与えても不思議ではないです。

まぁ、とりあえずPlasma Dark氏の言うように端数を削って確認してください。
Math.floor(x)が切り捨て、Math.ceil(x)が切り上げです。
自分の目には成功してるのか失敗してるのかよく分かりません

[ホナミ]

お二方ともご助力下さりありがとうございます。
正直いうと、気になった私自身の目にも、何度も確認してると分からなくなります……。

おかげ様で解決しましたので、以下詳細ご報告申し上げます。

最初の*0.9の状態でconsole.logに出力したところ、こちらご指摘の通り端数(727.2)が発生しておりました。
その後、Math.floor(727)ではぼやけたままでしたが、Math.ceil(728)を適用したところ治りました。
ピクチャデータだと奇数でぼやけると聞いたことがありますが、テキストの描画領域ってピクチャデータと同じ扱いなんでしょうか……？

最終的にコード下記のようになりました。

コード: 全て選択

Scene_Message.prototype.messageWindowRect = function() {
    const ww = Math.ceil(Graphics.boxWidth * 0.90);
    const wh = this.calcWindowHeight(4, false) + 8;
    const wx = (Graphics.boxWidth - ww) / 2;
    const wy = 0;
    return new Rectangle(wx, wy, ww, wh);
};

一人だったらコードの使い方の正否さえ怪しい状態でしたので、改めてお二人には深くお礼申し上げます。
ありがとうございました。