『RPGツクールMV』『RPGツクールMZ』で表示したピクチャが何故かぼやけているように見える……その原因は、ズバリ画像の「解像度(ピクセル数)」と「位置:原点」の関係です!
この記事ではピクチャがぼやける問題の原因を解説し、その対策として
- ピクチャの表示原点を変更して解決する
- 画像サイズを変更して解決する
- プラグインで解決する
の3通りの解決方法をご紹介します!
ピクチャがぼやける原因と解決方法
上記の画像は2枚とも原点「中央」で表示していますが、左側はくっきり、右側はぼやけて見えます。
唯一の違いは、画像の大きさ(ピクセル数)が左側は偶数で、右側は奇数なのです。※何故このような現象が起きるのか、詳細については記事の後半で解説します。
解決策1:ピクチャ表示原点の変更
ピクチャがぼやける現象は、ピクチャの表示原点が「中央」の時のみ発生します。なので、原点を「左上」に変更すればピクチャがぼやける事はありません。
ただし、原点を「左上」にするとピクチャの拡大や回転といった演出を行いたい時に、思い通りの演出ができない場合があります。右下に向かって拡大する一枚絵や、左上を軸に回転するキャラクターなんておかしいですよね……。
なので、多様な演出を使いたい場合は、この解決策はあまり現実的ではありません。
解決策2:画像サイズの変更
こちらの解決方法はかなり実用的です。
ピクチャがぼやけるのは画像の大きさ(ピクセル数)が奇数の時だけなので、そもそもの画像を偶数ピクセルで保存しておけば良いのです。
もし画像を書き出した際にピクセル数が奇数だった場合は、カンバスサイズを +1 して偶数にしてから保存しましょう。透明ピクセルを増やすだけなら、画像サイズが変わっても見た目に変化はありません。
解決策3:プラグインの導入
最後に、この問題を防ぐために最も簡単な方法は、プラグインの導入です。筆者が作成した以下のプラグインを導入する事でピクチャがぼやけなくなるはずです。『RPGツクールMV』『RPGツクールMZ』のどちらでも使用可能です。
ちなみに、このプラグインが何をしているかといいますと、ピクチャの原点を「中央」からほんの少しだけズラす事で、奇数ピクセルの画像の表示位置を調整して、補間がかからないようにしています。
スムージング(画像補間)をOFFにする方法もあるようなのですが、その方法だと拡大や回転の際にも補間がかからなくなってしまうので、少しアナログですが上記のような方法で対応しています。非常に分かりやすい簡単なスクリプトですので、ご自身でSpriteを扱う事ができる方はプラグインを参考にしていただければ、自作のスクリプトにも対応可能だと思います。
結果
上記3つの解決策を試していただくと、上の画像のようにピクチャのぼやけが解消されます!
ピクチャがぼやける原因の詳細
以下、なぜ原点「中央」の奇数サイズのピクチャがぼやけてしまうのかを解説します。
RPGツクールMVでこの問題を発見した当時、ゲーム画面に表示しているピクチャの一部が変にぼやけている事に気が付きました。上記左側の画像は正常で、右側の画像はぼやけています(アップロード画質が荒いので分かりにくいかもしれませんが)
上記の画像は同じゲーム画面に2枚のピクチャを表示しており、元素材の画像はぼやけていない物を使用しています。
どちらのピクチャもツクールMVで表示しているのに、どうして正常に表示されるものと、ぼやけるものがあるのでしょうか?
もしかして、拡大率がおかしいのかな?と思い確認してみるも、X,Yどちらも100%のまま。何かプラグインの関係でぼやけているのかと調べてみても、これといった原因は特定できず。
そんなある時、ツイッターでくらむぼんさんのつぶやきを目にしました。
なるほど!確かにピクチャ原点を「左上」にするとぼやけなくなりました!ありがとうございます!
でも、拡大とか回転とか、演出の都合上ピクチャ原点は「中央」にしておきたい事ってありますよね?何故、原点を「中央」にしただけで実はその原因も上記のツイートの中身をよく見ると分かってきます。
先ほどの左側の画像は「450 × 450」、右側の画像は「451 × 450」にしていました。
原点中央は画像のちょうど半分(0.5)の位置なので、左側画像の原点Xは「450 × 0.5 = 225」、右側画像の原点Xは「451 × 0.5 = 225.5」となり、右側画像には小数点が入ってしまいます。これにより画像に補間処理が入るため右側の画像はぼやけてしまっているのでしょうね。
小数点を出さないためには、「450 × 0.5 = 225」のように画像サイズを偶数にするか、もしくは「451 × 0.5011086474501109 = 226」のように原点を調整して計算後の値に小数点が付かないようにすればOKです。
前者の対応をするのが、画像サイズの変更。後者の対応をするのが、この記事で配布しているプラグインというわけですね。