More than 3 years have passed since last update.

Houdini ApprenticeAdvent Calendar 2020Day 1

Houdiniでドット絵作成

Last updated at 2020-12-07Posted at 2020-11-30

はじめに

Houdiniでドット絵を作る方法を書いた
使用ツールはHoudini Apprentice 18.5.351

画像生成、コンポジット・・・COP2
レイヤー等編集・・・SOP
タスク管理・gif作成・・・TOP

1.要点

Houdiniでドット絵を作る上で比較的重要な点を述べる

リファレンス画像

リファレンス画像はFileノードで読み込める

下のgifはリファレンス画像を見ながらGroup Paintノードを使って星の形にgridをグループ化しているところである
シーンビューではgridのf@Alphaアトリビュートを０にすると透明、１にすると不透明になるので見やすい値に変えると良い

- Alphaを変えながらGroup Paintノードでグループ化

画像の生成

VOP COP2 Generatorノードで解像度を設定


- 32x32ピクセルに設定された画像

COPの画像をSOPへ

SOP内にCOP2 Networkノードを作ると画像をVolumeやMeshとして持ち込める

Meshは一つのピクセルが一つのポイントとして表現されている
この記事ではMeshの状態のものを編集する

ペイント

COP2 Networkノードで作られたMeshは色v@Cdと不透明度f@Alphaのポイントアトリビュートを持っている
SOPでこれらのアトリビュートを変更していく

方法

v@Cdを変更すると色が変えられる
透明にしたい部分はf@Alphaを0.0にする
不透明部分は1.0にする

Attribute Paintノードで直接Cdを変更する手もあるが、後から色を変更したくなった場
合などでもすぐ対応できるよう、先に着色する場所をGroup Paintノード等でグループを設定すると良いだろう

Colorノードを使えば指定したグループを一気に染められる

カーブ・ストロークによるペイント

方法

Meshはあらかじめf@Alfhaを0.0に設定しておく
Draw Curveノード等で自由にポリゴンカーブを作る
カーブはv@Cdを編集、色を付けてf@Alphaを1.0にする
Meshにカーブからv@Cdとf@AlphaをAttribute Transferノードで転送するとペイントされている!

- 自由に作ったカーブ

- Meshのポイントアトリビュートv@Cdの編集

ピクセルパーフェクトな線

ピクセルパーフェクトな線をある程度Houdiniで再現することが出来たので紹介する

- 実際にHoudiniで描いた様子

- 主要なノード

pixel_perfect.hipnc

任意のジオメトリからMesh（レイヤー）へ色を転送

方法

好きなジオメトリを用意する
下の画像の様にMeshと１のジオメトリを並べる
Meshのポイントにベクトルを設定する
Rayノードを使って色（v@Cdやf@Alpha）を移す

法線等のベクトルをポイントに持たせるとRayノードを使ってベクトルの方向にあるv@Cd等のアトリビュートを取得できる
RayノードでCreate Point Groupにチェックを入れると色が移せたポイントをグループ化してくれる

※このグループはアウトラインの作成にも使える

- Before front

- Before perspective

- After perspective

アウトライン

方法

アウトラインを付けたいMeshのポイントグループをGroupExpandノードで広げる
GroupCombineノードで元のグループを引く
グループの外側にグループができるのでそこをColorノード等で着色する

- グループのブーリアン

グラデーション

方法

グラデーションさせたい場所にカーブを引く
Resampleノードでf@curveuを作る
Rayノードでf@curveuアトリビュートをラインから取ってくる
f@curveuを使ってColorノードのAttribute Rampで色を付ける

- Curve U Attribute

- Rayノードパラメータ

- Rampによる着色

Game Boyの色を使う

HoudiniではないがAsepriteには良いプリセットがたくさんある
試しにGame Boyのプリセットを画像としてHoudiniに持っていく

AsepriteからpngでExportし、HoudiniのColor Editorで読み込む
下の画像の赤枠をクリックすると画像ピッカーが表示される

画像をクリックするだけで簡単に色を抽出できる

念のため色をHoudiniで確認してみる

- AsepriteのRGB

- Houdiniで２５５を掛けたRGB

色の一つはきちんと（RGB　１５５　１８８　１５）になっており、寸分の狂いなく抽出出来ている

シーンビューでもう少し見やすく

Meshの持っているv@Cdやf@Alphaはポイントアトリビュートだ
その為シーンビューの映像と最終的に出力される画像にはギャップがある

- シーンビューの映像

改善方法

ResampleノードでDistance Attributeをpscaleとして作成
Meshの下に接続する
一辺が１のgridを作る
2と3をCopy to Pointノードにつなぐ

- Distance Attribute

- 出力画像に近くなった

ライトのSpecularやEmissionを切っておくとなお良い

- シーンビューのライト

フレーム毎のバリエーション

バリエーションを作りたい部分をたくさんコピーして変更・マージ・必要なフレームの取り出しをする

下の画像ではフレーム毎にEditノードを使ってバリエーションを付けている
またそれぞれのフレームを判別するための識別子をAttribute Expressionノードで作っている

- フレーム毎に変化をつける

Object Mergeノードでワイルドカードを使って一気にマージすると楽である
たくさんのバリエーションを作っていてもNULLノードの名前さえ合っていればマージしてくれる

- マージされたバリエーションたち

Blastノードを使うとフレームの識別子からフレームを取り出せる

- i@frameというアトリビュートを基にフレームを取り出す

SOPのレイヤー（Mesh）をCOPへ

SOPからCOPへの画像の移動は以下のツイートを参考にした

要望があったので、hipファイルアップしました。
サブネットにまとめてるので、中身見るなり、HDAにするなり自由に使って下さい。https://t.co/YVEQ6ptx7U
— 大翔士 (@d658t) August 8, 2019

方法

事前にSOP内のMesh（レイヤー）をX,Y座標共に０から１の範囲にピッタリ合うように大きさを変えておく
COP内のVOP COP2 GeneratorやVOP COP2 FilterノードでVOPを組む事でSOP内のv@Cdやf@Alphaを画像のR,G,B,Aとして拾ってくる事が出来る

※1は縦・横の比率が変わって問題ない
大きさをピッタリ変えるにはMach Sizeノードが便利だ

- Mach Sizeノードのパラメータ