【解決済み】テキストを斜めにした時のジャギジャギを無くす方法

アバター
進撃のエレン
記事: 78
登録日時: 2017年5月13日(土) 21:01

【解決済み】テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 進撃のエレン » 2020年2月20日(木) 17:14

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

この度、皆様にご質問させて頂く内容ですが、
画像の通り、ヘルプウィンドウのテキストを

//==============================
// * create
//==============================
var _mog_scnItem_create = Scene_Item.prototype.create;
Scene_Item.prototype.create = function() {
_mog_scnItem_create.call(this);
this.loadBitmaps();
this._helpWindow.opacity = 0;
this._helpWindow.x = Moghunter.scItem_HelpWindowX;
this._helpWindow.y = Moghunter.scItem_HelpWindowY;
this._categoryWindow.visible = false;
this._categoryWindow.active = false;
this._itemWindow.active = true;
this._itemWindow.select(0);
this._itemWindow.contentsOpacity = 0;
this._itemWindow.x = this._itemPosOrg[0] - 50;
this._actorStatusIndex = this._actorWindow._index;
this._actorStatus = $gameParty.members()[this._actorWindow._index];
this._wani = [-1,1,null];
this._helpWindow.rotation = - 0.15;
};


this._helpWindow.rotation = - 0.15;

この記述を使い斜めにしたのですが、テキストがジャギジャギになってしまいます。

Bitmapの状態で斜めにした時にジャギジャギを無くす方法は知っているのですが、
Bitmap化されていないものに対してジャギジャギを無くす方法が分かりません。

希望の解決方法は以下の通りです。

第一希望:上記のコードにジャギジャギを無くすコードを挿入する
第二希望:上記のコードの例えばヘルプウィンドウをBitmap化する



一応記載コードのプラグインは以下のURLとなります。
https://fungamemake.com/archives/5054

※こちらはムノクラ様が和訳したプラグインとなります。
 転載元のプラグインは個別でダウンロードが出来ませんので。

以上となります。
何卒宜しくお願い致します。

tukumate.jpg
最後に編集したユーザー 進撃のエレン on 2020年2月22日(土) 16:49 [ 編集 1 回目 ]

アバター
ムノクラ
記事: 2011
登録日時: 2018年2月23日(金) 11:41
連絡を取る:

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by ムノクラ » 2020年2月20日(木) 18:55

進撃のエレン さんが書きました:いつも皆様にはお世話になっています。

この度、皆様にご質問させて頂く内容ですが、
画像の通り、ヘルプウィンドウのテキストを

//==============================
// * create
//==============================
var _mog_scnItem_create = Scene_Item.prototype.create;
Scene_Item.prototype.create = function() {
_mog_scnItem_create.call(this);
this.loadBitmaps();
this._helpWindow.opacity = 0;
this._helpWindow.x = Moghunter.scItem_HelpWindowX;
this._helpWindow.y = Moghunter.scItem_HelpWindowY;
this._categoryWindow.visible = false;
this._categoryWindow.active = false;
this._itemWindow.active = true;
this._itemWindow.select(0);
this._itemWindow.contentsOpacity = 0;
this._itemWindow.x = this._itemPosOrg[0] - 50;
this._actorStatusIndex = this._actorWindow._index;
this._actorStatus = $gameParty.members()[this._actorWindow._index];
this._wani = [-1,1,null];
this._helpWindow.rotation = - 0.15;
};


this._helpWindow.rotation = - 0.15;

この記述を使い斜めにしたのですが、テキストがジャギジャギになってしまいます。

Bitmapの状態で斜めにした時にジャギジャギを無くす方法は知っているのですが、
Bitmap化されていないものに対してジャギジャギを無くす方法が分かりません。

希望の解決方法は以下の通りです。

第一希望:上記のコードにジャギジャギを無くすコードを挿入する
第二希望:上記のコードの例えばヘルプウィンドウをBitmap化する



一応記載コードのプラグインは以下のURLとなります。
https://fungamemake.com/archives/5054

※こちらはムノクラ様が和訳したプラグインとなります。
 転載元のプラグインは個別でダウンロードが出来ませんので。

以上となります。
何卒宜しくお願い致します。

tukumate.jpg


コードが大して分かっていないのですが、ヒントになりそうなところを見つけたので、お伝えいたします。

MOG Battle HUD ではテキストの角度を指定する箇所があるのですが、角度を入れても文字は回転せずに斜めに並ぶように作られているようです。
例:Battle HUD テンプレート 3 Black Perl
https://fungamemake.com/wp-content/uplo ... 9/MB03.png

