🐴
【Cavalryの基礎・入門】Basic Shape 以外のシェイプの種類

2025/01/13に公開
アニメーション
Basic Shape の他にも特定の用途を意図したシェイプが用意されている様子。
Add Layers から Shapes を選んだ際に表示されるシェイプを順番に見て行こうと思う。
ちなみにダブルクリックをするとレイヤーに追加される。

 Background Shapeシーンの背景を覆うサイズのシェイプが作られる。形だけで言えば Basic Shape の Primitive Type を Rectangle（長方形）にして、シーンと同じサイズにすれば再現可能なように思える。
違いは個別設定項目に Shrink（シュリンク）という縮めるという意味の項目があり、X値とY値を加算すると縮んでいく。
なるほど。
シーン全体を幕のように覆ったり開いたりするには便利かもしれない。

 Basic Line
線。ただの線だけではなく、ベジェ曲線と渦巻も作れる様子。

 Line TypeLine/Bézier/Spiralの三種が選べる。それぞれに少しずつ設定項目が異なる。

 Line > Length長さ。

 Line > Divisions不明

 Bézier > Start Position開始点の位置。

 Bézier > Start Offset開始点の位置のずらし。

 Bézier > End Position終了点の位置。

 Bézier > End Offset終了点の位置のずらし。

 Bézier > Divisions不明。

 Spiral > Outer Radius全体（外側）の渦巻の半径。

 Spiral > Inner Radius中央の穴（内側）の半径。

 Spiral > Sides渦巻の頂点。数が多いと滑らかになるが後述の Start Angle と End Angle との関係もある。

 Spiral > Start Angle渦巻の始点（中心側）の曲げ具合。

 Spiral > End Angle渦巻の終点（外側）の曲げ具合。

 Spiral > Divisions不明。

 Cel Animation Shapeこれがシェイプに含まれる理由や感覚は追々理解できると思いますが、いわゆるパラパラ漫画的なものが表現できます。
このシェイプ自体は下地もしくは箱のようなものでそれそのものに形や大きさはなく、キーフレームごとにパスを描くことフレームごとに表示非表示を操作してくれる。
例えば1フレーム目に 1 と書いて、2フレームに 2 と書けば、2フレーム目を表示している時は 1 は消えるし、1フレーム目を表示している時は 2 は表示されない。
手描きのパラパラ漫画にはうってつけの機能だ。
描けるのはパスだけで、他のシェイプなどは載せられない様子。

 Fill Rule値には Even Odd（偶数奇数） と Winding（巻き込み）というものがあるのですが、違いがわかりません。おそらくパスが重なった時の塗りのルールなのですが、今のところ不明です。

 Onion Skinningたまねぎの皮のように薄く向こう側が透けて見えるという意味ですね。前後のキーフレームに描いたパスを見えるようにするかのチェックです。
チェックしただけでは何もおこらなかったのですが、どうやらビューポートの以下の部分も有効にしないと使えない機能なようです。

 Component（Pro）Pro版のみ。

 Connect Shape何かと何かを繋げるコネクタを表現するシェイプ。シェイプ同士を繋げることで特殊な動きをさせることもできそうだけれど、とりあえずは「繋いでいる線」を表現するものと思った方が良さそう。
Connect Shape の属性エディタには個別の設定項目の他にも Sorce と Target というタブが増える。コネクトする源と対象ということのようだ。
設定項目が多いうえに、正直ほとんど意味がわからないので以下の動画を見ながら試す方が理解が速い。
https://www.youtube.com/watch?v=jW8kJB8BdFg
色々と設定値ははあるが、Sorce も Target も Sub-Mesh を使うことが多いようだ。

個人的には Path でもいいんじゃないかと思ったりもしている。
いつか使いこなせる日がくることを祈る。

 実例"Connect Shape" by Hideki Saijo licensed CC BY from Scenery.io

 Convex Hull凸包（とつほう）という言葉があるらしい。中に含まれるシェイプを包む最小限の大きさの袋や膜のようなものをイメージしてもらうのがわかりやすいか。

 Input Shapes中に含ませるシェイプを指定できる。何個でもいけるようだ。

 High Qualityチェックをいれるとよりみっちりとひっつく。風船のようにピタッと。チェックを外すと少し緩んで雑になる感じ。

 実例"Concentric Hulls" by Giuseppe Laezza licensed CC BY from Scenery.io

 Corner Pinこれは最初に生成される四角がただの灰色の Rectangle なのが分かり難い原因です。
