😊

【Cavarly学習12】色について<配列とグラデーション>

2025/01/12に公開

今回は前回作った「波系アニメーション2」に全体的にグラデーションをつけたいと思ったので色についてのチュートリアル動画を見ます。
7分半と長めの動画(ドキドキ)

「A basic run through of color in Cavalry(キャバリーにおける色の基本的な流れ)」
https://www.youtube.com/watch?v=F924TQ8EGLU

Cavalryには多様な使い方が可能な、非常にクールなカラーツールが揃っている。
今回の小さなアニメーションでは、カラーパレット(Color Array)にランダムを適用し、その他いくつかの要素を加えて、アニメーションにちょっとした面白さを加えている。

動画内での、このアニメーションのこと(引用元

このツールとグラデーション、そして新しいマルチポイントグラデーションを組み合わせれば、さまざまな探求と遊び心が楽しめる。
それでは、それらの一部をサクッと紹介しよう。

サクッとお願いします。

Color Array

まず、配列(Array)を作成する。
ドロップダウンメニューから「Create Array from Palette」を選択すると、配列が表示され、ここからが本番だ。

Swatchesの3本メニューの下の↓をクリックするといくつかカラーパレットが用意されている。
動画と同じ色はなかったが私は「Bright」というパレットでColor Arrayを作成した。

配列をクリックしてドラッグダウンし、例えば小さなオブジェクトを複製ツール(Duplicator)に入れると、配列内の色を使って自動的に反復して展開される。

「Auto Index」が有効になっているため、すべての色が順番に適用される。

Auto Index有効→色が順番になる

これを「2」に変更すれば青に、「4」に変更すれば黒になる。3以上の数字を指定すると黒が適用される。

配列に登録した色になる

色の順番をランダムにする

次に、Indexにランダム挙動(Random Behavior)を追加する。
現在の設定では黒が多いのは配列の上限が10に設定されているからだ。数値を調整して結果を確認する。

→配列の上限を配列のMAX値と一緒にすればいいのかなと思ったけど、明らかにオレンジと黄色が多い、、、

突然動画が飛ぶ→Noiseへのきりかえ

なんか急に画面変わったと思ったらRandom BehaviorをNoise Behaviorに変更したらしい

Cavalryの素晴らしいところは、シンプルなセットアップにいくつかのプロシージャル挙動を追加することで、アニメーションを大幅に強化できる点だ。

IndexにNoise Behaviorを追加してMinとMaxの値を調整すると、まぁ動画と同じ感じにはなった。

Gradient

続いてグラデーションを作成しよう。
「Gradient Shader」をクリックし、「See Gradient from Palette」を選択すると、カラーパレットを使ったグラデーションが作成される。

▼パレットからグラデーションを作成

例えばパレットの白を黒にドラッグするだけで調整が完了する。
このグラデーションはスケール、オフセット、リピートなど、さまざまな方法でアニメートできる。 > オフセットには数値を設定することで、動きのあるアニメーションを簡単に作成できる。

今回の動画ではオフセット(offset)にBehaviourの「Frame」を追加することでアニメーションを作成している。
FrameのStrengthの値を変えるとアニメーションの速さが変わる。

Intdex To Color

次に、インデックスと追加色の設定を行う。
オブジェクトを選択し、インデックスと色をリンクする。
その後、再度「See Gradient from Palette」を選択し、結果を確認する。
正しくリンクされていれば、グラデーションが反復適用される様子が確認できます。

この部分の動画は正直途中で飛んでたりして分かりづらかったので、自分がやった手順をメモしておく

https://youtu.be/Ptm-J5lkmTc

1.オブジェクト作成
2.デュプリケーターで複製
3.[Index To Color]レイヤー作成
4.シェイプと接続→グラデーション適用
5.グラデーションを選択した状態でパレットから「Set Gradient from Pallete」を選択

Index to Color:
各インデックスにグラデーションをマッピングし、サブメッシュ(Duplicator、Text など)内のシェイプの色を設定します。

https://docs.cavalry.scenegroup.co/nodes/utilities/index-to-color/

▼ここまでのグラデーションhow toで私のやりたかったことはできた
https://youtu.be/f874U2j34ZE

ちなみに「Intdex To Color」でも出来たし、「Gradient Shader」でも同様の見た目になった

Gradient Shaderはデフォルトだと一つ一つのオブジェクトがグラデーションになるが、「Screen Space」にチェックをいれると全体にグラデーションが適用された。

「Gradient Shader」は「Intdex To Color」よりも細かいグラデーションの設定ができるので、こちらの方が使い勝手が良さそうだけど、どう使い分けるのかは謎。

「Gradient Shader」と「Intdex To Color」の違い

さきほどの例では結果が一緒なので分かりづらかったけど単純な図形で適用を変えてみたら違いが分かった。

Shaderはグラデーションを図形にそのまま貼り付ける(?)イメージでIntdex To Colorは図形の一つひとつに割り当てていく。

▼Gradient Shader

▼Intdex To Color

メモ:Gradient Shaderは「Shader」というカテゴリでIntdex To Colorは「Utility」というカテゴリ。
●Shaderについての公式ドキュメントはこちら:https://docs.cavalry.scenegroup.co/nodes/effects/shaders/

Discussion