吹き出しウインドウでルビ付き文章

[akira57]

お世話になっております。
トリアコンタン様の吹き出しウィンドウプラグイン（MessageWindowPopup.js）を使用させて頂いております。
そこで、吹き出しウインドウにルビ付き文章を作成する方法を教えて頂けないでしょうか。
添付した画像のように、ルビを表示するプラグイン（panda様「PANDA_RubyText.js」）で吹き出し＆ルビ付き文章の実現はできたのですが、吹き出しの下部の文字（画像だと２行目の下部）が欠けてしまいます。
これはルビの分だけ文字が下がるため起こると考えられるので、下部の枠の高さを広くすることで解決しそうな気がしまうが…良い方法あればよろしくお願いいたします。
akira57

[ecf5DTTzl6h6lJj02]

こんにちは。

お世話になっております。
トリアコンタン様の吹き出しウィンドウプラグイン（MessageWindowPopup.js）を使用させて頂いております。
そこで、吹き出しウインドウにルビ付き文章を作成する方法を教えて頂けないでしょうか。
添付した画像のように、ルビを表示するプラグイン（panda様「PANDA_RubyText.js」）で吹き出し＆ルビ付き文章の実現はできたのですが、吹き出しの下部の文字（画像だと２行目の下部）が欠けてしまいます。
これはルビの分だけ文字が下がるため起こると考えられるので、下部の枠の高さを広くすることで解決しそうな気がしまうが…良い方法あればよろしくお願いいたします。
akira57

ルビ表示プラグイン
http://www.werepanda.jp/blog/plugin/20200920202955.html
のルビのフォントサイズが 10 となっているので、
フキダシウィンドウプラグイン
https://raw.githubusercontent.com/triac ... owPopup.js
のパラメータ、行間 を 10 以上にすることで、
きちんと表示されるのではないかと思います。

ご確認ください。

[akira57]

ご指摘の通り、行間 を 10 以上にすることで、文章の枠が欠ける問題が解決しました。
ありがとうございました。

ただ、もう１つ問題が出てきて添付画像のように、吹き出しウインドウの名前欄の所が
下部が欠けてしまいます。名前欄の枠を大きくできれば解決できそうな気がするのですが…
どなたか、教えて頂けますでしょうか。

[ecf5DTTzl6h6lJj02]

こんばんは。

ご指摘の通り、行間 を 10 以上にすることで、文章の枠が欠ける問題が解決しました。
ありがとうございました。

ただ、もう１つ問題が出てきて添付画像のように、吹き出しウインドウの名前欄の所が
下部が欠けてしまいます。名前欄の枠を大きくできれば解決できそうな気がするのですが…
どなたか、教えて頂けますでしょうか。

こちらで色々検証してみたところ、
フキダシウィンドウのフォントサイズや、行間の変更、
ルビ表示プラグインのルビのフォントサイズの変更等によって、レイアウトが崩れてしまうことがあるようで、
これらを修正するには、フキダシウィンドウプラグイン、ルビ表示プラグインの両プラグインに対して、
改変を行ってもらう必要がありそうです。

各プラグインのバックアップをしっかりとって、
以下に提示する改変を行ってみてください。
改変箇所が多めで、ちょっと大変ですが、ご容赦を。

●フキダシウィンドウプラグイン(MessageWindowPopup.js)に対する改変

1. おそらく、1367 行目あたりから始まっている、
   Window_Message.prototype.initialize というメソッドを、以下に書き換えてください。

   コード: 全て選択

       const _Window_Message_initialize    = Window_Message.prototype.initialize;
       Window_Message.prototype.initialize = function(rect) {
           this._defaultRect = rect;
           this._defaultRect.height = param.FontSize * 4 + param.BetweenLines * 5 + param.Padding * 2
           _Window_Message_initialize.apply(this, arguments);
       };
   

2. 上記変更を行うと、おそらく、 1535 行目あたりから始まっている、
   Window_Message.prototype.resetLayoutというメソッドの後に、
   以下のメソッドを追加してください。

   コード: 全て選択

       Window_Message.prototype.setPopupBasePosition = function() {
           const pos = $gameSystem.getPopupAdjustPosition();
           this.x = this.getPopupBaseX() - this.findPopupLeftX() + (pos ? pos[0] : 0) - 4;
           const nameBoxHeight = this._nameBoxWindow.height || 0;
           this.y    = Math.max(this.getPopupBaseY() - this.height - this.getHeightForPopup() + (pos ? pos[1] : 0), nameBoxHeight);
       };
   

3. 上記変更を行うと、おそらく、1632 行目あたりから始まっている、
   Window_Message.prototype.drawFace というメソッドを、以下に書き換えてください。

   コード: 全て選択

       const _Window_Message_drawFace    = Window_Message.prototype.drawFace;
       Window_Message.prototype.drawFace = function(faceName, faceIndex, x, y, width, height) {
           if (this.isPopup()) {
               arguments[4] = ImageManager.faceWidth;
               arguments[5] = ImageManager.faceHeight;
               if (param.Padding > 10) {
                   arguments[3] += param.Padding;
               }
               this.contents.prepareDwDh(ImageManager.popUpfaceWidth, ImageManager.popUpfaceHeight);
           }
           _Window_Message_drawFace.apply(this, arguments);
       };
   

