【GodotEngine】Line2Dを使ったストレッチアニメーション
こちらで紹介されていたLine2Dを使ったアニメーション
簡単なのにかわいい！ので、使い方をまとめました
Line2D
2DゲームやUIで「線」や「軌跡」を描画するためのノード。
これまでペンのように使ったり、ライントレース用の線を引いたりするのに使っていましたが、Line2Dは線をテクスチャで表現できるため、線を曲げることでテクスチャをうにょうにょと動かすことが可能です。
Line2Dにテクスチャをセット
新規シーンを作成し、Node2Dをルートノードにします。
+ボタンから、Line2Dを検索して追加します。
Line2DのインスペクターからFillを開いて
TextureModeをStretchにします
Texture<空>となっている部分に、アニメーションさせたい画像をドラッグします。
線をひくと指定の画像がつかわれるようになった
線の太さを決める
次に線の太さを決めましょう。
線の太さは、画像に合わせるため、Textureの画像をクリックして詳細を確認します。
今回使う画像の高さは105でした。これをWidthに入力します。
ポイントを追加して線を引く
Line2Dを選択すると、2Dビューにラインを編集するアイコンが表示されます。
「点の追加・移動・削除」のボタンです。
緑色の追加ボタンをクリックして
原点と、もうひとつどこかに点を置きましょう。
すると、点と点の間にラインが引かれ、画像が現れました。
点をドラッグすると、好きな位置に配置することができます。
画像と同じ比率にしたいときは
PointsのPackedVector2Arrayと書かれたところをクリックすると
ポイントを細かく編集できるようになります。
ポイント０が線の始点
ポイント１が終点になるので、終点の長さを、画像の長さと合わせましょう。
Textureから画像の長さを確認し、１のｙ座標に入力する
コントロールポイントの追加
Line2Dを選択している状態で、ラインにカーソルを合わせ
好きなところをクリックして点をふやすことができます。
Lineをアニメーションさせる
Line2Dで作成したポイントは、スクリプトやアニメーションプレイヤーで動かすことができます。
今回はAnimationPlayerを使ってみましょう
Line2Dを選択した状態で、+ボタンをクリックしAnimationPlayerを追加しましょう。
アニメーションの作成
新しいアニメーションをつくりましょう。
アニメーション → 新規 を選択し、アニメーション名を入力します。
アニメーションの長さ
AnimationPlayerを追加すると、下にアニメーション編集画面があらわれます。
アニメーション編集画面の右側にある時計マークがアニメーションの時間です。
ここでは２秒にしました
🔄ループマークをクリックすると、アニメーションがループするようになります。
アニメーションさせるものをえらぶ
つぎにアニメーションさせたいものをえらびます。
アニメーション画面の左上にある＋ボタンをクリックします。
ここではLine2DのPointをえらびましょう。
キーの挿入
タイムライン上で右クリックすると、キーが挿入できます。
0秒・1秒・2秒のところに、うごきのない状態のキーを挿入しましょう。
つぎに、タイムラインの0.5秒のところにインジケーター（タイムライン上の縦線）をあわせましょう。
Line2Dで点を移動させて、0.5秒のときにどんな動きになってほしいかを決めます。
点の位置が決まったら、タイムラインを右クリックし、キーを挿入しましょう。
1.5秒のところでも同じように操作してキーを挿入しましょう。
自動再生
アニメーション画面の上中央にあるA+のアイコンをクリックすると
読み込まれた時に自動的にアニメーションが再生されるようになります。
▶ボタンをクリックすると、アニメーションを確認することができます。
Line2Dの点を増やしたり、アニメーションの動かし方をアレンジしたりして
いろんな動きをさせることができるのでためしてみてください
Discussion