出入りできる絵画ギミックを作ろう
(Dissolve / Stencil)

出入りできる絵画ギミックを作ろう / ねこぼっくす

講師紹介

名前: ねこぼっくす
好きなもの: 紅茶と焼き菓子
最近ハマってること: Resonite

出入りできる絵画ギミックを作ろう / ねこぼっくす

講義にあたってのお願い

  • 講師をShow Avatar (シフォンちゃんが見えたらOK！)
  • イヤーマフの解除 (テキストボックスの視認性向上のため)

講義進行のためご協力をお願いします！
(できた人は手を挙げるボタン等で教えてください)

出入りできる絵画ギミックを作ろう / ねこぼっくす

この講義を受けるとうれしいこと

  1. 衣装や小物の出現や消失をリッチにする方法が分かる
  2. 見せたい所と見せたくない所を制御する術を知れる
  3. 遊び心やインパクトがある表現の仕組みを学べる
出入りできる絵画ギミックを作ろう / ねこぼっくす

本日の流れ

  1. Dissolve ってなに？
  2. Dissolveでの消失エフェクトについて
  3. Stencil ってなに？
  4. Stencilでのマスク表現について
  5. 組み合わせるとどうなる？
  6. 絵画ギミックを実際に作ってみよう
出入りできる絵画ギミックを作ろう / ねこぼっくす
1. Dissolve ってなに？

1. Dissolve ってなに？

  1. Dissolveでの消失エフェクトについて
  2. Stencil ってなに？
  3. Stencilでのマスク表現について
  4. 組み合わせるとどうなる？
  5. 絵画ギミックを実際に作ってみよう
出入りできる絵画ギミックを作ろう / ねこぼっくす
1. Dissolve ってなに？

Dissolve(溶解) とは

  • 条件を満たした部分を(溶かしたように)見えなくするモノ
  • 小物や衣装の「フェードイン/フェードアウト」によく使われる
出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて
  1. Dissolve ってなに？

2. Dissolveでの消失エフェクトについて

  1. Stencil ってなに？
  2. Stencilでのマスク表現について
  3. 組み合わせるとどうなる？
  4. 絵画ギミックを実際に作ってみよう
出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolveのエフェクトの種類

  • 座標: ルートボーンや原点からの距離もしくは方向で溶ける部分を指定
  • 透明度: テクスチャの透明度で溶ける部分を指定
  • UV: テクスチャの中心からの距離もしくは方向で溶ける部分を指定
出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolve(透明度)の動作

テクスチャの透明度で溶ける部分を指定

出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolve(UV:点)の動作

テクスチャの中心からの距離もしくは方向で溶ける部分を指定

出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolve(UV:線)の動作

テクスチャの中心からの距離もしくは方向で溶ける部分を指定

出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolve(座標:点)の動作

ルートボーンや原点からの距離もしくは方向で溶ける部分を指定

出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolve(座標:線)の動作

ルートボーンや原点からの距離もしくは方向で溶ける部分を指定

出入りできる絵画ギミックを作ろう / ねこぼっくす
2. Dissolveでの消失エフェクトについて

Dissolve(座標:線の上下)のマテリアルを2つ同時に入れた時の動作

何かが消えると同時に何かが現れるような表現ができる

出入りできる絵画ギミックを作ろう / ねこぼっくす
3. Stencil ってなに？
  1. Dissolve ってなに？
  2. Dissolveでの消失エフェクトについて

3. Stencil ってなに？

  1. Stencilでのマスク表現について
  2. 組み合わせるとどうなる？
  3. 絵画ギミックを実際に作ってみよう
出入りできる絵画ギミックを作ろう / ねこぼっくす
3. Stencil ってなに？

Stencil(型紙) とは

  • 条件を満たした部分を(型紙のように)切り抜くモノ
  • いわゆる「マスク」を動的に行える
出入りできる絵画ギミックを作ろう / ねこぼっくす
4. Stencilでのマスク表現について
  1. Dissolve ってなに？
  2. Dissolveでの消失エフェクトについて
  3. Stencil ってなに？

4. Stencilでのマスク表現について

  1. 組み合わせるとどうなる？
  2. 絵画ギミックを実際に作ってみよう
出入りできる絵画ギミックを作ろう / ねこぼっくす
4. Stencilでのマスク表現について

