読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

圧縮画像でメモリを節約&ローディング高速化しつつも画像を綺麗に表示する

Unity iOS Android リソース・メモリ管理 ゲームの作り方・チュートリアル・サンプル 最適化・デバッグ

powerVRで動いているiOSでは、rawな画像の他にもpvrtcを使用することが出来る。

圧縮画像を使用することで、「消費電力の削減」「ローディングの高速化」「メモリ帯域(GPUへの転送)の大幅な節約」「メモリの大幅な節約」が見込める(具体的にはPVRTCはRGBA32と比べて1/8倍のメモリと帯域の消費で済む)のだが、画像が汚くなるといった問題がある。

特にPVRTCの「画像が滲む」問題は割と致命的で、ドット絵やUI表現時には大きな問題となる。その対策として(自分を含めて)大半の人はRGBA32ないしRGBA16を使うと思うが、実は他にも圧縮前の画像にノイズを乗っけるといった方法がある。先日のCedecで実際に行っている人が居たので、自分もリベンジしてみた。

[Unity3D]PVRTC圧縮でも綺麗に表示する…はずだった
http://terasur.blog.fc2.com/blog-entry-326.html



こちらが完成品。左がraw画像で右が圧縮後の画像。

よくよく見ると滲んでいる所が無い訳ではないが、顎のラインや髪等、滲んでいる所がかなりスッキリしているのが判る。

ちなみにテクスチャサイズは512x512で、スプライトは大体100100くらい。

スクリーンショット 2013-09-09 0.02.36
ノーマルpvrtc

スクリーンショット 2013-09-09 0.02.26
ノイズ付与pvrtc



以前はGIMPで試したが、今回はPhotoshopの体験版で試す事にした。

まず、ドット絵の部分を選択ツールで選択する。

次にノイズ甩のレイヤーを作成し、選択した部分を「f7f7f7」の色で塗りつぶす。f7f7f7の色が元々の記事にあった色と違うのだが、まあ誤差だと信じたい。

スクリーンショット 2013-09-08 23.26.30 スクリーンショット 2013-09-08 23.30.33

その後[フィルター]>[ノイズ]>[ノイズを加える]でノイズを加える。ノイズの設定は「量:12.5%」で「均等に分散」。上手くいけば下の画像のような形になる。

後はレイヤーの設定を「ソフトライト」に設定し、不透明度を30%〜50%にすれば完成。

スクリーンショット 2013-09-08 23.36.42  スクリーンショット 2013-09-08 23.37.56

なお、Unity側のテクスチャのCompression qualityをBestに設定するのがお勧め。

スクリーンショット 2013-09-09 0.26.32



と、ここまで書いた所で、別にPhotoshopが絶対に必要って訳じゃない事に気づいた。要するにノイズが乗ってさえいれば良いので、ノイズ画像を別途用意しノイズを乗っけてやれば良い。

なので、最近お気に入りの無料ペイントツール FireAlpaca[ ファイア アルパカ ]で試してみた。

まずノイズ画像を用意。

次に、ノイズを乗っけたい画像とノイズ画像をファイアアルパカで開き、ノイズ画像を乗っけたい画像の上レイヤーに移動する。方法はコピペしたら行けた。

スクリーンショット 2013-09-08 23.44.21  スクリーンショット 2013-09-08 23.44.46
 
次に、範囲選択ツールでノイズを乗っける範囲を選択する。一旦レイヤー3(ノイズのレイヤー)を非表示にして、自動選択ツールで選択していく。ちなみにShiftを押しながらだと選択範囲を増やせる。その辺りは下の方にヘルプが出た。便利便利。

スクリーンショット 2013-09-08 23.55.07  スクリーンショット 2013-09-08 23.45.47

それからノイズのレイヤーを表示して、キャラクター以外の部分からノイズを削除する。選択箇所はマスクされているので、大雑把に消しゴムで消してもOK。

スクリーンショット 2013-09-08 23.46.25  スクリーンショット 2013-09-08 23.46.41

 最後にレイヤーの透明度を10%程度、ブレンドを乗算にして完成。

スクリーンショット 2013-09-08 23.50.45


こちらもUnity側のテクスチャのCompression qualityをBestに設定するのがお勧め。

・・・気のせいでなければ、ファイアアルパカで作ったほうが綺麗に出る気がする。



ちなみに、この問題は解像度に依存している所があるので、高解像度下ではそれ程気になる事は無いと思う。高解像度でRGBA32を使っている人は………まあ色々な事情があるんだと思う。高解像度は劣化0って訳でもないしね。

低解像度(ガチドット絵)は、大量に使わないならRGBA16使うのが良いと思う。