You are here: Home / shade+OSX / Coffee Break

Coffee Break

PNGのフォーマットについて考えてみる

・・・っつーか、コーヒー飲まなきゃやっていられません。

 

実践-小動物編#9で、ひとしきり頭を抱えていた「表面材質のイメージに24bitのPNGを貼り付けると画像が壊れるんですけど」について。

結論から言うと。

PNG、正常に読み込めました。

それも、わりかしあっさり。

まったくもーっ! っていう方法で。

 

解決の糸口は、同僚との雑談。

 

「FlashCS3、バグ更新はもうないのかねぇ?」「なんで?」「いやさ、だから、例の赤いヤツ」「ああ、あれ」

 

Flashの開発経験ある人だとわかると思うが、FlashCS3では、特定のPNG画像を使用すると、実機上で真っ赤っかのポリ板みたいに表示される現象が、たまに起きる。回避するためには、PNG画像をどうにかするか、Flashの他のバージョンを使用するしかない。だが、開発対象や環境によっては、そうも言っていられない事情もあるわけで。

それで、「バグ更新はないのか」の愚痴が漏れ聞こえてきたわけだ。

 

「(CS3は)2世代前のバージョンだから、無理じゃない? まあ、解決策がまったく無いわけじゃないでしょ」

「まあね。CS4で吐き直せば良いんだけどさ」

 

・・・と、ここでふと思った。ひょっとして、そもそもAdobeのCS3系列全般が、PNG画像の処理に問題があるんじゃ無かろうか。

 

というわけで、早速実験。前回使用したPSDファイルを、OSX付属のプレビューで表示する。そして、[ファイル]-[別名で保存...]で、PNG形式を指定して、アルファ付きで保存する。

PNG画像を使用#1

このファイルを、shadeに読み込ませてみると、

PNG画像を使用#2

 

・・・・・・・・・・・。

・・・・・・・・・・・。

・・・をぃ。

たのむよ、かーちゃん orz 。っていうか、なんだよこれ orz 。

まったくもーっ。コーヒーでも飲んでないと、やってらんない。

 

というわけで、shadeでPNGの24bit画像は、問題なく使用できます。疑って御免よ > shade 。

改めて、PNGテクスチャを使用してのアルファ抜き実践。操作の流れはPSDの時と同じだが、材質設定の部分で、一部変更がある。

PNG画像を使用#3

1レイヤー目の材質設定。アルファ乗算済みのフラグを外しておく。

PNG画像を使用#4

2レイヤー目の材質設定。こちらはPSDの時と同じ。

 

これらの設定を済ますと、図形ウインドウの透視図の表示は、

PNG画像を使用#5

こうなる。

透明は抜けていないが、PSDの時とは違い、ヒゲの描き込みをちゃんと判別できる。いいじゃないか。

そして、レンダリングの結果は、

PNG画像を使用#6

ちゃんと抜けます。

 

・・・・・・・・・・・。

あーっ、まったくもーっ! コーヒーお代わり!