💡

【Cavarly学習13】テキストの色が1文字ずつ変わるエフェクト

2025/01/13に公開

前の記事でサブメッシュを使って文字一つ一つに色をつけたが若干消化不良なので途中で参考にした動画を最初から最後までやってみる。

▼Using Cavalry's Sub-Mesh Behaviour to cycle Text colors.
https://www.youtube.com/watch?v=T2TGFmXiUS0

ちなみに前回の動画でChatGPTで翻訳をしてたら、だいぶ要約されていることが分かったので今回は省略しないでお願い〜と頼んでみました。結果は最後に書いておきます。

動画概要

みなさん、こんにちは。イアンです。この動画では、テキストに回転する色のエフェクトを作る方法を説明します。
とても簡単で、Cavalryを使えば数秒で設定できます。ただし、この例では少しやりすぎて、2つの回転する色のセットをフェードさせたり、テキストを変更したりもしています。なぜなら、せっかくなのでいろいろ試してみたかったからです。
最初に基本的な回転する色の部分を説明し、その後、さらに凝った内容を見せます。興味があれば、最後までご覧ください。

テキストに回転する色のエフェクトを作成する

テキストを入力する

では、新しいテキストを作りましょう。Altキーを押しながらテキストツールをクリックすると、シーンの中央にテキストが作成されます。
フォントを「Sarah Basic」に変更します。このフォントが好きなんです。それから、文字を大きくして画面中央に配置します。

Sarah Basicはなかったので、そのままいく

さて、テキストを画面中央に配置したら、次に何をするかというと...
カテゴリをいくつか作る必要があります。
ここで、2行のテキストを用意しました。これは何かを説明するためのものです。

単語や行、または文字ごとに色を設定する

テキストシェイプの「Fill Color」という設定を見てみましょう。
これで全体の文字色を設定できます。これは予想通りの動作ですね。

さて、次に、異なる単語や行、または文字ごとに色を設定する方法を見てみましょう。
これを行うには「Deformer」の1つを使います。この目的に合うのは**「Submesh Deformer」**です。

TextレイヤーのAttoribute Editor(以下AE) > Deformes > Sub-mesh

Submeshを追加して、フィルタタブを開き、「Replace Fill」をオンにします。それからパレットを追加します。

例えば、「Simple Palette」を選びます。そして「Create Array from Palette」をクリックして、このパレットをシーンで使えるユーティリティとして作成します。
その出力(名前の横にある小さなドット)をドラッグして「Fill Color」に接続すると、各文字に異なる色が割り当てられます。

▼Connect後

ここで、「Auto Index」という設定がオンになっているため、各項目が異なる色を持つ仕組みになっています。
「Auto Index」をオフにすれば、すべて同じ色にすることもできます。

「Behavior」タブでさらに設定を調整できます。例えば、「Level Mode」を「Text Characters」「Words」「Lines」のいずれかに変更すると、文字単位、単語単位、行単位で色を設定できます。
これらの設定をうまく組み合わせることで、テキスト全体に対するエフェクトの見た目や動きを自由にカスタマイズすることが可能です。

これは前の記事でやった。

色をランダムにする

次に、この色をランダムに変更する方法を見ていきましょう。まず、「Auto Index」をオフにした状態で、「Random Seed」を調整します。この設定を使うと、各文字にランダムな色を割り当てることができます。
同じ文字が2回同じ色になるかもしれません。

Color ArrayのAE > Auto IndexをOFF
IndexにBehaviour > Randomを追加
RandomのAE > Maximumを4(Color Arrayの最大値が4なので)
Seedを動かすと色がランダムに変わる

色を順番に変える

乱数はそうやって嘘をつくから、代わりに使いたいのは**「modulates」**です。

Color ArrayのAE > IndexにBehaviour > Modulateを追加

ModulateのIndex Offsetを移動させると、色がサイクルしているのが見えるはずです。
これは基本的にインデックスに対して剰余(モジュラス)を適用しているからです。
つまり、ゼロ、1、2、3、4、ゼロ、1、2、3、4、ゼロ、1、2、3、4...という感じで、ぐるぐる回っているだけです。