Corner Pin は以下のドキュメントにあるように3D遠近法の錯覚を作り出すためにあるものですので、単純なベタ塗りのシェイプだと錯覚が起こり難くて意味が分かり難いです。
https://docs.cavalry.scenegroup.co/nodes/shapes/corner-pin/
このドキュメントの下部にある例を実際にやってみるとわかりやすいのでおすすめです。
まず大事なのは四方の水色の十字は触って動かせます。非常に触り難いですが、ダブルクリックをするなどして掴んでみてください。

そしてドラッグして動かすと突然意味がわかると思います。
イメージとしてはポスターの四隅を持って、任意の隅を手前に引いたり奥に押したりするとポスターは変形して歪み、絵柄もゆがんだりしますよね。そのような3D表現を実現してくれます。
細かい説明は難しいので調べていた時のキャプチャを貼っておきます。

 実例"Deep Corner Pin" by Antonin Waterkeyn licensed CC BY from Scenery.io

 Custom Shape編集可能なシェイプというような意味だけれど、シェイプはどれも編集可能。ここでいう Custom とはもとのシェイプを親として作成した子供のシェイプ（インスタンス）を編集することができるという意味なのだと推測する。

 Input Shape親のシェイプとなるエディタブルシェイプAを作成し、Custom Shape の Input Shape に接続すると Custom Shape は シェイプA のコピーとなる。
Custom Shape は色をつけたり大きさを変更してシェイプAとは違うプロパティを持つことができる。ただし形を形成するパスについてはシェイプAとリンクしている。
シェイプAのパスを変形させると、それと同じように Custom Shape の形も変わる。
Custom Shape の方のパスを変形させようとするとアラートが出て、そのまま無視して変形を続けるとそれはもうインスタンス（Custom Shape）ではなくなり、ただの エディタブルシェイプ になる。

 Bake Transform変形を焼き付ける的な雰囲気ですね。ドキュメントでは
チェックすると、入力シェイプの変換がカスタムシェイプの出力に適用されます。つまり、入力シェイプが拡大縮小された場合、カスタムシェイプもそれに応じて出力されます。これは、拡大縮小時にストローク幅を保持する方法としても使用できます。
このように解説されていて、入力シェイプの Scale 変換と Custom Shape のScale が同調するのかなと思ったのですがそんなことはなく、Custom Shape にシェイプが接続された瞬間の Scale をどうするのか、引き継ぐのかどうなのかを決めるもののようです。
チェックをせずにインスタンスの生成後に拡大縮小をして大きさを合わせると Stroke の幅が合わなくなるようなので、その回避用みたいです。

 Editable Shapeペンツールや鉛筆ツールで描いたものや、シェイプを Ctrl/Cmd + E で 編集可能にしたシェイプがこの種類になる。

 Pathパスのキーフレームを打つことができ、キーフレームごとにパスを変化させると変化の過程をアニメーションしてくれる。

 Fill RuleFill Rule という塗りに関するルールが一般的にあるらしい。パスが交差して Fill が重なる箇所の塗りをどのような規則で塗ったり塗らなかったりするのかを指定できる。
指定できる値は Even Odd（偶数奇数）か Winding（巻き込み）のどちらか。

 Onion Skinning前述の通り。

 Extract Sub-Meshes説明を読むよ Duplicate したシェイプの任意のシェイプ（10個複製していたら 2番目と5番目とか）を対象にすることができるらしい。用途は不明。

 Input Shape入力するシェイプだけれど、基本的に単体シェイプではなく Duplicator を入力するっぽい。

 Indicesindex の複数形？指定の数字のシェイプが取得される。数字でもいいし、first や last などという指定もできる様子。0:3 とすれば 0～3個目のシェイプになる。

 Level Modeシェイプを取得するレベルやモードとのことですが、詳細は不明。

 Custom Level不明

 Ignore Empty Sub-Meshes空（から）のサブメッシュを無視するかどうかのチェック。

 Extrude（Pro）Pro版のみ。

 Footage ShapeAssets から画像や動画を配置した時にできるシェイプでメディアの外枠、箱のようなイメージ。
