第十回 コンポーネント紹介 【単純なアニメーションを作る】

TIPS
TIPSTIPS:Components特集

今回は、単純なアニメーションが作れるコンポーネント等を4つご紹介いたします。
滑らかに動かしたり、ポップアップ表示みたいな動きを作ったり、特定の数値で動く物を作ったりができます。

Blender等で作ったアニメーションデータの再生方法ではなくて、Neos内で単純なアニメーションを作る方法になります。
他のコンポーネント等と組み合わせて、遊び心満載のワールドやアイテム等を作ってみましょう!

SmoothValue(スムース バリュー)

現在の値から指定された値に向けて、滑らかに変化(補間)するコンポーネント。
様々な型(数値、色等)があるので、使いたい型を選ぶ。

・場所
Transform/Drivers/

項目解説初期値
TargetValue:補間する値。0(型によって違う)
Speed:補間する速さ。10
WriteBack:ドライブ先の値が書き換わると、TargetValueの値に返ってくる。無効
Value:ドライブ先。null

・使い方
適当なスロットにアタッチ。
TargetValueとSpeedを設定。

・補足
TargetValueの値を変えると、現在の値から滑らかに変化するアニメーションを簡単に追加できます。
例えば、ボタンを押すと瞬時に色が変わるギミックがある場合、色の値をこのコンポーネントで補間する事で滑らかに色を変える事ができるようになります。
Speedの値は大きいと速く、小さいとゆっくりになります。0だと動かないです。
WriteBackを有効にすると、ドライブ先の値がLogiX等でWriteされたりSliderコンポーネント等で動かされた時に、TargetValueの値も連動して変化します。動作中に強制リセットしたり、Slider等と組み合わせて惰性っぽい挙動も作れます。
Neos内で大人気のLogiXノード『Smooth Lerp』のコンポーネント版。Smooth以外の補間方法で動かしたい場合は、LogiX等でやりましょう。

・Neos Wiki リンク
https://wiki.neos.com/SmoothValue_(Component)

・関連
Smooth Lerp(LogiX)

BooleanValueDriver(ブーリアン バリュー ドライバー)

Bool値(TrueかFalse)で、2つの値を切り替えてドライブしてくれるコンポーネント。
様々な型(数値、文字、色等)があるので、使いたい型を選ぶ。

・場所
Transform/Drivers/

項目解説初期値
State:状態。False
TargetField:ドライブ先。null
FalseValue:状態がFalseの時に使用される値。0(型によって違う)
TrueValue:状態がTrueの時に使用される値。0(型によって違う)

・使い方
適当なスロットにアタッチ。
FalseValueとTrueValueを設定。TargetFieldを指定。

・補足
ブール値(TrueかFalse)で、位置や大きさ、文字列や色等を切り替える事ができます。
例えば、マテリアルの色をドライブして、StateがTrueの時は赤色、Falseの時は緑色のように切り替える事ができます。
LogiXノード?:三項演算子のコンポーネント版。
Bool型を選んで、FalseValueをTrueに設定、TrueValueをFalseに設定すれば、Bool値を反転(!NOT)できます。(ValueEqualityDriverコンポーネントでも可能。)

・Neos Wiki リンク
https://wiki.neos.com/BooleanValueDriver%601_(Component)

・関連
?:(LogiX)

ScaleTransition(スケール トランジション)

Bool値(TrueかFalse)で、大きさ等(Float3)を滑らかにドライブしてくれる。
更に、アクティブ等の切替えもやってくれる。至れり尽くせりなコンポーネント。
UI等の表示・非表示アニメーションが、簡単に付けられます。

・場所
Transform/Drivers/

項目解説初期値
ShowField:状態。(Trueだと表示、Falseだと非表示)True
TransitionTimeFild:遷移時間。1秒
ShowScaleField:表示したときの大きさ。x0 y0 z0
HiddenScaleField:非表示のときの大きさ。x0 y0 z0
CurveField:補間方法。Sine
_scaleDrive:ドライブ先。(Float3型)null
_enabledDrive:ドライブ先。(Bool型)null