では、これをどうやって自動的にアニメーションさせるかというと、このインデックスオフセットを右クリックして「Add Behaviour」を選択し、「Frame」を追加します。

これで色が非常に速く変化します。さらに、このフレーム動作のUIをダブルクリックして開き、Valueを0.1に変更します。これで、10フレームごとに新しい色が表示されることになります。これで、回転する色を作成する方法がわかります。

Frameの速さを変えるにはValueを変更

さて、少し余談が多くなってしまいましたが、セットアップ自体はほんの数秒でできます。
でも、私は少し凝ったことをしていて、2つの色の配列をフェードさせていました。2つのカラーエリアの間でフェードさせる作業をしていたんです。さて、2つ目のカラー配列を作成しましょう。もし他の内容に興味がなければ、このチュートリアルはここで終わりです。

色を徐々に変化させる

ここからは応用編のため一旦進まず終わります。

では、2つ目の配列を作成し、「パレットから作成」を選択します。
次に、Submeshの動作で、こちらの「Fill」セクションにあるこの色を設定する必要があります。

そして、それは私たちの配列の1つから来ているのですが、実際にはそれを使いたくありません。代わりに使いたいのは「Color Blend」なので、Macでは「Command + .」、Windowsでは「Control + .」を押して、「Color Blend」と入力し、Enterを押します。すると、この素晴らしいグラデーションと新しいユーティリティが表示されます。そして、ここで何をするかというと、少し賢い方法を使って、私たちの配列の1つを接続します。例えば、「Color Array 2」を接続して、その出力をドラッグしてグラデーションのカラーサンプルに接続します。これでどうなるかというと、実際にやらなければならないのは、テキストシェイプを取って、Submeshの「Fill Color」を掴むことです。これを解除して、新しく追加したColor Blendを接続します。もしColor Blendをドラッグするときに、MacではCommandキー、WindowsではControlキーを押しながらドラッグすると、接続が自動的に置き換わります。これで、2つの色をフェードさせることができます。

さて、この右側の色は何でも構いません。例えば、赤にフェードさせたり、また戻したりできます。これがアニメーションの仕組みです。私が以前に作ったシーンでは、右側の色のストップが2つ目の配列にリンクしていました。これを実現するには、この「Color Array」を取り、それを2つ目のカラーサンプルにドラッグします。あとは、強度を0から30に設定してキーフレームを打ち、そのバーを少し動かすだけで、両方の色が表示されるようになります。

これで、1つの配列は回転する色、もう1つは回転しない色になっています。回転しない色も回転させたい場合は、2つ目の配列を選び、そのUIを開き、Modulateの出力をインデックスにドラッグして、接続します。これで再生ボタンを押すと、色が回転して動き出します。

非常にシンプルな方法です。最初に戻ってみると、回転する色の配列が1つ、そしてその後、別の色のセットが回転しているのがわかります。それが全てです。これがColor Blendの使い方です。次に、もう一つ私がやったことは、テキストをアニメーションさせることです。なぜなら、やらない理由はないからです。

では、Macでは「Command + .」、Windowsでは「Control + .」を押して、エレメントウィンドウを開き、「string」と入力して、「String Array」を選びます。「String Array」は、色の配列のように文字列のセットを作成します。ここで、最初に「Cavalry」を入力し、次に「Amazing」と入力します。それから、このString Arrayの出力をテキストにドラッグします。これで、Auto Indexをオフにして、文字列がアニメーションするのを見ていきます。キーフレームを設定して、「1」と入力し、別の場所で「2」と入力すると、「Cavalry is amazing」というアニメーションが作成できます。

これが、私が文字列をアニメーションさせた方法です。他にも何か見せることはありますか?このビデオで何かを学んでいただけたことを願っています。そして、このテクニックを使って、どんな作品が作れるか楽しみにしています!

ーーーー

ChatGPTの翻訳は人の言葉のクセとか無駄な繰り返しとかを省略してくれて、すっごい優秀なんだが、文章にならない人の言葉(繰り返したり、あ〜っていったりする部分)は「省略しないで」と言っても結構勝手に省略するみたい。笑

少しずつ細切れに入力していくしかないかなぁ〜

Discussion