4. 上記変更を行うと、おそらく、1712 行目あたりから始まっている、
   Window_NameBox.prototype.lineHeight というメソッドを、以下に書き換えてください。

   コード: 全て選択

       const _Window_NameBox_lineHeight    = Window_NameBox.prototype.lineHeight;
       Window_NameBox.prototype.lineHeight = function() {
           return this.isPopup() ? (param.FontSize + param.BetweenLines) : _Window_NameBox_lineHeight.apply(this, arguments);
       };
   

●ルビ表示プラグイン(PANDA_RubyText.js)に対する改変

1. おそらく、69 行目あたりから始まっている、
   Window_Base.prototype.drawTextRuby というメソッドを、以下に書き換えてください。

   コード: 全て選択

   	Window_Base.prototype.drawTextRuby = function(text, x, y, maxWidth, align, isRuby = true) {
   		
   		// convert string
   		text = text + '';
   		
   		// const
   		const rtl = Utils.containsArabic(text);
   		const RubyHeight = isRuby ? Window_Base.prototype.lineHeight() - $gameSystem.mainFontSize() : 0;
   		const adjustY = (RubyFontSize - 10);
   		
   		// alignment
   		if (align === 'center') {
   			// center
   			const width = this.textWidth(this.deleteRuby(text));
   			x = x + (maxWidth - width) / 2;
   		} else if (align === 'right') {
   			// right
   			const width = this.textWidth(this.deleteRuby(text));
   			x = x + (maxWidth - width);
   		}
   		
   		y = y + adjustY;
   
   		// text loop
   		while (text !== '') {
   			
   			// get the next character and slice the text
   			let c = text.charAt(0);
   			text = text.substring(1);
   			
   			// switch by the next character
   			if (c === '{') {
   				
   				// ruby start
   				let b = '';
   				let r = '';
   				// parse kanji and ruby
   				text = text.replace(/(.+?)\|(.+?)\}/, function() {
   					b = arguments[1];
   					r = arguments[2];
   					return '';
   				}.bind(this));
   				// draw kanji
   				const fs = this.contents.fontSize;
   				const bw = this.textWidth(b);
   				x = rtl ? x - bw : x;
   				y = y - adjustY;
   				this.contents.drawText(b, x, y + RubyHeight + adjustY, bw, fs);
   				// change font for ruby
   				this.contents.fontSize = RubyFontSize;
   				// get the width of ruby
   				let rw = this.textWidth(r);
   				let ro = 0;
   				if (rw > bw) {
   					rw = bw;
   				} else {
   					ro = (bw - rw) / 2
   				}
   				// draw ruby
   				this.contents.drawText(r, x + ro, y, rw, RubyFontHeight, 'center');
   				// change to font original
   				this.contents.fontSize = fs;
   				// next position
   				x += rtl ? -bw : bw;
   				
   			} else {
   				
   				// normal characters
   				const fs = this.contents.fontSize;
   				const w = this.textWidth(c);
   				x = rtl ? x - w : x;
   				this.contents.drawText(c, x, y + RubyHeight, w, fs);
   				x += rtl ? -w : w;
   				
   			}
   			
   		}
   		
   	};
   

※フキダシウィンドウプラグインのパラメータ、 余白 および 行間を、
ルビ表示プラグインのルビのフォントサイズ以上に設定しておいてください。

こちらで確認する限りでは、以上の改変で改善できていると思います。

ご確認ください。

[akira57]

ありがとうございます。やってみましたが、
教えていただいたアドバイスの中の２つ目

　2.上記変更を行うと、おそらく、 1535 行目あたりから始まっている、
　Window_Message.prototype.setPopupBasePosition というメソッドの後に、
　以下のメソッドを追加してください。

について、Window_Message.prototype.setPopupBasePosition というメソッドが元々無いようです。

[ecf5DTTzl6h6lJj02]

ありがとうございます。やってみましたが、
教えていただいたアドバイスの中の２つ目

　2.上記変更を行うと、おそらく、 1535 行目あたりから始まっている、
　Window_Message.prototype.setPopupBasePosition というメソッドの後に、
　以下のメソッドを追加してください。

について、Window_Message.prototype.setPopupBasePosition というメソッドが元々無いようです。

間違えて、追加するメソッドの名前を記入してしまったようです。
正しくは、
Window_Message.prototype.resetLayout というメソッドの後
です。
元記事のほうは、編集して直しました。

ご確認ください。

[akira57]

ご教授頂いた方法で試したところ上手くいきました。大変感謝いたしますとともに、このような長文のコードを理解し改変できることがすごいなと感心しております。

※フキダシウィンドウプラグインのパラメータで余白[A] および 行間を、
ルビ表示プラグインのルビのフォントサイズ[C]以上に設定する必要があります、の部分について
　例　[A]=12, =10, [C]=10
と私は設定してみました。色々値をいじってみたところ、このあたりの値が枠の表示がバランス良く見えるような気がいたしました。
このたびはありがとうございました。