🐴

【Cavalryの基礎・入門】シェイプについてのまとめ

2025/01/13に公開

シェイプにも色々あるみたい。
レイヤー追加の検索窓で「shape」と入れて出てきたシェイプを書き出してみる。

とりあえずProのものは除く。

非情に数が多いし、名前だけではどのような形なのか想像できないものも多い。
ひとつずつ調べて行こうと思うけれど、途中で挫折するかもしれない。

Basic Shape(ベーシックシェイプ)

何の変哲もないシェイプを意味する。
ツールバーから作成するシェイプも基本的にこれに属する。
と言うかれの Primitive Type が違うだけ。

Primitive Type は原形とでも言えばわかりやすいかもしれない。

この Primitive Type には以下の種類がある。

  • None
  • Arc
  • Arrow
  • Capsule
  • Cogwheel
  • Ellipse
  • Polygon
  • Rectangle
  • Ring
  • Star
  • Super Ellipse
  • Super Shape

選ぶものによって設定できる値が違ってくる。
例えば Polygon であれば何角形にするのかの項目があったり、Arrowであれば矢印の大きさの指定があったりする。

円グラフをアニメーションさせようと思ったら Ring を指定したくなるけれど、設定値を見る限りでは Arc の方が使いやすそうだ。

この Primitive Type がどれだとしても変わらないシェイプの設定がある。

  • 基本設定(Shape)
  • 塗りに関する設定(Fill)
  • 線に関する設定(Stroke)
  • マスクに関する設定(Mask)
  • 高度な設定(Advanced)

この5種類だ。

Advanced は正直よくわからないことばかりなので、それを除いた4つの項目を順に触ってみようと思う。

基本設定(Shape)

まずは基本設定(Shape)内の指定可能項目から。

Position

おなじみのX値とY値で指定が可能。
両方とも0にすると表示画面の中央にくる。
左上を(0,0)にする方法はいまのところ見つけられていない。
あまり使わないと思うけれど、XとYをコネクションすると同じ数値だけ増減するので x=y のグラフ上の動きになる。

Rotation

Zと描かれているけれど3DでいうところのZ軸方向の動きではなく回転軸方向の動きのよう。
値を増やすと反時計回りに、値を減らすと時計回りにシェイプが回転します。
両方とも360で一回転。

Scale

大きさの指定です。X値とY値で指定が可能。
コネクション機能とは別にX値とY値を連動させるボタンがあり、
連動前の指定値の比率を保つことが可能。
つまりは形を保ったまま歪ませずに拡大縮小ができる。

Skew

ゆがみ、ひずみという意味。傾きという表現の方がしっくりくる。
正方形を傾ければ平行四辺形になる。

Pivot

旋回軸というような意味。バスケットボールでピボットターンという片足を軸足として回転する動きがあるがその軸足の位置と同じような意味。
通常はシェイプの中央が設定されているが、この位置をずらすことでアニメーションの仕方が変わる

Opacity

透明度。0~100%の指定。
塗りも線もすべて対象。
塗りもしくは線だけ透明度を指定したい場合は
それぞの項目に Alpha という指定値がある。後述。

Blend Mode

ブレンドモード。重なっている他のオブジェクトとの合成表示をどのようにするかの指定。
他のデザインツールと同様。

Deformers

変形というような意味。
基本で用意されているシェイプの形や属性変化では表現できない拡張的な変形を可能とする項目。

これだけでもすごい量があるので、別の記事で触れられたらと思っています。

Filters

フィルター。変形とは違う概念でシェイプに変化を与えるもの。ぼかしだったりドロップシャドウなんかはわかりやすい。

これもすごい数。別の記事で触れる予定。

Motion Blur

モーションブラー。動いている被写体を撮影したときのぼやけをつけるかどうか。初期値はNoneで、他にはFullとTransform Only(Fast)という値がある。
コンポジションの設定の方で Motion Blur をONにしないと効かないという解説もあるみたい。

いちいちこの画面を開いてON/OFFしなくても、

このボタンで切り替えられる様子。


塗りに関する設定(Fill)

続いて塗りに関する設定(Fill)を見て行きます。

Fill

チェックボックス形式になっていて、チェックを入れると塗りが有効になる。

Color

塗りの色の指定。RGBAのそれぞれの値や16進数のカラーコードで指定可能。カラーピッカーもあり。

Shaders

Wikipediaによると

頂点色やピクセル色などを次々に変化させるもの

とのこと。
Cavalryのドキュメントでは

シェーダーをシェイプのマテリアル (塗りつぶしやストローク) に追加して、グラデーションやパターンを生成できます。シェーダーはレイヤー化したり、重ねて組み合わせたりして、より複雑な効果を生み出すことができます。

とのこと。

言葉だけでは理解が難しいですが、塗りや線などの色を「上乗せ・外付け」する機能と考えるとそれっぽい気がします。
人間で言うと髪の毛を染めるのではなく、カツラやウィッグをつけるような感じ?

実際に Gradient Shader を指定するとこんな感じになります。

この Shader は複数のシェイプに同時につけることができるので、同じ表現を共通で複数のシェイプに当てたい場合は便利ですね。CSSで言うところのclassのような感じ。

Alpha

透明度ですね。Shader も含めて透明になります。0にすると見えなくなります。


線に関する設定(Stroke)

次は線に関する設定(Stroke)を見て行きます。Fill と似ているかと思いましたが、思ったよりも設定項目が多いです。

