Spritesheet

Houdini では、複数のスプライト画像を1枚のテクスチャにまとめてインデックスでコントロールして使用する事が可能。ここでは Houdini と一緒にインストールされているサンプル画像を 9 枚使用して 3x3 のスプライトシートを作成。

元になっているのは、Peter Quint 氏によるこちらのビデオ

使用したバージョン: 14.0.361
シーンファイルへのリンクは一番下にあり。

1. スプライトの作成

  1. Houdini 起動後、ネットワークパネルで /img (COP) へ行く。
    • comp1 というノードが出来る。(Composite View へ行くなど他の操作をした結果、comp1 できなければ、TAB->Managers->Image Network を作成。
  2. 'i' キーを押すか、ダブルクリックして中に入り、file ノードを作成。
  3. ビューを Scene ビューから Composite View に変更。
    • default.pic が表示されているはず。
  4. パラメータパネルの File の default.pic となっているところの横のボタンをクリック、ブラウザを表示。
    1. ブラウザ左側の$HFS/houdini/pic/ をクリックしてサンプル画像のあるディレクトリへ行く。
    2. Show sequences as one entry がオンになっていることを確認。
    3. butterfly$F.pic (1-7)をダブルクリック選択。
  5. タイムラインを 1 から 7 までスクラブすれば、7種類の蝶の画像が表示される。
  6. File (butterflyF_pic) ノードの出力に Mosaic ノードを接続。表示フラグを mosaic1 に移す。
    1. Image per Line を 3 にする。
    2. Max Image per Frame を 9にする。
    下記の赤枠で囲ったボタンを押せば、Composite ビューに7種の蝶が3行に渡ってフィット表示される。

    これでは2つ足りない。そこであと2枚別の画像を追加。
  7. file ノードをもう一つ作成。先ほどと同じディレクトリから Mandril.pic を選択 (他の画像でも良い)。
  8. file ノードをもう二つ作成。同じディレクトリからそれぞれに bacon.jpg, baconAlpha.jpg を選択。
  9. TAB->Utility->Channel Copy を作成 (TAB キーを押してから c,o,p,y とタイプすると早く選択できる)。
    1. 一つ目(一番左)の入力に bacon_jpg を接続。
    2. 二つ目(中央)の入力に baconAlpha_jpg を接続。
    3. パラメータの Target を "A" (アルファ)にする。
    4. パラメータの Source を "Input 2: C"にする。

    Composite View 下のAlphaボタンを押すとAlphaが確認可能。これによってRGBとAlphaが別々に指定されていた画像を一枚のRGBA画像にすることが出来た。
  10. TAB->Timing-> Sequence を作成。
    1. butterflyF_pic と mosaic1 の間に挿入。
    2. Mandril_pic を sequence1 に接続。
    3. channelcopy1 を sequence1 に接続。
    4. sequence1 のパラメータの Scale To New Size のトグルをオン。他はデフォルトのまま。
  11. mosaic1 に表示フラグを設定。

    左側が RGB, 右側が A 表示。
  12. この状態を画像として出力するには通常はROP Output を使うが、今回は単一画像だけなので、mosaic1 の上でRMB->Save Image...
    • ディレクトリとファイル名を指定。拡張子はAlphaを保存できるものを使用(.pic, .exr, .tga, .tif, .png 等)。
    • 今回は spritesheet.pic として保存 (Save をクリック)。

まとめ

  • 連番画像を m x n のスプライトとするには mosaic ノードを使う。
  • 複数の画像シーケンスを一つのシーケンスとまとめるにはConnectを使う。
  • RGB と A が別々の画像を一つにまとめるには Channel Copy をつかう。
  • スプライトを実際にパーティクルに使う方法はこちら。

シーンファイル:

0 件のコメント:

コメントを投稿