PNG・TGA・アルファの扱い

(2012.10.10 鉄仮面4号)

パーティーキャッスルのテクスチャで
内部ペイント(以後エディタと呼ぶ)から
外部ペイントソフトに持って行って作る場合、
使用できるフォーマットはPNGとTGA(targa)なのですが
ペイントソフトによってアルファの扱いが異なります。
その注意点など。

とはいえこちらも手持ちのソフトでしか把握できてないので
自分が使っているソフトだとこうやるとうまくいくよ!
とか気がついたことがありましたら追記していただけると
ありがたいです。

ページ内リンク・目次-----------------

アルファのなし・あり


エディタ上での表示

アルファなし
pg_bable06.jpg
例:『バブルさんの靴』
ベタ塗り一色や画面上ヌキがない場合。
エディタから保存するとアルファは白ベタ全開になります。
セーブされたデータは32bit扱い。
※アルファなし24bit画像を読み込んでも結果は同じです。

アルファあり
pg_mahousi07.jpg
例:『花の魔法師の靴』
ほとんどのペイントソフトの場合、
薄グレーと濃いグレーの市松模様が表示されている時は
その部分は「抜けた」透明部分の画像だと認識しておいて下さい。


スケスケ服を作りたい!


まずこの辺から説明ね。初級シャツを例にとると
ベタ1色で塗り潰した状態は長袖です。
それを半袖にするには長袖を消しゴムで消していきます。

要するに服を切り取る時にこの情報が必要なのですが
切り取り画像に階調を持たせることによって
半透明部分などが作成できます。

例えばこんな表現(例:雪華の花嫁トップス)
pg_yukika01.jpg
いい感じで服が透けてますよね~

ではこの服がどうなっているか見ていきます。

PTCエディタ→PhotoShopで開く


展開図テクスチャのエキスポートで
それぞれPNG,TGAでセーブしたファイルを
PhotoShop (以後フォトショと記述)開いてみます。

PNG
pg_yuki_png02.png
・レイヤーが透けている
「アルファチャンネル」はなし
    ↓
   ここ重要

TGA
pg_yuki_tga04.png
・レイヤーが背景設定
・アルファチャンネルある
・アルファで黒部分はRGBもベタ黒
・透過される画像がベタ面処理
・アルファのグレー部分は
 半透明として表現される

同じ画像でもソフト上の扱いによってこんなにも違うんですね~

この辺の違いをうまく解説してる書籍やwebサイトは
自分の知る限りでは見たことがありません。

上の状況を踏まえた上で、
フォトショからそれぞれのフォーマットに書き出すときは
上記のレイヤー、チャンネルの構成に合わせてから出力すると
うまくいきます。

アルファ付き画像って?


ココでアルファ付き画像についてのおさらいをします。
中には学校で習う人もいるかと思います。
はいっココ、テストにでますよ~(゚Д゚)ノシΣバンバン!!

パソコン上で画像を扱う上で知っておきたい知識なのですが

一般にフルカラーと呼ばれるのは24bit画像です。
その内訳はRGB、各色256階調=8bit画像が3枚で構成されています。
8+8+8=で24bit
それにもう一枚足したのがアルファチャンネルです。
+8でこの状態を32bitとも呼びます。
pg_rgb05.png

普段何気なくレイヤーを重ねて描いてしまっていますが
透明なレイヤーにボケた筆でびゃーっと描くと
上の4チャンネルを一気に生成している、とも言えます。

上のフォトショップで開いた例ではPNGは
アルファチャンネルが無いみたいに表示されていますが
既にレイヤー上で切り抜かれた状態にあります。
データ的にはTGAだろうとPNGだろうと32bitあるんですよ。

それを
ペイントソフトがどう解釈して開くかによって見え方が違います。

図にするとこんなイメージ
pg_rule10.png

例えば最近セルシスから出たCLIP STUDIO PAINTでは
TGAもレイヤーに切り抜かれた状態で展開します。→後述

PNGのアルファはレイヤー上合成された状態で持っていると言えます。
ただ、既に合成された表示状態なので
RGBとヌキを個別に修正しようと思うともう一手間要ります。
そのためのレイヤーマスクだったり・・とか。


PhotoShopでセーブ


■小技
いちいちファイルにセーブするのはファイルダイアログたどったりして面倒だ!
というせっかちさんは全画面選択→コピーで
エディタに貼り付けるとセーブしなくて素早い3Dモデル上の確認ができます。
(いわゆるクリップボード経由)
ただし、これが出来るのは外部ソフト→エディタのみで24bit画像に限定されます。
逆はできません。
アルファ情報は無視されるのでご注意下さいませ。

レイヤーマスクの使用

レイヤーにマスクを追加してレイヤー画像を切り抜く機能
pg_mask11.png
・PNG
追加で別マスクを切るのはOK、そのままPNGセーブで行けます。
・TGA
切り抜いた画像をアルファにも反映させる必要があります。

よくある事故の注意

例えば上記のPNG画像を黒ベタ背景で作成したとします。
レイヤーの透明度マスク情報をアルファに転写してこれで大丈夫!
と思っても、結果として透明部分がなんか黒ずんだ画像になってしまいます。

これは乗算済みアルファと呼ばれる状態なので注意が必要です。
エッジに黒みが乗っててなんか嫌だ!
と思う原因は大抵この辺のミスにあります。

雪華の服のTGA画像、RGBのほうをよく見ると雪の結晶部分、
外側にピクセルが広がっているのがわかるでしょうか。
pg_str12.png

これは黒味を拾わない様に・・
というかマスクで抜かれて正常に表示出来る状態で
これは正しいデータです。
一概にRGB画像だけ見るとガビガビで変!と思ってしまうのですが
マスクで抜かれる画像はRGBの見え方がおかしくてもそれは仕方がない、と思っておいて下さい。

■TGA背景は別に黒ベタじゃなくても行けます。エッジが気になる人は溶け込む色を調整してみてはいかがでしょう。大抵はニ重レイヤーにして
最大・最小フィルタをかまして白地の色を外側に広げると解決します。

※PhotoshopのTGAセーブではアルファがどういう状態でも
RGB画像はそのままキープされてセーブされますが
他のペイントソフトではアルファで切り取られている部分は
RGBも黒ベタに変換される傾向にあるようです。(容量圧縮のため)


CLIP STUDIO PAINTでのTGA表示


アルファ付32bitTGAをクリペで開くとレイヤーに合成されるよ~
という例です。

クリペでサンプル表示しようと思ったたら
PTCエディタからセーブした画像だと
バグってて使えんでした。(色化けします)
pg_yukika_clip08.png

なんじゃこりゃ
えーとセルシス系で32bitTGA 開くとNGです
(イラスタ、CLIP STUDIO PAINT両方共)

一旦フォトショでセーブすると色化けせずに使えます。
pg_yukika_clip09.png

こちらが正常画像
CLIP STUDIO PAINTでは
「アルファチャンネル」を分けて表示するタブがないので
あらかじめ合成されて表示されます。

※全く扱えないわけではなく、全部レイヤー表示に持ってきた、
という考え方のようです。
試しにフォトショで複数のアルファを作ったファイルをPSDでセーブ、
CLIP STUDIO PAINTで開くとレイヤーに展開されます。

  • 最終更新:2012-10-11 19:54:17

このWIKIを編集するにはパスワード入力が必要です

認証パスワード