こんにちは、SenstiveCubeです!この記事ではvineFramesの仕組みの解説や、3DSMAX、Unity、ShaderForge、STYLYの設定手順を説明します。
![Untitled-4 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-4.jpg)
ここでは、3DSMAXを利用したモデリングの手順をお見せします。
スクリーン、つる、葉っぱ用のPlaneメッシュの画像です。
![Untitled-5 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-5.jpg)
![Untitled-7 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-7.jpg)
![Untitled-6 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-6.jpg)
つると葉っぱは同じ方法で作成します。ベースとなるオブジェクトを作成し、線に沿って2回変形作業を行います。
まず、長いPlaneを作成します。
![Untitled-10 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-10.jpg)
Path Deform with twisted splineを使用して変形していきます。![Untitled-11 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-11.jpg)
![Untitled-11 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-11.jpg)
次に、今度はcircle splineを使用して変形します。
![Untitled-12 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-12.jpg)
オブジェクトにUVを設定してください。スクリーンオブジェクトを確認し、両方の面の表示がおかしくないか確認します。
![Untitled-1 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-1.jpg)
FBXファイルへエクスポートしてください。
![Untitled-3 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-3.jpg)
次はUnityを開いてください。
つる、スクリーン、葉っぱ用にマテリアル、シェーダーを3つずつ用意します。
![Untitled-19 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-19.jpg)
つるマテリアルにはPBRシェーダーを使用します。
![Untitled-22 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-22.jpg)
スクリーンマテリアルにはunlitシェーダーをを使用します。基本のカラーマップを使います。
葉っぱのshareが重要です。これはvertex offsetでアニメーションの設定を行います。
![Untitled-02 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-02.jpg)
ノイズテクスチャをvertex offsetへ追加し、UVアニメーションを追加します。
Face CullingはDouble Sidedに設定しましょう。
![Untitled-01 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-01.jpg)
テクスチャがアニメーションで動く際には、vertexは波のように動きます。
シンプルなアニメーションですが、とても効果的です。
マテリアルのパラメータを好みに調節し、完成です!
![Untitled-03 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/Untitled-03.jpg)
![00 - STYLY vineFrames : Breakdown ](https://styly.cc/wp-content/uploads/2018/09/00.gif)
同じ手順で別の形のオブジェクトも作成することができます。いろいろ挑戦してくださいね!