日々是好日~every day is a good day~

日常の中の非日常の備忘録

【Unity】2D画像にアニメーションをつける

前回アップした『代数ダンス』

このアニメーションを作るのにUnityを使ったのですが 2Dの画像にアニメーションをつけたのは初めてだったので その工程の覚え書きです

1.画像をUnity内にドラッグ&ドロップしてスプライトエディターを開く

2.Skinning Editorを選択

3.Create Vertexで頂点を編集(移動したり増やしたり減らしたり)して画像を形どる

4.Create Boneでボーンを作成

5.Edit Boneでボーンの位置や角度を調整 ボーンの名前もここで変更

可視性をクリックするとボーンの情報が表示される

6.Weight Sliderでボーンのウェイトを設定(ボーンを選択して量をスライドさせる)

設定すると動く部分がボーンと同じ色で表示される

7.スプライトエディターを閉じて ヒエラルキーにドラッグ&ドロップ

8.インスペクターのコンポーネントを追加をクリックしてSprite Skinを追加

9.Sprite SkinのCreate Bonesをクリック

10.ウィンドウ/アニメーション/アニメーションを選択

11.作成をクリックしてファイル名・保存場所を入力して保存

12.アニメーションを作成

13.画像オブジェクト(Stickman_0)にAnimatorとAudio Sourceがあることを確認

なければコンポーネントを追加から追加する

14.プロジェクトウィンドウ内を右クリックして 作成/タイムライン/タイムラインを選択

15.ヒエラルキーに空オブジェクトTimelineを作成して タイムラインウィンドウの作成をクリック

16.Timelineオブジェクトに14で作成したタイムライン(StickmanTimeline)をアタッチ

タイムラインウィンドウのアニメーションとオーディオにStickman_0をアタッチ

TimelineのインスペクターにPlayable Directorが追加されてプレイアブル バインディングが設定されていればOK

タイムライン上にアニメーションクリップをドラッグ&ドロップすれば出来上がり

 

この後 タイムラインを再生した時と実行ボタンを押した時でアニメーションが違う問題が発生

原因はStickman_0にアタッチしているAnimatorとタイムラインが競合していたためでした

なのでAnimatorのコントローラーをなしに設定(Animatorを削除してはダメ!)

これで同じアニメーションになりました

タイムラインを使わずにアニメーターをスクリプトで操作してもできると思いますが 今回は音楽に合わせてアニメーションしたかったので このやり方でやってみました

無料ソフトで『代数ダンス』

前回の幾何学アートについて調べているとき 検索に『代数ダンス』なるものが引っかかって…

気になって見てみると 棒人間が関数グラフを表現している いわゆる『おもしろTシャツ』でした

しかしこれを見た瞬間 脳内に動画が再生されたんですよね(笑)

その脳内再生動画を 無料ソフトをいろいろ使って見える化してみました

まずキャラクターは『FireAlpaca64』を使って作成

次にアニメーションを『Unity』で

音楽は無料で使用できるものに 思っているものを見つけられなかったので『MuseScore Studio 4』で打ち込み

最後に『Microsoft Clipchamp』で編集 効果音は無料の『効果音ラボ』さんからお借りしました

無料のソフトが優秀すぎます