あかつきのお宿

結構前になるんですが、UnityのWebGLでゲームを作った際、Retinaディスプレイで見たら画面が通常の半分の大きさになってしまって何じゃこりゃとなったことがありました。

UnityをWebGLでBuildしたら動かなかった件とRetina Displayへの対応について

このときは「devicePixelRatio: 1」のコメントアウトを消せばOKと書いたんですが、確かにそれでも一応解決はするんですが、これだけだと別の問題が発生してしまうことがあります。

devicePixelRatioを1に固定しちゃうと

devicePixelRatioはざっくり言っちゃえばディスプレイの解像度の高さを示す数値です。正しくはCSSピクセルの解像度と物理ピクセルの解像度の比ってことらしいですがそんな説明は置いといて、ようはこの比率が高ければディスプレイの解像度も高いってことです。通常は1ですがRetinaなどの高解像度のディスプレイは2になります。

つまりdevicePixelRatioを1に固定するということは、Retinaなど2以上のディスプレイでも1の画質で表示されるようになるということです。ようはちょっと画質が落ちちゃうってことですね。

実際に見比べてみましょう。



これは先日公開した脱出ゲームの画面をRetinaディスプレイ（devicePixelRatio:2）で見た状態です。ここでindex.htmlを編集してdevicePixelRatioを1に固定するとこうなります。



ちょっとぼやけた感じがしますね。文字も少しにじんでいるように見えます。

こんな感じでdevicePixelRatioを固定にすると、せっかくRetinaでキレイに見えるようにゲームを作っても画質が落ちちゃいます。今まで僕が作ってきた脱出ゲームは全部これになってしまっていました。

CanvasのUI Scale Modeで調整する

devicePixelRatioを固定しないと、例えば640×480の画面でゲームを作った場合、Retinaディスプレイでは半分の320×240で表示されちゃうわけですが、では固定せずにどのディスプレイでも640×480で表示するにはどうすれば良いかと言うと、もし製作中のコンテンツでCanvasを使っている場合は、CanvasのUI Scale Modeで調整できます。



デフォルトだと「Constant Pixel Size」となっていますが、これを「Scale With Screen Size」にしてXとYに表示したいサイズを入力すればdevicePixelRatioが変わっても常にここで設定したサイズで表示されます。



あとはUIのImageで高解像度ディスプレイ用に倍のサイズの画像を使用すればOKです。300×300で表示したい画像があれば600×600のものを用意すれば良いってことですね。

もちろんそのままImageのXとYを600とすると倍の大きさで表示されてしまうので、Scaleを0.5にするなどの対応が必要になるわけですが、下手にScaleをいじるとヒエラルキーで親子関係になっているところのサイズ調整に余計な手間がかかってしまうかもしれません。

そういうときは画像の設定でPixels Per Unitを200にするとUIのImageにセットしたとき、Scaleが1のままでも300×300になります。







とりあえずこれだけやっとけばディスプレイの解像度問題はいったん解決できると思います。

ぶっちゃけ最近までこの設定のこと全然知らなかったからずっとdevicePixelRatio:1で対応しちゃってたんですけど、何とかならないのかなあと思ってAIに訊いてみたらこの設定のことを教えてくれました。このブログでも何度も言っている気がするけど、マジでもうAIなしでは生きられない体になってしまいましたね。お酒以上にAIの依存症がやばい気がします。