メディアはこの Footage Shape の塗りの Shaders として表示されている。なのでこの Footage Shape を変形させたりアニメーションさせると画像や動画も動くということになる。

 Shrink縮小。X値とY値を加算すると縮んでいく。

 sizeメディアの大きさを示す属性で、読み取り専用とのこと。大きさの変更は 基本属性の Scale で調整するっぽい。

 Forge Dynamics（Pro）Pro版のみ。

 Grid Layout Group（Pro）Pro版のみ。

 Grid Layout Row（Pro）Pro版のみ。

 Groupレイヤーをグループ化するもの。レイヤーを選択して Ctrl/Cmd + G でもグループ化できる。
グループをそのまま Duplicate することもできたりする。機能面でも整理面でも必須な機能。

 Blending and Opacity Modeブレンドモードや Opacity を 全体（ArtBoard）でおこなうか個別レイヤー単位（Individual Layers）でおこなうかを選べる。

 Image To Shapes画像を長方形や楕円でサンプリング（クッキーの型抜きのような感じ、もしくは点描）したもの。アセットの画像を入力して使用する。

 Imageサンプリングの元となる画像を入力。

 Mode長方形か楕円を選ぶ。

 Iterations反復という意味。数値が高いほど、作成されるシェイプの数が増え、忠実度が高くなるとのこと。

 Filter速度と品質の割合を指定できる。
None (Fastest)：最高速度。最低品質。
Bilinear：高速。低品質。
Mipmaps：低速。高品質。
Bicubic：最低速度。最高品質。

 Isolines（Pro）Pro版のみ。

 JavaScript Shape（Pro）Pro版のみ。

 Layout Group（Pro）Pro版のみ。

 Merge開いたパスともうひとつのパス（もしくはシェイプ）を繋ぐ（合わせて閉じる）ようなシェイプが作られます。

 First Shape / Second Shapeシェイプをふたつ指定します。

 Reverse Second Shape2番目のシェイプのパスの方向を反転します。

 Outline任意のシェイプのアウトラインをシェイプとして利用できるようになります。

設定は Stroke のものとほぼ同じなので同じ項目は割愛します。

ただ、OutLine は Stroke ではなくあくまでもシェイプだと強調されています。

 Clean Up場合によっては不要なジオメトリが作成され、意図しない箇所にアウトラインが生成されるのですが、チェックを入れるとそれを防げるようです。ONにするとパフォーマンスに影響があるらしいですが、二重で Stroke を指定したりしない限りはとくに気にする必要はなさそうで OFF のままでもいいのかなと思います。

 Preserve Materials入力シェイプの Fill または Stroke の色がアウトラインに適用されるようになります。両方とも色がついている場合は Stroke の色が優先的に採用されます。

 Points to Pathポイントとポイントを繋いだパスを作成してくれる。ポイントはいわゆるパスにおけるアンカーポイントに該当するとイメージできる。
ポイントはオブジェクトであればなんでも良さそう。

シェイプが邪魔なら Null（Shift + Ctrl/Cmd + =）を作成すれば見えないポイントになってくれる。

 Point Sorce基本的には Array にして任意のポイントの Position をコネクトするという使い方だと思う。

ただ、Random などにするとランダムなパスが描かれるのも面白い。ただ、ポイントが存在しないので自由に動かせる訳ではないっぽい。
ここでは Array の場合の項目を紹介。

 Position 0～3 +Addポイントの配置を指定。入力ポイントの Position とコネクトすればポイントの動きに合わせてパスが変形する。

