21px未満のフォントサイズで文字がぐしゃっとなる現象

[seea]

21px未満のフォントサイズの文字を画面に出したとき、
アンチエイリアスがうまく働かず（中途半端に効いて？）文字がぐしゃっとなる現象って、
解決策無いんでしたっけ？


まずは次の実例を見てくれ。文字の描画が異なっているのが見られると思います。

▼こうなるはずが

古いChromeブラウザ（エディタの「テストプレイ」）

2017-12-17_font_old_browser.png (14.69 KiB) 閲覧数: 4686 回

▼こうなる

現在のChromeブラウザ（ブラウザでゲームを動かす場合）

2017-12-17_font_new_browser.png (14.08 KiB) 閲覧数: 4686 回

「ミ」は特にヤバい。「ロ」とかは大丈夫。種類によって崩れ方に差があります。

フォントのレンダリングの問題なので、コアスクリプト rpg_*.js 辺りではおそらく何も出来ないかと……。

多分、ブラウザ側か、pixiか、どちらかの問題点かと思いますが、
何かご存じの方いらっしゃいましたら教えてもらえると助かります。

再現手順
・Windows 10
・ウェブブラウザ用にデプロイして Chrome の最新版で開く
　　現在のChrome：バージョン: 63.0.3239.108（Official Build） （64 ビット）
・ゲームフォントは何でもよい
　　mplus-1m-regular.ttfで再現します
・ゲームプロジェクトは何でもよい（プロジェクトの内容によらず再現します）
・WebGL、Canvasモードの両方で再現します。

再現しない手順
・「テストプレイ」を使う
　　Chromeが古いので再現しません。
・文字の大きさを、21px以上のフォントサイズにする。21px以上は綺麗です。

ちなみにFirefox Quantamでも再現します。
単にWEBページで小さな文字を表示するだけでは崩れないので、怪しいのはpixiか。

なお、VX Ace以前ではブラウザを使っていないため本現象は発生しません。

ひとまず21px未満の文字は画像化するなどして対応しますが、MV用のプラグインって文字を
drawTextで書いて、文字の画像化は行わない作りのプラグインが大多数なので、
その辺りを書き直すのが割と大変なんです。
小さなフォントでもdrawTextが使えるようになると嬉しいです。

[seea]

この問題を強引に解決させる仕組みを採り入れましたので情報を載せておきます。

※this._spriteはSpriteという前提。
　Spriteは必要サイズの2倍の大きさで確保しておきます。

（例）
this._sprite = new Sprite(new Bitmap(200, 32));

　↓ Spriteの位置決めやフォントサイズ指定の後にコレを追加

//--- Improve font rendering Start ---
var orgfontsize = this._sprite.bitmap.fontSize;
this._sprite.bitmap.fontSize = orgfontsize * 2;
this._sprite.bitmap.outlineWidth *= 2;
this._sprite.bitmap.smooth = true;
this._sprite.y += orgfontsize / 2 + 1;
this._sprite.scale.x = 0.5;
this._sprite.scale.y = 0.5;
//--- Improve font rendering End ---


何をやっているかというと、2倍角のフォントをビットマップに描画してから
Spriteごと1/2に縮小しています。力技。
（元フォントの描画が汚くとも）あたかもアンチエイリアスが効いたかのような綺麗なフォントになります。

文字の描き直しとかしているプラグインですと上記の修正だけでは足りず、位置ずれが起こったりしますので
個別にプラグインを直していかないといけないです。面倒ですが、文字がぐしゃっとなる現象は直ります。

プラグイン化が難しそうなので考えていません。
プラグインに出来そうだと思ったら是非作って下さい。
このコードは自由にしてください。

フォントを綺麗に描画するくらい基本機能の範囲なんですから、
個人的には21px未満のフォントは全てこの方式で描画するように、コアスクリプトに入れた方が良いんじゃないかと思いますが
トリッキーなんだよなぁ……これしか方法がなかったとはいえ……。
もしかしたら将来の PIXI のバージョンアップで自然に解決する可能性が無きにしも非ず。