1. ホーム
  2. RPG ツクール
  3. テクニック・スクリプト集
  4. MV
  5. アンチエイリアス除去テキスト

アンチエイリアス除去テキスト Non Anti-Aliased Text

概要

Summary

アンチエイリアスを除去してテキストを描画する機能を追加します。

一度描画されたテキストに対してフィルタをかけるような処理になるため、使用するフォントによってはきれいに表示されない場合があります。
また、フィルタ処理が入るぶん、テキスト描画が重くなります。

Capture Gallery

スクリーンショット

capture1 capture2

ダウンロード

Download

ダウンロード (ZIP)

ファイルサイズ: KB

導入方法

How to import
  1. KMS_NonAntiAliasedText.js を、プロジェクトの js/plugins フォルダにコピーしてください
  2. RPG ツクール MV のプラグインマネージャから「KMS_NonAntiAliasedText」を追加してください
  3. 使用しているフォントに合わせて、プラグインのパラメータを調整してください

パラメータの調整

Configure Parameters

本プラグインにはいくつかのパラメータがあります。
これらは使用するフォントによって適した値が異なるため、通常は調整が必要です。
以下では、各パラメータを調整する際の方針を記載しています。
プラグインに用意されている全パラメータは「パラメータ」を参照してください。

Default draw method

描画方式を 0 ～ 2 の整数で指定します。
方式によって描画結果と処理負荷が変わりますので、使用したいフォントで試して最も合っているものを選択してください。

処理負荷は描画方式 0 が最も高く、方式 1、方式 2 の順に軽くなります。
(描画方式 2 は処理速度優先で、アンチエイリアスの除去をプラグイン内で行わないため、見た目が完全にフォントの挙動に依存します)

標準の M+ 1m 使用時の表示例

描画方式 0:
MS Gothic
描画方式 1:
MS Gothic
描画方式 2:
MS Gothic

Binarize threshold

アンチエイリアスの除去強度を 1 ～ 255 で指定します。
値が大きいほど、アンチエイリアスを強力に除去します。
Default draw method を 0 か 1 に指定した場合に使用します。

文字が太すぎたり、潰れたりする場合は、値を大きくしてください。
文字が細すぎてかすれる場合は、値を小さくしてください。

この値は、描画負荷にはほとんど影響しません。

パラメータ

Parameters
パラメータ 内容
Default draw method アンチエイリアス除去の方法を 0 ～ 2 の整数で指定します。
Binarize threshold アンチエイリアス除去の強度を 1 ～ 255 の範囲で指定します。
大きいほど文字が細く、小さいほど太く見えます。
Base font size 描画方式 0 と 1 で使用する、基準となるフォントサイズを指定します。
値が大きいほど描画負荷が高くなります。
Enable force non-AA 1 にすると、すべてのテキストをアンチエイリアス除去して描画します。
Associated switch ID 指定した ID のスイッチを、除去機能の ON/OFF に割り当てます。
0 を指定すると、どのスイッチにも割り当てません。
Enable fofce non-AA が 1 のときのみ有効です。

テキストは常に描画されているわけではありませんので、スイッチを変えた瞬間は表示が変わらないことがほとんどです。
大抵は一度画面を切り替える必要があります。

各描画方式の特徴

Method Features

各描画方式の内部処理と特徴を記載します。

描画方式 0

下記の手順でテキストを描画します。

  1. 一時領域に drawText で描画
  2. パラメータ「Binarize threshold」に従って二値化
  3. 本来の Bitmap 領域に drawImage で転送

二値化では、描画したテキストに対してピクセル単位でアルファ値を調べ、基準より大きいピクセルは基準値に置き換え、小さいピクセルは 0 (非表示) にします。
この処理により、描画された文字からアンチエイリアスを除去します。
(本プラグインが重い理由のほとんどがこの処理)

フォントサイズによらずドット感が強いが、MV では滲んでしまうようなフォントに有効です。

メリット

  • 文字が潰れにくい

デメリット

  • 描画がかなり遅い
    • そこそこ高いスペックの PC でも処理落ちする
    • モバイルには向かない
  • 潰れにくい反面、フォントによってはただジャギってるだけにも見える

描画方式 1

下記の手順でテキストを描画します。

  1. 一時領域に小さめのサイズ (Base font size) で drawText 描画
  2. パラメータ「Binarize threshold」に従って二値化
  3. 本来の Bitmap 領域に、補間を OFF にした drawImage で拡大描画

製作者から推奨サイズが示されているフォント (例えば PixelMplus) など、特定のサイズできれいに表示されるフォントに有効です。
PixelMplus12 を使用して Base font size を 24 にすると、↓ のように表示されます。
PixelMplus12

メリット

  • 調整次第では、フォントによらずビットマップフォントっぽくできる (可能性がある)

デメリット

  • 描画が遅い (描画方式 0 よりは速い)
  • 適切なパラメータを調べるのが面倒
  • 文字が潰れやすい

描画方式 2

下記の手順でテキストを描画します。

  1. 一時領域に小さめのサイズ (Base font size) で drawText 描画
  2. 本来の Bitmap 領域に、補間を OFF にした drawImage で拡大描画

描画方式 1 から二値化処理を省いた方式です。
そのぶん高速に動作するため、特定のサイズできれいにビットマップフォントとして描画されるフォント (ＭＳ ゴシック系など) には有効な場合があります。
MS Gothic

メリット

  • 最も高速
  • 推奨サイズがあるビットマップフォントだときれいかも

デメリット

  • 適切なパラメータを調べるのが面倒
  • 二値化を省略しているため、適していないフォントの場合、ただ低解像感が出るだけ

プログラムからの利用

Use In Programs

アンチエイリアス除去テキスト描画を行う関数は Bitmap クラスに登録されているため、JavaScript プログラムから直接利用することができます。

drawTextNaa

アンチエイリアスを除去してテキストを描画します。
描画方式は、プラグインパラメータの Default draw method で指定したものを使用します。
引数は drawText と同じです。

drawTextNaa0

描画方式 0 を使用したテキスト描画を行います。
引数は drawText と同じです。

drawTextNaa1

描画方式 1 を使用したテキスト描画を行います。
引数は drawText と同じです。

drawTextNaa2

描画方式 2 を使用したテキスト描画を行います。
引数は drawText と同じです。

drawTextDefault

アンチエイリアス除去をせず、通常の drawText と同様の処理を行います。
プラグインパラメータの Enable force non-AA が有効な場合に、通常のテキスト描画を行いたいときに使用します。

動作確認環境

Environment

OK

  • Windows 10
    • エディタテストプレイ
    • Google Chrome 68.0
    • Firefox Quantum 61.0

上記に記載がない環境は動作未確認です。

更新履歴

History
バージョン 日付 内容
0.1.1α 2019/09/03 ・空文字列の描画時に停止する不具合を修正
0.1.0α 2019/09/02 初版