[Unity]Unity4.3の2Dツールを使ってみる -コマアニメ編-

たのしいコマアニメ

こんにちは!布浦です。

Unityの2D機能をつかってキャラクターを動かそう!企画、2回目です。
全5回の予定です。

  1. 画像をSpriteとして画面に配置する
  2. Spriteにコマアニメを設定する(Animation View の使い方)
  3. 複数のアニメを切り替える仕組みをつくる(Mecanim)
  4. 2D物理エンジンでキャラクターを動かす(Physics2D)
  5. キー操作によるキャラクターの移動を実装する(Physics2Dつづき)

今日は、
「2. Spriteにコマアニメを設定する(Animation View の使い方)」
をやってみたいと思います!

学習用ことり画像素材はこちら

Spriteにアニメ機能を追加する

前回、Spriteを画面に配置するまでを行いました。
このSpriteに、アニメーションを再生する機能を持つ「Animator」コンポーネントを追加して、
アニメーションできるようにします。

Sprite のInspector 上で、「Add Component」というボタンを押して、
「Miscellaneous -> Animator」と選択します。

Miscellaneous - Animator

Animator

「SpriteRenderer」と「Animator」があればOK

アニメーションデータをつくる

アニメーションのデータを、Unityでは「Animation Clip」といいます。
例えば今回のサンプルでは、「歩く」と「飛ぶ」2つの「Animation Clip」をつくります。

また、この「Animation Clip」を、タイムラインを使って編集できるViewが、Unityには備わっています。
まずは、そのViewを表示してみます。

Unityのメニューで 「Window -> Animation」を選択して、Animation View を開いてましょう。

Animation View ことタイムライン

ウインドウの下の方にくっつけておくと便利

タイムラインのようなウインドウが、Animation Viewです。
これをつかって、アニメーションを編集します。
編集する前に、まずは空のデータをつくる必要があります。

Animation View のタブ付近に、文字の無いボタンがあります。
クリックすると、「Create New Clip」という項目だけ表示されるので、クリックしましょう。

Create New Clip

再生ボタンの下の部分が実はボタン

Create New Animation

ファイル名を入れて、「Save」

「Kotori@Fly.anim」という名前で、「飛ぶ」動作のアニメデータをつくってみたいと思います。
「Animation Clip」のファイル名は、「誰が@何をする」のような感じでつけておくと、後々わかりやすいと思います。

「Save」すると、プロジェクトにデータが追加されると思います。

Animation Clip

再生マークのようなアイコンの「Kotori@Fly」が、今作成したアニメーションデータです。
もうひとつ、生成された「Kotori」というデータについては、また次回、Mecanimの回で説明します。

アニメーションデータを編集する

さきほどつくったデータは、まだ中身がない空っぽの状態なので、編集していきたいと思います。

アニメーションをつけよう

①Hierarchyで、配置したSpriteをクリックして、フォーカスが当たった状態にします。
②Animation Viewで、さきほど「Create New Clip」をした場所に、作成したAnimation Clipの名前が表示されているのを確認します。
③「Add Curve」をクリックします。
④出てきたメニューの Sprite Renderer -> Sprite の横の「+」ボタンをクリックします。

Spriteにキーが打たれた状態

タイムラインが画像のようになります。
ここに、キーフレームを打って、コマアニメをつくることができます。

方法は色々とあるのですが、Project View から、Animation View へ、
Spriteを直接ドラッグすることができたので、この方法でやってみます。

コマアニメのつくりかた

コマを変えたい部分へ画像をドラッグすると、キーが打たれる

コマアニメ!

キーの間隔をいいかんじに調整する

すでにあるキーフレームを編集する

ちなみに、すでにキーフレームが打たれている部分の絵を変えたい場合は、
タイムライン上の赤いバーを変更したいキーフレームに合わせて、
Inspectorで別のSpriteを割り当てなおせば、変更できます。

タイムラインの操作

タイムラインの目盛り部分をドラッグすると、バーを動かせる

Animation編集時のInspector

キーが設定されているプロパティが赤色になる

割り当てる方法は、最初にSpriteを生成したときと同じで、
Project Viewから画像をドラッグしてくるだけです。

Animation View は、コマアニメ以外にも、色々なアニメーションをつくることができます。
今回はコマアニメの方法のみの紹介になってしまいますが、
詳しく知りたいという方は、公式のマニュアルを参考にしてみてください。
(今のところ、日本語の方のマニュアルが更新されてないので、英語です)

アニメーションをプレビューする

赤い再生ボタン

タイムラインを編集している間は、Unityの再生ボタンが赤色になります。
このときに再生を押すと、アニメのプレビュー(動作確認)ができます。

ことり、ぱたぱた

動きましたか?

この要領でもうひとつ、「歩く」アニメ(Kotori@Walk)も、つくってみてください。

Kotori@Walk

ことり、とことこ

今回は、ここまで!
つぎは、2つのアニメを切り替える仕組みをつくります。

Unity講座バナー
Unity講座第5期、受講生募集中です。