Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity】2Dアニメーションの作り方 Animation,Animator Controller,Sprite Editorでスライス

【更新】Unity 2021.1.0f1 Personal(2021年4月)
Unity5.1.1p1 Personal(2015年6月)

 

今回は2Dアニメーションの設定について解説していきます!

本記事はパラパラ漫画のようなコマ送りのアニメーションを取り扱います。
Unity2018よりスタートした、ボーンを使った新しい2Dアニメーションについてはこちらのシリーズをご参照下さい。

hiyotama.hatenablog.com

Spriteの設定

まずはSprite(画像)の設定をしていきます。

2Dアニメーションに使われる画像はだいたい下のように複数の絵が1枚のSpriteにまとめられています。

f:id:hiyotama:20210406220904p:plain

64px * 64pxのイラスト4つが入ったSprite

 

Projectビューへインポートします。

 

f:id:hiyotama:20210406221140p:plain
Projectビューへインポート

 

続いてインポートしたSpriteのInspectorビューを見ていきます。
TextureTypeSprite(2D and UI)Sprite ModeMultiplePixel Per Unit64に設定します。またFilter ModePointにして下さい。

Texture Type:Sprite(2D and UI)は2Dゲームのキャラクターなどに使うSpriteや、UIを扱うuGUIのImageオブジェクト等で使える画像タイプです。 

Pixel Per Unitは何ピクセルを1Unit(Unity世界での長さの単位)に対応させるかを設定しています。ここでは1Unitを64ピクセルとしました。

Sprite Mode:Multipleは1枚のSpriteを複数枚に切り離して使う設定です。

Filter Mode:PointはSpriteのドットを綺麗に表示するための設定で、よりぼかして表示するBilinearやTrilinearでも特に問題はありません。

 

f:id:hiyotama:20210406222249p:plain

 

Sprite EditorでSpriteをスライスする

続いてSpriteのInspectorに表示されているSprite Editorボタンを押しSprite Editorを表示します。

f:id:hiyotama:20210406222456p:plain

Sprite Editorボタンの場所

 

左上のSliceボタンをクリックするとTypeという項目があり、Automatic, Grid By Cell Size, Grid By Cell Count, Isometric Gridから選択できます。

今回の画像は64px * 64pxで分割しているので、スライスのサイズを指定するGrid By Cell Sizeを選択します。

Pixel SizeにX:64, Y:64と入力しSliceボタンをクリックするとスライスが実行されます。

f:id:hiyotama:20210406223545p:plain

Grid By Cell Sizeを選択

 

f:id:hiyotama:20210406223818p:plain

Pixel SizeをX:64, Y:64にしてSliceボタンをクリック 

 

スライスが終了した右上のApplyボタン を押し、Sprite Editorを閉じます。

 

f:id:hiyotama:20210406224348p:plain

Applyする

 

Unityエディターへ戻りSpriteを確認すると下の階層にスライスされたSpriteが格納されています。

 

f:id:hiyotama:20210406224508p:plain

スライスされました

 

Spriteアニメーション作成

それではSpriteを使ったアニメーションの設定をしていきます。
まずは基本的なSpriteアニメーションからです。
Projectビューのスライスされたhiyoko_0とhiyoko_1を同時に選択し、Hierarchyビューへドラッグ&ドロップして下さい。

 

f:id:hiyotama:20210406225526p:plain
ドラッグ&ドロップ

 

するとCreate New Animationというウインドウが開きます。
名前部分に「New Animation」と書かれているので「Fly」という名前に変更し保存します。

HierarchyにSprite1枚目の名前のオブジェクトが生成されGameビューにひよこが出現します。

 

f:id:hiyotama:20210406230008p:plain
ゲーム画面にひよこが出現

 

またProjectビューにFlyという名前のAnimation Clipとhiyoko_0という名前のAnimator Controllerが作成されています。

 

f:id:hiyotama:20210406230327p:plain


AnimatorControllerやClipごとにフォルダを作成したり名前を設定すると管理しやすくなります。

 

f:id:hiyotama:20210406230710p:plain

フォルダや名前を整理

 

次にHierarchyに作成されたアニメーションするオブジェクトを見ていきます。

オブジェクトのInspectorビューを見てみるとAnimatorコンポーネントがあります。

 

f:id:hiyotama:20210406231002p:plain

AnimatorControllerが設定されたAnimatorコンポーネント

 

Controllerには自動生成されたAnimatorControllerが指定されています。

 

アニメーションは既に動く状態ですのでGameを実行してみましょう。

 

f:id:hiyotama:20210406231619g:plain

高速ではばたくひよこ

 

今回は以上となります。
こちら続きの記事となりますのでぜひご覧下さい。