今回はUnityの2Dゲームで1枚の画像を使いアニメーションで動かしてみます。
はじめに
Unityのバージョンは2021.3.14f1です。
下記にて、複数枚の画像を使用してパラパラ漫画のように動かしています。今回は1枚の画像だけを使い、アニメーションで動かしてみます。
実装開始
利用するのは画像1枚だけなので、どんな画像でも大丈夫です。
画像の取り込み
今回も画像は「ぴぽや倉庫さん」から。エネミーイラストから1枚だけ画像をドラッグアンドドロップ。名前はkumaに変更しています。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508001.png)
画像を選択し、「SpriteEditor」を選択。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508002.png)
左上から「SkinningEditor」を選択します。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508003.png)
Boneの設定
Boneを設定していきます。Boneは直訳すると骨ですね、関節の可動場所みたいな感じです。「CreateBone」を選択して画像をダブルクリックして下記のような感じにBoneを設定していきます。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508004.png)
Boneをセットしたら「AutoGeometry」を選択して「Generate For Selected」を押します。これで下準備が完了です。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508005-1024x679.png)
シーンに画像をドラッグアンドドロップします。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508006.png)
「AddComponent」から「SpriteSkin」をアタッチして「CreateBones」を押します。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508007.png)
下記のように配下にboneのオブジェクトが生成されます。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508008.png)
アニメーション
kumaオブジェクトを選択した状態で、Animationから「Create」を選択します。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508009.png)
赤丸を押して録画状態にします。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508010.png)
腕に設定したBoneをz方向に動かすと腕が回転します。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508011.png)
座標をずらしてアニメーションをセットします。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508012.png)
実行すると下記のように手を振っているようなアニメーションが簡単にできます。
![](https://nosystemnolife.com/wp-content/uploads/2023/05/20230508013.gif)