Fill と同様にチェックボックス形式になっていて、チェックを入れると線(Stroke)が有効になる。

Color Mode

Single Color(単色)か Gradient(グラデーションカラー)か選べます。選択した方によってほんの少しだけ項目が変わります。

Single Color の場合は Color という項目が出て Fill の場合と同じです。
Shaders も指定できます。

Gradient を使用したい場合はグラデーションを作るための項目が出ます。もちろんここでグラデーションを当ててもいいのですが、Single Color にして Gradient Shader を利用したほうが汎用性は高い気もします。(Shader を作るとレイヤーが増えるのでわかり難くなるという弱点はありますが)

Alpha

透明度。

Width

線の太さ。

Cap Style

解放されている場合の線の端の処理。Flat/Round/Projecting が選べる。

  • Flat ⇒ そのまま。角張る。
  • Round ⇒ 角丸。丸く面取りされる。
  • Projecting ⇒ ???

Join Style

閉じている場合の線と線の結合部の処理。Mitre/Round/Bevel が選べる。

  • Mitre ⇒ マイター。そのまま。角張る。
  • Round ⇒ 角丸。丸く面取りされる。
  • Bevel ⇒ 直角でも丸みでもない角度をつけた斜角。

Mitre Limit

グラフィックデザインやコンピューターグラフィックスでは、「マイターリミット(miter limit)」がベクター形状の角の処理方法を決定する設定として使われます。鋭い角を処理する際に、マイターリミットの値を調整して突き出しを制御します。

試してみたところ、どれくらいの尖り(角度)を許容するかの項目のようでした。

Dash Pattern

Dashはおそらく破線の意味。つまり破線のパターンを指定する項目らしい。
しかしながら幅広とか斜めとかという指定ではなく、何やらここにも謎な設定値が。

これもいずれ別記事で触れようと思う。

Dash Offset

上記の Dash についてのずらしを指定。

Align

線をシェイプの外周の外側(Outer)か内側(Inner)か中央(Center)のどこに表示するかを指定。例えば100px四方の正方形に10pxのStrokeをつけた時に、120px四方になるのがOuter、100px四方のままなのがInner、110pxになるのがCenter。

Trim

いろいろな意味を持つ単語なので正解はわからないけれど、余計な部分を取り除く、トリミングするという意味に近いものと思われる。
このチェックボックスをONにすると後続の Start/End/Travel/Reverse Path/ の指定が有効になる。

Strokeには始点と終点があって Start と End からそれぞれパーセンテージで Trim が可能。Reverse Path にチェックを入れると始点と終点が逆になる。

Travel は動くとか進むという意味で使われているものと推測。始点と終点のそもそもの位置を動かすもの。Start か End の値を少しずらしてから Travel の値を変更すると変化が見えてわかりやすい。

Tapered Width

テーパード。ユニクロなどでテーパードジーンズという商品を目にすることがあると思う。「だんだん細くなる」という意味。

始点の太さと終点の太さを指定可能。あまり綺麗にはならないのと使う意味があまりないけれど逆にすれば「だんだん太く」も可能。

Cap Centres

???
Cap Style を Round にすると指定が可能になる。おそらくは角丸の中心となる点の位置(半径・角度)をずらすことができるっぽいが、変化が見られない。

Double Taper

両端で細く、中央で太くなる形状(錐形)を指定する際に使用するものらしい。

A good default for a double taper is to set the start and end Widths to 0.

と出ているので、Start と End を 0 にしてみたけれどグレーアウトされたまま弄れない。
シェイプを Rectangle ではなく Basic Line という線のものに変えたら指定ができた。

Taper Form

どの地点を中央とするかを選べる。普通は中央(50%)だけれどずらすことが可能。

Middle Length

中央の太くした状態をどれくらい幅まで継続・担保するかを指定。100%に近づけると鉛筆のように先だけ尖って細くなる。


シェイプの形によっては Stroke の指定値が無意味なものや直感で期待した動きと違うものもある様子。

今のところ Tapered 以下はあまり気にしないことにする。

マスクに関する設定(Mask)

次はマスクに関する設定(Mask)を見てみる。

Feather

ぼかしの強度を指定する。たまたま見つけたけれど Stroke の Align が Inner になっているとぼかしが効かない様子。

Clipping Masks

他のシェイプをクリッピングマスクすることが可能。

抜き方は右側の三種のアイコンで選択可能。

Clipping Mode

アンチエイリアスの有無を指定することが可能。

Feather Clipping Masks

クリッピングマスクをした部分もぼかしの指定を反映させるか否かを決める。

Track Mattes

指定したシェイプの輝度やアルファ情報をマットとして利用して素材を切り抜く。後続に Alpha/Alpha Inverted を指定する項目があるので恐らくアルファ情報を利用するものと思う。

Track Matte Mode

Track Matte の Alpha/Alpha Inverted を指定する。Inverted は反転の意味。このあたりは言葉での説明は限界があるので、実際にやってみた方がわかりやすいと思う。


前言通り高度な設定(Advanced)については不明な項目ばかりなのでここでは触れないようにしておこうと思う。

これで Shape の基本設定項目については概ね触れることができたので、次は冒頭で説明した Basic Shape の Primitive Type別の設定項目について触れて行こうと思ったけれど、思いのほか長くなってしまったので記事を分けます。

https://zenn.dev/rumy/articles/065710614a7bea

Discussion