liltoonにおけるStencilのプリセット

  • Writer: オブジェクトにRefの値を設定する
  • Reader: Writer越しに見たときにRefの値が同じなら非表示 (NotEqual)
  • Reader(反転): Writer越しに見たときにRefの値が同じなら表示 (Equal)
出入りできる絵画ギミックを作ろう / ねこぼっくす
4. Stencilでのマスク表現について

Stencilの主な条件式

  • Always: Refの値を参照せず常に表示、liltoonのデフォルトはこれ
  • Equal: 指定したRefと等しいオブジェクト越しに見たときだけ表示
  • NotEqual: 指定したRefと等しいオブジェクト越しに見た時だけ非表示
出入りできる絵画ギミックを作ろう / ねこぼっくす
4. Stencilでのマスク表現について

Readerの動作

Writer越しに見たときにRefの値が同じなら非表示 (NotEqual)

出入りできる絵画ギミックを作ろう / ねこぼっくす
4. Stencilでのマスク表現について

Reader(反転)の動作

Writer越しに見たときにRefの値が同じなら表示 (Equal)

出入りできる絵画ギミックを作ろう / ねこぼっくす
4. Stencilでのマスク表現について

ReaderとReader(反転)のマテリアルを2つ同時に入れた時の動作

共存して両方が個別の条件で表示される

出入りできる絵画ギミックを作ろう / ねこぼっくす
5. 組み合わせるとどうなる？
  1. Dissolve ってなに？
  2. Dissolveでの消失エフェクトについて
  3. Stencil ってなに？
  4. Stencilでのマスク表現について

5. 組み合わせるとどうなる？

  1. 絵画ギミックを実際に作ってみよう
出入りできる絵画ギミックを作ろう / ねこぼっくす
5. 組み合わせるとどうなる？

Dissolve と Stencil を
組み合わせたら

額縁をルートボーンとStencil(Writer)に設定すると...
額縁の外と内で別々のモノが見えるようになる！

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう
  1. Dissolve ってなに？
  2. Dissolveでの消失エフェクトについて
  3. Stencil ってなに？
  4. Stencilでのマスク表現について
  5. 組み合わせるとどうなる？

6. 絵画ギミックを実際に作ってみよう

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

絵画ギミックの作り方

  1. シンプルな額縁を作成
  2. アバターの全メッシュのルートボーンを額縁に設定
  3. 額縁の前面の板をStencil(Writer)にして値を決める
  4. アバターの全マテリアルを額縁の外側と内側用に2つコピー
  5. 額縁の外側用の全マテリアルにStencil(Reader)とDissolve(座標:線+Z)を設定
  6. 額縁の内側用の全マテリアルにStencil(Reader:反転)にDissolve(座標:線-Z)を設定
  7. 額縁のON/OFFとワールド固定のメニューを作る
  8. 動作確認(Gesture Manager)

→長い！難しい！授業内で終わらない；；

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

絵画ギミックに挑戦したい人は

ごめんなさい！ 授業内では時間が足りないので扱いません...
挑戦してみたい方は授業後に公開される資料を参照しながら作ってみてください！

(画像途中で力尽きててすみません...文章のみでも作れるようにはなってます)

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-1. 額縁の親GameObjectを生成

  • 空のGameObjectの生成方法:
    Hierarchyウィンドウを右クリックしてCreate Empty
  • 名前をつける:
    判別しやすいように「額縁」や「Frame」などの名前をつける
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-2. 額縁のTransformを調整

  • 位置を調整:
    額縁のTransform > PositionのXを0、Yを0.75、Zを1にする
  • 回転を調整:
    額縁のTransform > RotationのXを0、Yを180、Zを0にする
  • 大きさを調整:
    額縁のTransform > ScaleのXを1、Yを1.5、Zを1にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-3. 額縁の前面・背面を作成

  • Quadの生成方法:
    額縁の中でHierarchyを右クリックして3D Object > Quad
  • 前面を作成:
    前面用のQuadを生成後にTransform > Rotation > Yを180にして正面(+Z)に向ける
  • 背面を作成:
    背面用のQuadを生成後にTransform > Rotation > Yを0にして背面(-Z)に向ける
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-4. 額縁の前面・背面からコライダーを削除

  • コライダーの削除方法:
    QuadのInspectorのMesh Colliderを右クリックしてRemove Component