最小値は4個で、始点・二番目・三番目・終点の4つのアンカーポイントで操作できる。
全てをコネクトさせると全部自由に動かせるが、任意のポイントは固定するというような使い方もできそう。始点と終点だけ固定するとか、またはその逆など。

 Closeパスを閉じます。始点と終点のパスがくっつきます。

 Bézier（ベジェ）曲線でパスを描画します。チェックしない場合は直線になります。

 Pre-Compプレではなくプリコンポジション。Add Layers から作成すると変な感じになるので Assets で作成したコンポジションを親コンポジションのレイヤーとして配置するか、任意のレイヤーを選択して右クリックから Pre-Compose Selection を選択するのが良さそう。
作成済みのプリコンポジションにレイヤーを追加しようとすると

「Parent or move into Composition?」という問いが出て、

選択肢として、「Parent」か「Move into Composition」を選ぶ必要があります。
Parent はこのコンポジションを親レイヤーとして使い、レイヤーは元コンポジションに残す。

Move into Composition はレイヤーをこのコンポジションに移動させるという意味。
ほとんどの場合が後者のつもりで移動させるのではないかなと思うけれど、このコンポジションと一緒に動かしたいという場合などは前者もあり得るのかな？それなら Group を使用した方がわかりやすいのではないかとも思う。
感覚としてはプリコンポジションという明確なものがあるのではなく、コンポジションを他のコンポジションに含ませた場合、その含まれた方のコンポジションのことをプリコンポジションと呼ぶ感じ。
コンポジションA と コンポジションB があって Aの中にBを入れた場合、Bをプリコンポジションと呼ぶし、Bの中にAを入れた場合 Aをプリコンポジションと呼んでいるっぽい。
ちなみに AにBを入れた状態でBを開き、そこにAを入れようとしてもエラーだった。循環・無限ループしてしまうからだろう。

 Quad Tree Shape意味が分からないものの代表ですね。
ポイントの分布を使用して、ポイントの密度に応じて正方形を小さな正方形に分割
してくれるそうです。やってみると一応こんな感じ。
どう使うのだろう。。。
ドキュメントでも詳しい説明はなくて実例や以下のチュートリアル動画が置いてあるだけです。
https://www.youtube.com/watch?v=qRTFaOzKFvs

 実例"Future User Interface" by Scene Group licensed CC BY from Scenery.io
こんな感じの表現をしたい時に使えるようですが、コンピューターの画面とか、何かをランダムに表示する時くらいした用途が思い浮かびません。
とりあえずは上級者向けと割り切っておこうと思いました。

 Rayレイ。光線ですね。一筋の光という感じです。障害物に当たるまで無限の長さ（シーン・コンポジションの端まで）に放射される線とのことです。
ただ、自動で障害物認定はされず、Ray に対して障害物となるものを Collision Shapes で指定します。

 Collision Shapes障害物としてみなすシェイプを指定できる。

 Collision Margin障害物との衝突の深度を設定。深くめり込むのか、手前で止まるのか。

 Bidirectional光線が進む方向。チェックを入れると（二次元に）双方向。チェックを入れなければ片方のみ。

 Divisions分割数。使われ方は不明。

 SVGSVGを使用する時のもの。Image To Shapes と感覚は似ているが、より直接的。

 File使用するSVGデータを Assets から入力する。

 SVG MaterialsSVGのマテリアル（≒塗り？）を無視するには、この属性のチェックを外す。Fillで上書可能。

 SVG StrokesSVGの Stroke（≒線）を無視するには、この属性のチェックを外す。Strokeで上書可能。

 Segment Path（Pro）Pro版のみ。

 Shortest Path（Pro）Pro版のみ。

 Spacer（Pro）Pro版のみ。

 Text Shape最後にして最高に設定項目が多いテキストシェイプ。
タブには Background の項目も増えています。
テキストシェイプ自体に理解が難しいことはないので、設定可能項目をひとつずつ見て行きたいと思います。

 String表示する文字です。日本語も（フォントがあれば）いけますし、改行も理解します。

日本語フォントは重いので注意が必要です。
Generatorボタンを押すと日付けやランダムな文字などを自動で入力することもできます。

Timecodeを表示することもできます。

 Fontフォントの指定ができます。存在すれば weight の指定も可能です。

 TypefaceTypeface というユーティリティがあり、書体だけの情報を持ったオブジェクト（？）を作れるのですが、それをコネクトすることができます。
