ページ 11

【解決済み】メニューウィンドウの余白をなしにしてサイズを変えると文字が切れる

Posted: 2018年9月01日(土) 11:06
by にゃたま
スクリプトに詳しい方にお聞きします。
メニューの中にマップ名を入れようとスクリプトをいじってたのですが
ウィンドウの余白をなくしたときにウィンドウサイズを変えると文字まで切れる問題が発生しました。

普通にウィンドウ内に情報をいれようとすると以下のようになります。
スクリーンショット 2018-09-01 10.46.22.png
スクリーンショット 2018-09-01 10.46.22.png (66.23 KiB) 閲覧された回数 3875 回
その後、Scene_Menuのcreateのところで当該ウィンドウの.paddingを0にしました。
スクリーンショット 2018-09-01 10.47.48.png
スクリーンショット 2018-09-01 10.47.48.png (66.1 KiB) 閲覧された回数 3875 回
余白をなくした為、このように左上に表示できました。
ウィンドウサイズは変わらないので下側に空きができてしまいました。
なので今度はウィンドウサイズを変えるために高さを75→65に変えてみました。
すると今度はどうでしょう。
ウィンドウサイズが小さくなると同時に文字まで下のほうが切れてしまいました。
スクリーンショット 2018-09-01 10.49.11.png
スクリーンショット 2018-09-01 10.49.11.png (52.25 KiB) 閲覧された回数 3875 回
文字の高さを維持したままウィンドウのみ高さを調節するにはどうしたらよいでしょう?
コードの一部を抜粋して下に記載しました。わかる方いましたらよろしくお願いいたします。

コード: 全て選択

 
 Window_InformationMapName.prototype.initialize = function() {
	var pos_x = 0;   // X位置
	var pos_y = 400  // Y位置
	var width = 240; // 幅
	var height = this.fittingHeight(1) + 2; // 高さ
	Window_Base.prototype.initialize.call(this, pos_x, pos_y, width, height);
};

Window_InformationMapName.prototype.refresh = function() {
	this.contents.clear();
	// マップ名
	this.changeTextColor(this.systemColor());
	this.contents.fontSize = 12;
 	this.drawText('MAP', this.standardPadding() + this.textPadding(), -10, 56, 'left');
	this.resetTextColor();
	this.contents.fontSize = 28;
 	this.drawText($gameMap.displayName(), this.standardPadding(), 7, this._width - 20, 'left');
 };
 

Re: メニューウィンドウの余白をなしにしてサイズを変えると文字が切れる

Posted: 2018年9月01日(土) 12:23
by フトコロ
こんにちは。

ウィンドウの余白をthis.padding だけ変更しているためだと思います。

そのウィンドウの余白は、standardPadding() 内の数字が初期値になりますが、
コンテンツエリア(ウィンドウ内の文章などを実際に表示できる範囲)のサイズを設定するときに
そのstandardPadding() の値を使います。
this.padding と this.standardPadding() の値は別です。

この値を変えないと、意味がないです。

Re: メニューウィンドウの余白をなしにしてサイズを変えると文字が切れる

Posted: 2018年9月01日(土) 13:02
by にゃたま
フトコロ様

こんにちは。お世話になっております。
フトコロ さんが書きました: ウィンドウの余白をthis.padding だけ変更しているためだと思います。
なるほど、standardPaddingのほうを変更する必要があるのですね。

.paddingをやめて以下のコードを追加したら画像のようになりました。

コード: 全て選択

Window_InformationMapName.prototype.standardPadding = function() {
        return 5;
};
スクリーンショット 2018-09-01 12.56.53.png
スクリーンショット 2018-09-01 12.56.53.png (57.15 KiB) 閲覧された回数 3843 回
今度はウィンドウの右下と左下にウィンドウの線が少し入ってしまう結果になりました。
何故このようになってしまうのでしょうか?
.paddingはcreateのほうで変更しなくてよいという認識で良いでしょうか?

Re: メニューウィンドウの余白をなしにしてサイズを変えると文字が切れる

Posted: 2018年9月01日(土) 13:47
by にゃたま
念の為、create部のコードも掲載しておきます。

コード: 全て選択

var _Scene_Menu_create = Scene_Menu.prototype.create;
Scene_Menu.prototype.create = function() {
        _Scene_Menu_create.call(this);
        this.createInformationWindow();
};
    
Scene_Menu.prototype.createInformationWindow = function() {
        if(InfoVisible_MapName){
            this._informationWindowMapName = new Window_InformationMapName();
            this.addWindow(this._informationWindowMapName);
        }
};
    
var _Scene_Menu_update = Scene_Menu.prototype.update;
Scene_Menu.prototype.update = function() {
        _Scene_Menu_update.call(this);
        if(InfoVisible_MapName) this._informationWindowMapName.refresh();
};

Re: メニューウィンドウの余白をなしにしてサイズを変えると文字が切れる

Posted: 2018年9月01日(土) 15:28
by フトコロ
にゃたま さんが書きました:今度はウィンドウの右下と左下にウィンドウの線が少し入ってしまう結果になりました。
何故このようになってしまうのでしょうか?
高さはいくつに設定していますか?
MVのコアスクリプトの仕様上、高さか幅は 48 よりも大きく設定しないと、
ウィンドウのフレーム部が正しく表示できない場合があります。

ちなみに、なぜ48なのかというと、rpg_core.js に
以下のメソッドでウィンドウのフレームを描画する処理が規定されていますが

コード: 全て選択

Window.prototype._refreshFrame = function() {
    var w = this._width;
    var h = this._height;
    var m = 24;
    var bitmap = new Bitmap(w, h);
略
};
m = 24 とあり、この値が四隅のサイズを規定しています。
四隅+その間のフレームを描画させるので、24 * 2 = 48 よりも大きくないと
間のフレーム部が正しく表示できなかったり、四隅のフレーム部同士が重なったりします。
にゃたま さんが書きました: .paddingはcreateのほうで変更しなくてよいという認識で良いでしょうか?
その通りです。
initialize のところで、 .padding に standardPadding() の値が代入されるからです。

Re: メニューウィンドウの余白をなしにしてサイズを変えると文字が切れる

Posted: 2018年9月01日(土) 15:33
by にゃたま
検証した結果standardPadding を5以下に設定すると画像のようにウィンドウ線が表示されてしまうようです。
6以上にしたら出ませんでした。とりあえずは6にしてやってみることにします。
もし5以下のとき症状が出る理由がわかりましたら教えて頂けたら幸いです。

追記
高さは以下のようになります
var height = this.fittingHeight(1) + 2; // 高さ

console.logで出したら46になりました
48以下だから小さすぎたのですね…原因がわかりましたありがとうございます。

再追記
5にしても高さをthis.fittingHeight(1) + 4;にすることで48をクリアしたので
正常に表示することができました。スッキリしました!的確な回答ありがとうございました!!