ですので、テキスト自体を斜めにして綺麗な表示にするのは現実的ではないのかと推察いたします。
Battle HUD の該当箇所のコードを調べれば、何か分かるかも知れません。
速度重視で、とりあえず気づいたことのお知らせでした。

コード: 全て選択

//==============================
// * Create MP Meter
//==============================
Battle_Hud.prototype.create_mp_meter = function() {
   if (String(Moghunter.bhud_mp_meter_visible) != "true") {return};
   this.removeChild(this._mp_meter_blue);
   this.removeChild(this._mp_meter_red);
   if (!this._battler) {return};
   this._mp_meter_red = new Sprite(this._mp_meter_img);
   this._mp_meter_red.x = this._pos_x + Moghunter.bhud_mp_meter_pos_x;
   this._mp_meter_red.y = this._pos_y + Moghunter.bhud_mp_meter_pos_y;
   this._mp_meter_red.rotation = Moghunter.bhud_mp_meter_rotation * Math.PI / 180;
   this.addChild(this._mp_meter_red);
   this._mp_meter_blue = new Sprite(this._mp_meter_img);
   this._mp_meter_blue.x = this._mp_meter_red.x;
   this._mp_meter_blue.y = this._mp_meter_red.y;
   this._mp_meter_blue.rotation = this._mp_meter_red.rotation;
   this.addChild(this._mp_meter_blue);
   if (String(Moghunter.bhud_mp_meter_flow) === "true") {this._mp_flow[0] = true;
       this._mp_flow[2] = this._mp_meter_img.width / 3;
      this._mp_flow[3] = this._mp_flow[2] * 2;
      this._mp_flow[1] = Math.floor(Math.random() * this._mp_flow[2]);
   };
};
---
JavaScriptの基本を学習せずにツクールのプラグインやスクリプトを使って横着してゲームを作ろうとしている人間です。
そのような者なので、適当な投稿をするかも知れません。
他の方の投稿を信用してください。
アバター
剣崎 宗二
記事: 678
登録日時: 2016年11月12日(土) 20:36
連絡を取る:

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 剣崎 宗二 » 2020年2月21日(金) 15:39

Bitmapの状態で斜めにした時にジャギジャギを無くす方法は知っているのですが、
Bitmap化されていないものに対してジャギジャギを無くす方法が分かりません。


該当のWindowのcontentsが実質上「文字が書き込まれているbitmap」になります。
なのでその方法を

コード: 全て選択

this._helpWindow.contents

に対して実行してください。
----
-出先に居る場合回答が未テスト状態である事が多い為、テストは重々にお願いいたします。
-基本自分や友人の問題解決は自分で1からプラグインを書いているので、「こういうプラグインはありますか」に対しては助けになれません。ご了承ください。
アバター
進撃のエレン
記事: 78
登録日時: 2017年5月13日(土) 21:01

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 進撃のエレン » 2020年2月21日(金) 18:25

ムノクラ 様

頂きました情報はまた別の機会にヒントになるかもしれません。
ご返信、誠にありがとうございます。


剣崎 宗二 様

ご返信ありがとうございます。
なるほど、bitmap をcontentsにする事で扱える様になるのですね。
実際にcontentsにした事でLINEARで適用させる事が出来ました!
ありがとうございます!

ちなみにですが、
Windowのcontentsが実質上「文字が書き込まれているbitmap」
と言うのはどのコードを指すのでしょうか?

また、重なる質問で恐縮ですが、
下記の画像のように文字を斜めにしつつ、下側を横(傾き)にずらす事は可能でしょうか?
調べてみると「アフィン変換」と言うもので出来る様な事が書いてありましたが、
そこからがちょっと分かりませんでした。
(もしかするとアフィン変換は関係ないかもしれませんが……)

何卒引き続き宜しくお願い致します。

SnapCrab_NoName_2020-2-21_18-18-25_No-00.png
アバター
剣崎 宗二
記事: 678
登録日時: 2016年11月12日(土) 20:36
連絡を取る:

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 剣崎 宗二 » 2020年2月21日(金) 21:13

進撃のエレン さんが書きました:ちなみにですが、
Windowのcontentsが実質上「文字が書き込まれているbitmap」
と言うのはどのコードを指すのでしょうか?

Window_Base.prototype.createContents
及び
Window_Base.prototype.drawText
が何をしているのかをそれぞれご覧ください。


進撃のエレン さんが書きました:また、重なる質問で恐縮ですが、
下記の画像のように文字を斜めにしつつ、下側を横(傾き)にずらす事は可能でしょうか?