同じ Typeface を複数のテキストシェイプにコネクトさせることで共通の書体を利用することができます。
テキストシェイプの Font 同士をコネクトしても同じような効果は得られますが、Typeface を使用した方がスマートかもしれません。

 Font Sizeフォントの大きさです。

 Shrink to Fit Text Boxテキストボックスの大きさに連動してフォントサイズを小さくするのか、それとも改行させるのかどちらを優先するのかを決められます。
テキストボックスのサイズを Auto にしていると文字の大きさの方が主体となるので触れなくなる。

 Allow Word Breaks改行するということは、改行位置をどこにするか？単語単位で改行するか？という問題が出てきます。これにチェックを入れると単語の途中で区切って改行することを許可するということになります。

 Avoid Orphans最後の行が1単語だけになってしまうのを防いでくれるそうです。日本語だとあまり恩恵は少ない気がします。

 Alignmentテキストボックスの中で水平方向の文字寄せを指定できます。

 Vertical Alignmentテキストボックスの中で垂直方向の文字寄せを指定できます。

 Character Spacing文字間の幅を指定できます。いわゆるカーニングですね。

 Word Spacing単語間の距離を指定できます。日本語だとそれほど使わないかもです。半角スペースをあけた時の広さと考えていいかもしれません。

 Line Spacing行間の広さです。

 Paragraph Spacing段落と段落の間の広さです。改行で1行分の余白をあけた時の広さと考えていいかもしれません。

 Text Box Sizeテキストボックスのサイズです。テキストボックスがあってその中にテキストがあると考えるか、テキストボックスは自動伸縮（Autoにチェック）とテキストは常に同じと考えるかによって変わります。

 Force Monospasingチェックを入れると、非等幅フォントからカーニングが削除されるようです。文字をアニメーションする時に便利な様子。

 String ManipulatorsString Manipulator（文字列マニピュレータ）という文字列を操作する（例えば置換したりシャッフルしたり）機能をコネクトすることができます。

 Style Behavioursテキストの任意の文字列（〇文字目とか）のスタイルを指定可能です。1文字目だけ大文字にするなど


 Material Behavioursテキストに追加の効果・フィルターを加えることができます。例えばドロップシャドウなど。

 Formatting Inputs文字列を追加することができます。別のテキストシェイプを挿入して連結させることも可能です。どんな時に必要なのかは不明。一部のテキストの書式は違うけれど、アニメーションはひとまとまりにしたい時などか？

 Text Pathコネクトしたシェイプに沿って文字が配置されます。

 Path Travelテキストシェイプがパスに沿って移動します。

 Path Loopチェックすると、テキストシェイプがパスの周りをループします。

 Path Pushパスとテキストシェイプの距離と考えた方がわかりやすいかも。
ここからは Backgroundタブ内の項目です。

 Background Shapeプラスボタンをクリックすると背景用のカスタムシェイプが作成されます。

 Mode背景をどのようにつけるか Document/Paragraph/Line/Word/Charactor の中から選べます。

 Specific Indices任意の範囲・文字にだけ背景をつけることができます。

 Padding文字と背景の余白です。

 Ascender Adjustment上昇方向の調整。

 Descender Adjustment下降方向の調整。

 Corner Radius Mode角丸の調整。All（全部一括）か Individual（個別指定）かを選べる。

 Corner RadiusAll の時の角丸の大きさ。

 Top Radii上側の角丸の大きさ。Lは左上、Rは右上。

 Bottom Radii下側の角丸の大きさ。Lは左下、Rは右下。

 Chamfer角丸した部分の面取りをするか否か。
いくつか用途や内容が理解できないものや、Pro版のみのものもあったけれど、とりあえず Shapes にあったものは全部触ってみて、なんとなく理屈はわかった気がします。
とあるアニメーションを思い付いた時に、必要なシェイプとその設定を最短で思い出して導き出せるようになるにはまだまだ時間がかかると思うけれど、少し慣れ親しんできたと感じています。
次は、Behaviours か Utilities か  Effects を触ってみようと思います。
それぞれ単体で使うものではないと思うので、代表的な使い方だけでも知ることができたら嬉しいくらいの気持ちでやっていこうと思います。