2012/07/29(日) [n年前の日記]
#1 [cg_tools] Texture Atlasについて調べてる
複数のpngファイル等を1つの画像に配置することで、GPUにとっては処理が楽になるらしいのだけど。そのへんの仕組み？ 概念？ を、
_Texture Atlas
と呼ぶらしい。えてして、1つになった画像と、どこに何のテクスチャが配置されているのか記述したxml、とのセットで使う模様。
Flash の2Dフレームワークである Starling も、それをサポートしてるようで。
一応、GIMP等を使って手作業で画像を配置して、xmlも自分で打って、とかやっていけば目的は果たせるだろうけど、ぶっちゃけ面倒臭い。画像修正するたびに作り直しなんて途方に暮れる。ので、ツールがあるなら使ったほうが、はるかに便利だろうとは思う。
Flash の2Dフレームワークである Starling も、それをサポートしてるようで。
一応、GIMP等を使って手作業で画像を配置して、xmlも自分で打って、とかやっていけば目的は果たせるだろうけど、ぶっちゃけ面倒臭い。画像修正するたびに作り直しなんて途方に暮れる。ので、ツールがあるなら使ったほうが、はるかに便利だろうとは思う。
◎ _TexturePacker - Create Sprite Sheets for your game! :
Texture Atlas 用の画像を作成できるツール。Windows/Mac/Ubuntu Linuxで動作する。Cocos2D,Starling,Unity等、様々なフレームワークに対応。それぞれに対応したxmlを出力してくれる、ということじゃないかと想像。
無料版と有料版があるように見えたので、無料版を試用してみたが、作業が圧倒的に楽になりそうだと感じた。
ただし、無料版は、Publish で画像出力した際に、画像の中に文字が書き込まれてしまうので、実際の開発作業には使えない。あくまで体験版の位置づけなのだと思う。
機能制限が無い有料版は、ライセンスが2千円台で購入できるそうで。言及しているblog記事を眺めた限りでは、この手のツールを欲してる人は軒並み購入してるように見えた。たしかに、得られるメリットを考えると、値段は安い。フツーはコレを買ってこの話は終わり、だろうと思う。
無料版と有料版があるように見えたので、無料版を試用してみたが、作業が圧倒的に楽になりそうだと感じた。
ただし、無料版は、Publish で画像出力した際に、画像の中に文字が書き込まれてしまうので、実際の開発作業には使えない。あくまで体験版の位置づけなのだと思う。
機能制限が無い有料版は、ライセンスが2千円台で購入できるそうで。言及しているblog記事を眺めた限りでは、この手のツールを欲してる人は軒並み購入してるように見えた。たしかに、得られるメリットを考えると、値段は安い。フツーはコレを買ってこの話は終わり、だろうと思う。
◎ _What is a sprite sheet? - The Movie :
Texture Atlas についての説明動画、なのかな。分かりやすい。
◎ _Texture Atlas Tools :
NVIDIAで公開されているツールらしいが…。Windows7 x64上にインストールしてみたけれど、ビューワと、コマンドラインで画像を連結出力するツールが入ってるみたい。
.taiファイルなるものを読み込むらしいが、エディタで開いてみたら、タブやスペースで情報が区切られたテキストファイルだった。
.taiファイルなるものを読み込むらしいが、エディタで開いてみたら、タブやスペースで情報が区切られたテキストファイルだった。
◎ _Texture Atlas Maker - CodeProject :
Javaで作られたツールらしい。試用してみようかと思ったら、ダウンロード時に、サイトへのメンバー登録を要求された。そーゆーのは面倒臭い。試用は諦めた。
◎ _bitorus - STAME - Simple Texture Atlas Map Editor :
Windows7 x64 上で動作確認してみた。どうやら手作業で各画像を配置していくツールらしい。
- グリッドにスナップされない。カーソルキー＋目視で配置するのはツライ。
- 矩形領域を指定できるモードがあるらしいけど、ドラッグしても領域指定ができない。
- exportしても、xml内に配置情報が全く出力されない。
◎ _Sprite Sheet Packer :
Windows上で動作するツールらしい。
各画像内の無駄な余白について、TexturePacker のようにトリミングしてくれる機能は無いので、リストに登録する前に、自分で無駄な余白を無くす等しておかないといけない。
- 画像ファイルをD&Dするとリストに登録される。
- Image Padding は、余白をどれだけ取るかの指定。
- Require Power of Two Output は、出力画像サイズを2のべき乗(128,256,512,1024等)にするか、という意味じゃないかと思うけど自信がない。
ball = 0 514 64 64 ball_red = 0 0 512 512 ball_red_small = 514 0 64 64 ball_red_small_2 = 580 0 64 64 chara = 514 66 64 64 chara2 = 0 580 64 64おそらくは、元画像ファイル名 = x y w h が並んでいるのかな？ たぶん。PerlやRubyでxmlに整形出力すれば、使えるのかもしれない。
各画像内の無駄な余白について、TexturePacker のようにトリミングしてくれる機能は無いので、リストに登録する前に、自分で無駄な余白を無くす等しておかないといけない。
◎ _Texture Atlas Utilities | GIMP Plugin Registry :
GIMP用スクリプト。メニューの、画像 → Texture Atlas に項目が追加されるのだけど。Add Image Layers To Atlas... を選んでもエラーが出る。使い方がさっぱりわからない。
[ ツッコむ ]
#2 [cg_tools] GIMP関係で気になるソレをメモ
_全レイヤーを画像サイズに合わせるor自動切抜きするスクリプト
_全レイヤーの表示位置をテキストファイルに出力するスクリプト
全レイヤーの、x,y,w,hが取得できるわけだから、GIMP上で Texture Atlas を作るスクリプトも書けそうな気もする。
でも、Python + PIL 等で作ってしまったほうが楽そうな気もする。
_全レイヤーの表示位置をテキストファイルに出力するスクリプト
全レイヤーの、x,y,w,hが取得できるわけだから、GIMP上で Texture Atlas を作るスクリプトも書けそうな気もする。
- 各画像は、ファイル→レイヤーとして開く、を使って、多数のレイヤーとして開ける。
- 全レイヤーは、自動切り抜きスクリプトを使えば、最小サイズにトリミングできる。
- 各レイヤーのx,y,w,hを取得して、上手い具合に重ならないよう、各レイヤーのx,yを変更して配置するスクリプトが必要。
- 配置が出来れば、スクリプトで、全レイヤーの表示位置をテキストファイルに出力できる。
- テキストファイルとして出力できれば、PerlやRubyでXMLに整形すればいい。
でも、Python + PIL 等で作ってしまったほうが楽そうな気もする。
◎ 塗りに関して気になるページ。 :
_マチュアアニメーションを安く制作するのを応援するページは
「串刺し塗り」というアプローチに、なるほどと思ったり。手描きアニメ制作時の作業効率向上に繋がりそう。そのままできる場面は少ないとしても、自動判定処理を盛り込んでいけばどうにか…。
もしかして、RETASあたりはそういうことが当たり前のようにできたりするんだろうか。気になって検索。 _昔はできた っぽい。
「串刺し塗り」というアプローチに、なるほどと思ったり。手描きアニメ制作時の作業効率向上に繋がりそう。そのままできる場面は少ないとしても、自動判定処理を盛り込んでいけばどうにか…。
もしかして、RETASあたりはそういうことが当たり前のようにできたりするんだろうか。気になって検索。 _昔はできた っぽい。
[ ツッコむ ]
#3 [cg_tools] psdをレイヤー別にpngで保存する方法
_ImageMagickを使えばpsdファイルをレイヤー別に保存
できるらしい…。知らなかった。
Windows7 x64 + GIMP 2.6.11 で、複数のレイヤーを持ったpsdを保存して実験。ImageMagick の convert で変換。
と思ったが問題発見。全レイヤーに対して自動切り抜きをしたpsdで同じことをしたら、GIMPで開く際に、「画像サイズ外に描かれている変なpngだ」と警告されてしまった。Photoshop Elements 8.0 で psd を保存し直して試してみたけど、同じ結果に。どうやらあらかじめ、 _全レイヤーを画像サイズに合わせる 処理をしておかないといけない感じ。
GIMP + _Continuous Save なら、そういう問題は起きない模様。位置情報は消えるけど、レイヤー内の描かれている部分だけをpng保存してくれる。
その後少し調べてみたが、そもそも Photoshop Elements 8.0 でpsd保存すると、GIMP上で全レイヤーに自動切り抜きをかけた状態と同じになる。つまり、Photoshop Elements で保存したpsdに対してImageMagick でレイヤー別に保存すると、おかしなpngが出来てしまうのが確定、なわけで…。Photoshop しか持ってない人は、ImageMagick だけではレイヤー別に保存できないんじゃないかと思えてきたり。
_どうでもいいと思うよ: ImageMagickのPSDの扱い方 で詳細な実験結果が。どうやら各pngには、位置情報も含まれているらしい。それを取り出して位置合わせをすれば解決するらしいが、どう考えても面倒。
_image processing - Extract layers from PSD with ImageMagick, preserving layout - Stack Overflow に、気になるオプションが見つかった。
でも、やっぱり、GIMP + _Continuous Save + _全レイヤーを画像サイズに合わせる 、を使ったほうが楽かな。
Windows7 x64 + GIMP 2.6.11 で、複数のレイヤーを持ったpsdを保存して実験。ImageMagick の convert で変換。
convert hoge.psd -delete 0 fuga_%04d.png複数の fuga_*.png が得られた。GIMPでレイヤーとして開いてみたが、透明度も残ってるように見える。素晴らしい。
と思ったが問題発見。全レイヤーに対して自動切り抜きをしたpsdで同じことをしたら、GIMPで開く際に、「画像サイズ外に描かれている変なpngだ」と警告されてしまった。Photoshop Elements 8.0 で psd を保存し直して試してみたけど、同じ結果に。どうやらあらかじめ、 _全レイヤーを画像サイズに合わせる 処理をしておかないといけない感じ。
GIMP + _Continuous Save なら、そういう問題は起きない模様。位置情報は消えるけど、レイヤー内の描かれている部分だけをpng保存してくれる。
その後少し調べてみたが、そもそも Photoshop Elements 8.0 でpsd保存すると、GIMP上で全レイヤーに自動切り抜きをかけた状態と同じになる。つまり、Photoshop Elements で保存したpsdに対してImageMagick でレイヤー別に保存すると、おかしなpngが出来てしまうのが確定、なわけで…。Photoshop しか持ってない人は、ImageMagick だけではレイヤー別に保存できないんじゃないかと思えてきたり。
_どうでもいいと思うよ: ImageMagickのPSDの扱い方 で詳細な実験結果が。どうやら各pngには、位置情報も含まれているらしい。それを取り出して位置合わせをすれば解決するらしいが、どう考えても面倒。
_image processing - Extract layers from PSD with ImageMagick, preserving layout - Stack Overflow に、気になるオプションが見つかった。
convert hoge.psd -set dispose Background -coalesce -delete 0 fuga_%04d.pngこれなら、警告が出ないフツーのpngに変換できた、ような気がする。オプションの意味はさっぱりわからないけど。
でも、やっぱり、GIMP + _Continuous Save + _全レイヤーを画像サイズに合わせる 、を使ったほうが楽かな。
- レイヤー内の描いたところだけ出力したいなら、そのまま Continuous Save を使う。
- 各レイヤーを画像サイズで保存したいなら、全レイヤーを画像サイズに合わせる、を使ってから Continuous Save を使う。
[ ツッコむ ]
#4 [cg_tools] GIMPのパターンファイルを少し増やしてみたり
_PhotoshopのパターンをGIMPで開くプラグイン | Eglantyne2 画像遊び
_Photoshop Pattern Loader Binaries for Microsoft Windows | GIMP Plugin Registry
_鉄とGIMP >> Blog Archive >> 複数の画像からパターンを一括作成(Script-Fu)
参考にして、PhotoshopのパターンファイルをGIMPのパターンファイルに変換。
_Free Patterns for Photoshop or Gimp | texturemate.com - Free Textures, Brushes, Patterns, and Design Articles!
いくつかDLさせてもらって、変換のテストを。…当初、GIMPでもそのまま使えるpatファイルなのかと思ったら、そんなことはなかったわけで。なので、このあたりの実験を。
_Photoshop Pattern Loader Binaries for Microsoft Windows | GIMP Plugin Registry
_鉄とGIMP >> Blog Archive >> 複数の画像からパターンを一括作成(Script-Fu)
参考にして、PhotoshopのパターンファイルをGIMPのパターンファイルに変換。
_Free Patterns for Photoshop or Gimp | texturemate.com - Free Textures, Brushes, Patterns, and Design Articles!
いくつかDLさせてもらって、変換のテストを。…当初、GIMPでもそのまま使えるpatファイルなのかと思ったら、そんなことはなかったわけで。なので、このあたりの実験を。
[ ツッコむ ]
以上、1 日分です。