私には斜体(Italic)で書かれた文字を更に斜めに回転させたように思えますが、違うのでしょうか?
----
-出先に居る場合回答が未テスト状態である事が多い為、テストは重々にお願いいたします。
-基本自分や友人の問題解決は自分で1からプラグインを書いているので、「こういうプラグインはありますか」に対しては助けになれません。ご了承ください。
アバター
進撃のエレン
記事: 78
登録日時: 2017年5月13日(土) 21:01

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 進撃のエレン » 2020年2月22日(土) 04:46

Window_Base.prototype.createContents
及び
Window_Base.prototype.drawText
が何をしているのかをそれぞれご覧ください。


知識が無いので具体的な説明は出来ませんが、頭では理解出来ました。
ありがとうございます。


私には斜体(Italic)で書かれた文字を更に斜めに回転させたように思えますが、違うのでしょうか?


全ての文字を斜めにする訳ではなく、あくまで限定的(今回の例ではヘルプウィンドウ)なものなので
フォント自体を斜体(Italic)にする事は出来ません。

同じプラグイン内の1200行目辺りの

コード: 全て選択

//==============================
// * create Parameters
//==============================
ActorStatusSkill.prototype.createPar = function() {
     this._par = new Sprite(new Bitmap(Graphics.boxWidth,Graphics.boxHeight));
    this._par.bitmap.fontSize = 26;
    this._par.x = Moghunter.scSkill_AS_ParX;
    this._par.y = Moghunter.scSkill_AS_ParY;
    this.addChild(this._par);
};


ここに
this._par.bitmap.fontItalic = true;

こちらを入れるとイタリックにする事は出来ました。

ただ、
this._helpWindow.contents.fontItalic = true;

こうすると、イタリックになりませんでした。
なにか記述がおかしいのでしょうか?


また、ヘルプウィンドウ以外の_itemWindowに対しては

this._itemWindow.contents._baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;
this._itemWindow.rotation = - 0.09;

この様に記述して傾けてもジャギジャギのままでした。
また別のコードが必要なのでしょうか?
アバター
剣崎 宗二
記事: 678
登録日時: 2016年11月12日(土) 20:36
連絡を取る:

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 剣崎 宗二 » 2020年2月22日(土) 12:39

何れも記述を「何処に入れたのか」が不明である為私には何とも言えません。
入れる箇所によってはその後のデフォルト動作でリセットが入ったり、上書きされる可能性が御座います。
また、他のプラグインと競合し、動作を妨害されている可能性もあります。

当方が実験した所では、他にプラグインを入れていない状態であれば、

進撃のエレン さんが書きました:ただ、
this._helpWindow.contents.fontItalic = true;

こうすると、イタリックになりませんでした。
なにか記述がおかしいのでしょうか?



コード: 全て選択

Window_Help.prototype.resetFontSettings = function() {
    this.contents.fontFace = this.standardFontFace();
    this.contents.fontSize = this.standardFontSize();
    this.resetTextColor();
    this.contents.fontItalic = true;
};




進撃のエレン さんが書きました:また、ヘルプウィンドウ以外の_itemWindowに対しては

this._itemWindow.contents._baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;
this._itemWindow.rotation = - 0.09;

この様に記述して傾けてもジャギジャギのままでした。
また別のコードが必要なのでしょうか?




コード: 全て選択

Window_ItemList.prototype.drawAllItems = function() {

    this.contents._baseTexture.scaleMode = PIXI.SCALE_MODES.LINEAR;

    var topIndex = this.topIndex();
    for (var i = 0; i < this.maxPageItems(); i++) {
        var index = topIndex + i;
        if (index < this.maxItems()) {
            this.drawItem(index);
        }
    }

    this.rotation = - 0.09;
};


にてそれぞれ改善しています。
(競合回避を無視した純粋な「テスト用」の書き方である為そのまま使用するのはお勧めいたしません)
----
-出先に居る場合回答が未テスト状態である事が多い為、テストは重々にお願いいたします。
-基本自分や友人の問題解決は自分で1からプラグインを書いているので、「こういうプラグインはありますか」に対しては助けになれません。ご了承ください。
アバター
進撃のエレン
記事: 78
登録日時: 2017年5月13日(土) 21:01

Re: テキストを斜めにした時のジャギジャギを無くす方法

投稿記事by 進撃のエレン » 2020年2月22日(土) 16:48

コード: 全て選択

(競合回避を無視した純粋な「テスト用」の書き方である為そのまま使用するのはお勧めいたしません)


ありがとうございます。
頂いた記述をヒントにして、該当箇所のみ継承?定義?して作り直し
無事に斜体にしつつ、文字のジャギジャギを無くす事が出来ました。

この度は本当にありがとうございました!

“MV:質問” へ戻る