Tips「複数選択」
Shift/Ctrlを押しながら前面・背面の両方をクリックして選択すると同時に編集ができる

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-5. 額縁の上下のフレームを作成

  • Cubeの生成方法:
    額縁の中でHierarchyを右クリックして3D Object > Cube
  • 上下の大きさを設定:
    上下用のCubeを生成後にTransform > ScaleのXを1、Yを0.01、Zを0.01にする
  • 上下の位置を設定
    Transform > PositionのXを0、Yを0.5と-0.5、Zを0にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-6. 額縁の側面のフレームを作成

  • Cubeの生成方法:
    額縁の中でHierarchyを右クリックして3D Object > Cube
  • 側面の大きさを設定:
    側面用のCubeを生成後にTransform > ScaleのXを0.01、Yを1、Zを0.01にする
  • 側面の位置を設定
    Transform > PositionのXを0.5と-0.5、Yを0、Zを0にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-7. 額縁のフレームからコライダーを作成

  • コライダーの削除方法:
    CubeのInspectorのBox Colliderを右クリックしてRemove Component
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-8. 額縁の前面・背面のマテリアルを作成

  • マテリアルの生成方法:
    Projectウィンドウを右クリックしてCreate > Material
  • liltoonに変換:
    Inspectorウィンドウ上部のStandardを選択してリストの下部にあるliltoonを選択
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-9. 額縁の前面・背面にマテリアルを適用

  • 前面のマテリアルを設定:
    前面のQuadにマテリアルをドラッグ&ドロップする
  • 背面のマテリアルを設定:
    背面のQuadにマテリアルをドラッグ&ドロップする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

1-10. 額縁の前面・背面を半透明にする

  • 半透明:
    描画モードを半透明、基本設定のZWriteのチェックを外す
  • Unlit化:
    ライティング/明るさ設定のUnlit化を1にする
  • 透明度:
    メインカラー/透過設定の色のAを1にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

2-1. アバターの全メッシュのルートボーン設定

  • ルートボーンの作成:
    空のGameObjectを作成してルートボーンと分かる名前にする
  • メッシュの設定:
    MA Mesh Settingsをアバターにつけてルートボーンに上記で作成したGameObjectを設定する
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

2-2. ルートボーンを額縁に追従させる

  • 追従用のGameObjectを作成:
    空のGameObjectを作成して追従用と分かる名前にする
  • 追従設定:
    VRC Parent ConstraintをつけてSourcesに額縁、Advanced Settings > Target Transformにルートボーンを設定後にZeroを押す
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

3. 額縁の前面の板をStencil(Writer)にして値を決める

  • Writer設定:
    額縁の前面のマテリアルを生成して基本設定最下部の通常からWriterに変更する
  • 値の設定:
    Writerの下にあるRefを0～255の間で他のギミックと干渉しなさそうなランダムな値にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

4-1. アバターの全マテリアルを額縁の外側・内側用に2つコピーして差し替える

  • マテリアルをコピペ:
    メッシュのMaterialsにあるものをすべて選択してコピペ
  • 判別しやすい名前をつける:
    <元の名前>_<Outside/Inside>など名前をつける
  • 差し替えの方法:
    メッシュのMaterialsのElementにドラッグ&ドロップ
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

4-2. アバターの全マテリアルの描画モードを設定

  • 描画モードの変更方法:
    マテリアルを選択して上部にある描画モードのリストから選択する
  • 描画モード:
    不透明はカットアウト、半透明は半透明のままにする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

5-1. 額縁の外側用の空のマテリアルを作成

  • 空のマテリアルを作成:
    マテリアルを生成してliltoonに変換
  • 名前の変更:
    「絵画ギミック_外側」など判別しやすい名前をつける
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

5-2. 額縁の外側用の空マテリアルにStencil(Reader)を設定

  • Reader:
    基本設定の最下部にある通常をReaderに変更
  • Ref:
    Readerの下にあるRefを額縁とは違う値にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

5-3. 額縁の外側用の空マテリアルにDissolve(座標:線)を設定

  • Dissolve:
    詳細設定のDissolveにある座標を線に変更する
  • 方向指定:
    Dissolve内の方向をX,Yを0、Zを1にする
  • パラメーター:
    Dissolve内の範囲・ぼかし・ノイズを0にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

5-4. 額縁の外側用のマテリアルプリセット保存画面を開く

  • プリセット画面を開く:
    マテリアル設定の上部にあるプリセットを開く
  • プリセット保存画面を開く:
    プリセット右下にあるプリセットを保存を開く
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