・使い方
大きさをアニメーションさせたいスロットもしくは親スロット等にアタッチ。
ScaleFieldを設定。Drive先を指定。

・補足
手軽にポップアップアニメーションが作れちゃう。
例えば、ボタンを押したらBoxが表示されるギミックがある場合、単純に実装すると一瞬で表示・非表示が切替りますが、このコンポーネントでスケールを動かせば、ポップアップするようなアニメーションを簡単に追加する事ができます。
スロットのアクティブがFalseになると、このコンポーネントも動かなくなっちゃうので気を付けましょう。
ShowScaleFieldの初期値が0なので、数値を設定しましょう。
動きの補間方法がSine、Cosine、Smooth、Smoother、Linearの5種類から選べます。
_enabledDriveはShowFieldがTrueになった時は、すぐにドライブ先もTrueにしてくれます。逆にFalseになった時は、切り替えアニメーションが終わってからドライブ先をFalseにしてくれるので、とても便利です。

ValueGradientDriver(バリュー グラディエント ドライバー)

1つの数値を使って、設定した制御点の値でドライブしてくれるコンポーネント。
キーフレームアニメーションみたいな感じ。LogiXの>大なり<小なり=イコール?:三項演算子を合体させたような使い方もできる。
様々な型(数値、文字、色等)があるので、使いたい型を選ぶ。

・場所
Transform/Drivers/

項目解説初期値
Progress:進行度。0
Target:ドライブ先。null
Interpolate:一番近いPoints2点の値で補間する。有効
Points(list):制御点のリスト。(Addで追加できる。)
 Position:Progressとの関係性。0
 Value:ProgressがPositionに来た時のドライブする値。0

・使い方
適当なスロットにアタッチ。
Pointsを設定。Targetを指定。

・補足
超便利で最強なコンポーネントです。(個人の感想です。)
ちょっと分かりにくいので、Boxが3地点を移動するアニメーションを例にしてみます。
まず適当にBoxを用意して、このコンポーネントをFloat3型でアタッチします。
Points(list)をAddボタンで追加して、制御点を3つ作り、下記表の通りに設定してみてください。
Targetにスロットのポジションを指定します。
この状態でProgressのスライダーを0→1に動かすと、BoxがVの字に滑らかに動きます。

PointsPositionValue
0:0x0 y0 z0
1:0.5x0.5 y0 z-2
2:1x1 y0 z0

Pointsを追加する前にTargetを指定すると、EnabledがFalseになっちゃう。(全部設定してからTrueに戻しましょう。)
Progressは0~1以外も使える。100でも-100でもOK。
ProgressとPositionの値は、0.01以下も設定できるけど、表示は四捨五入されちゃう。
Interpolateが有効だと、Points2点間で補間してくれる。無効だと、各Pointsで瞬時に切り替わる。

宣伝になりますが、MMC22(メタバースメーカーコンペディション2022)に出展し、受賞したワールド『Center Control Room』で、このコンポーネントを大量に活用しています。
災害体験が出来るワールドなのですが、スタートボタンを押すとカウントを開始して、その値(秒数)を使って各イベントを連動させています。Progressが29(開始から29秒)になったら音を鳴らすとか、Progressが180になったらライトを消す等の処理をイベント毎に設定できるので、大規模なイベントのギミックも一人で簡単に実装する事ができました。
VR空間内で安全に災害体験ができますので、是非体験してみてください。

・Neos Wiki リンク
https://wiki.neos.com/ValueGradientDriver%601_(Component)

コンポーネント紹介記事のネタ募集中!

NeosVRコンポーネント紹介記事のネタを募集中です!
紹介して欲しいコンポーネントや、作りたい機能等を随時募集しております。(※このシリーズが終了するまでの間。)
また、記事の内容・書き方等のご意見ご要望、ご感想も受け付けております。
Neos内で私berneを見かけたら、お気軽に声をおかけください。

おわり

以上で第十回は終了です。拙文ではございますが、最後までご覧頂きありがとうございました。
次回は、値等の様々なコピー方法を紹介予定です。
お楽しみに!

     
タイトルとURLをコピーしました