【Unity】知っておくべき！テクスチャ画像に関するTIPS3選

2021 4/06

2018.08.30 2021.04.06

本記事ではUnityのテクスチャ画像に関するTIPSをまとめました。

画像素材の減色の為のディザリング処理について

容量節約の為できるだけ画像素材は減色したい、でもUIできるだけきれいに表示させたいということで、半分のサイズで劣化も少ないRGBA16bitを選択します。

ただそのままRGBA16bitに変換するとグラデ部分が特にマッハバンドが目立ってしまうので、事前に処理をして減色後もきれいに表示されるようにするのがざっくり説明するとディザリング処理です。

あわせて読みたい

mieki256's diary - RGBA4444に変換できるツール

今までは上記のサイトを参考にGimpで、ちまちまディザリング処理していましたが非常に手間だったので、
もうしこし良い方法はないかと思いまして、Unityでもインポート時にディザリング処理をかけてくれるスクリプトがありましたので試してみました。

やり方

STEP.1

ダウンロード

下記のリンクからデータをダウンロードして、Asset>Editの中に「TextureModifier.cs」を入れる。

GitHub

unity-dither4444/README_ja.md at master · keijiro/unity-dither4444 AssetPostProcessor for making high-quality 16-bit color textures in Unity. - unity-dither4444/README_ja.md at master · keijiro/unity-dither4444

STEP.2

スクリプト設定

スクリプトを開き、`importer.textureType = TextureImporterType.GUI;`　→　`importer.textureType = TextureImporterType.Advanced;`に変更

※Advancedで比較したかったので

STEP.3

命名

ディザリング処理をしたい画像（.png）の命名を○○○Dither.pngというようにお尻を**Dither**という命名にして、Assetの階層下に入れる。

STEP.4

命名

以上で、インポート時に自動でディザリング処理されます。

結果、Gimpでディザリング処理したものと比較しまして、気持ちスクリプト（unity-dither4444）の方がきれいでした。（※画像にもよると思いますが）

ディザリング処理も簡単なので、非常に便利なスクリプトだと思います。

↑目次へ戻る

PVRTCの画像をきれいに表示する方法

テクスチャ圧縮形式 PVRTCを使用すると画像の端が汚くなったり、アルファの抜け部分にゴミがついてたりとあまりきれいに表示されないことが多いです。
特に目立つものは以下の方法を試すと効果があると思います。

やり方①

STEP.1

透明部分を一度、後ろの画に対して最適な色で塗りつぶしてから透明にしてPNGで出力する。

Photoshopでもできますが、こちらのスクリプトを使用してみました。

GitHub

GitHub - keijiro/unity-pvr-cleaner: アルファ入りの PVRTC を奇麗にするコツアルファ入りの PVRTC を奇麗にするコツ. Contribute to keijiro/unity-pvr-cleaner development by creating an account on GitHub.

STEP.2

命名の最後をPVR.pngにする

STEP.2

インポート時に処理が行われる

※サイズが大きいとかなり時間かかるので注意

やり方②

STEP.1

アルファマスクを使用する

こちらのスクリプトを使用してみました。

GitHub

GitHub - keijiro/unity-alphamask: Unity でアルファマスクを使う Unity でアルファマスクを使う. Contribute to keijiro/unity-alphamask development by creating an account on GitHub.

STEP.2

Switch Platform してiOSに

STEP.3

命名の最後をwith alpha.pngにる

STEP.4

インポート時に処理

STEP.5

インポート時に処理が行われる

STEP.6

マスクとテクスチャをアサイン

シェーダーをSpriteWithMaskにして、マスクとテクスチャをアサイン。

STEP.7

RGBA（127.127.127.127）に

ColorをRGBA（127.127.127.127）にする。（※デフォルトだとすべて256になっていて、元の色になっていない）

結果

①の方法上部にあった、特に目立ったゴミが取り除かれました。ただし処理に時間がかかるのがネックです。

②の方法マスクを使うとクリアになりすぎて、意図したボケ具合が失われそうです。ただし、ETC(Android)でも使える方法なので、有効だと思います。

↑目次へ戻る

テクスチャの圧縮形式のサイズについて

圧縮形式のファイルサイズの求め方

テクスチャの合計サイズの求め方は幅 × 高さ × bppです。

ファイルサイズのサンプル

Size(Pixel)	RGBA 32bit	RGBA 16bit	PVRTC 4bits	PVRTC 4bits(imesta7)
2048×2048	21.3MB	10.7MB	2.7MB	2MB
1024×1024	5.3MB	2.7MB	0.7MB	0.5MB
512×512	1.3MB	682.7KB	170.8KB	128KB
256×256	341.3KB	170.7KB	42.8KB	32KB
128×128	85.3KB	42.8KB	10.7KB	8KB
64×64	21.3KB	10.7KB	2.7KB	2KB

※サイズは2のべき乗の正方形でMipmapを含むものです。

Mipmapとは各テクスチャは同じ画像を徐々に低解像度にしたもので、テクスチャが画面上で非常に小さい場合に使用されます。
ミップマップでの各画像の高さと幅、つまりレベルは、直前のレベルよりも 2 の累乗だけ小さくなります。

例　128×128picxelのテクスチャの場合、64×64のテクスチャが生成される
→ UIなどMipMapが必要のない場合の画像は生成のチェックをはずした方が軽量化できます。

※表はPVRTCと書いておりますが、ETC等も同サイズです。

RGBA32bit→RGBA16bit　　圧縮率約 50%
RGBA16bit→PVRTC　　　　圧縮率約 25%
PVRTC→PVRTC(imesta7）　圧縮率約 75%

URL Copied!

URL Copied!