5-5. 額縁の外側用のマテリアルプリセットを作成

  1. 名前に「絵画ギミック_外側」など判別しやすい名前をつける
  2. カテゴリをその他にする
  3. Deselect Allボタンなど活用しながら全てのチェックを外す
  4. Dissolve、輪郭線、ステンシルにチェックを入れる
  5. 最下部のSaveを押してマテリアルプリセットを保存
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

5-6. 額縁の外側用の全マテリアルにマテリアルプリセットを適用

  • 適用したいマテリアルを選択:
    額縁の外側用マテリアルを選択
  • プリセット画面を開く:
    マテリアル設定の上部にあるプリセットを開く
  • プリセットを適用:
    プリセット下部にあるその他から作成したプリセットを適用
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

6-1. 額縁の外側用の空マテリアルをコピーして内側とする

  • コピーを作成:
    外側用のマテリアルをProjectウィンドウで選択してコピペ、もしくはCtrl+Dで複製
  • 名前の変更:
    「絵画ギミック_内側」など判別しやすい名前をつける
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

6-2. 内側用の空マテリアルの設定

  • Reader(反転):
    基本設定の最下部にある通常をReader(反転)に変更
  • Ref:
    Reader(反転)の下にあるRefを額縁と同じ値にする
  • Dissolveの方向を反転:
    詳細設定のDissolveの方向をZを-1にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

6-3.外側と同じようにマテリアルプリセットに登録・適用を行う

※手抜きではありません！！！(?)

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

7-1.額縁のON/OFFのメニューを作る

  • メニューの作成方法:
    空のGameObjectを生成してMA Menu ItemとMA Menu Installerをつける
  • ON/OFFの設定方法:
    MA Object Toggleをつけて額縁をトグルの指定先にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

7-2.額縁のワールド固定

  • 額縁をワールド固定:
    額縁にMA World Fixedをつける
  • 額縁を追従プレイヤーに追従:
    空のGameObjectを作成してVRC Parent ConstraintをつけてSourcesにアバタールート、Advanced Settings > Target Transformに額縁を指定する
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

7-3. ワールド固定のメニューを作る

  • メニューの作成方法:
    空のGameObjectを生成してMA Menu ItemとMA Menu Installerをつける
  • ON/OFFの設定方法:
    MA Object Toggleをつけてワールド固定のGameObjectをトグルの指定先にする
出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

8. 動作確認(GestureManager)

アバターや額縁を動かしたり、メニューからON/OFFやワールド固定を試してみよう

全部が正常に動いたら...

出入りできる絵画ギミックを作ろう / ねこぼっくす
6. 絵画ギミックを実際に作ってみよう

絵画ギミック完成！おめでとう！！！

出入りできる絵画ギミックを作ろう / ねこぼっくす

振り返り

  • Dissolve は「条件を満たした部分を(溶かしたように)見えなくするモノ」
  • Stencil は「条件を満たした部分を(型紙のように)切り抜くモノ」
出入りできる絵画ギミックを作ろう / ねこぼっくす

参考資料

出入りできる絵画ギミックを作ろう / ねこぼっくす

ご清聴ありがとうございました

出入りできる絵画ギミックを作ろう / ねこぼっくす

================================================== # TODO list - [ ] ギミック - [x] 絵画ギミック (最優先！) - [x] Dissolve 基礎 - [x] Stencil 基礎 - [ ] 着替えギミック - [x] 4次元ポケット (Rejected) - [x] 目に髪がかかっても目が浮いて見える (Rejected) - [ ] 箱の中だけ別世界 - [ ] - [ ] GIF - [x] Dissolve 基礎 - [x] Stencil 基礎 - [ ] 絵画ギミック - [ ] 着替えギミック - [x] 4次元ポケット (Rejected) - [x] 目に髪がかかっても目が浮いて見える (Rejected) - [ ] 箱の中だけ別世界 - [ ] 絵画ギミックの作り方 (Unity) ==================================================

![bg right](https://placehold.jp/32/444444/ffffff/720x1280.png?text=お着替えギミックの動作.gif) ## <span>Dissolve</span> ってこんな感じ ---

![bg right](https://placehold.jp/32/444444/ffffff/720x1280.png?text=箱の中だけ別世界の動作.gif) ## <span>Stencil</span>ってこんな感じ ---