Spineでのアニメーションの作り方
本章では、Spineでアニメーションを作る方法について共有します。
キャラクタの組立
画像の準備
SAIやClipStudio、Photoshopなどで、一度キャラクタの完成形を作成します。
次にキャラクタをパーツ単位に分割します。
そしてパーツ単位で画像をファイルに出力します。
画像の配置
Spineでの作業に移ります。
「Hierarchy」の「Images」フォルダにある画像すべて(①)を一度、「Editor」(②)上に配置します。
画像をEditor上に配置すると、HierarchyにSlotで構成された画像が自動で配置されます。
画像の組合せ
キャラクタの完成形の絵を元に、画像を配置(①)していきます。
配置の中で画像の前後関係が調整する必要があるので、「DrawOrder」(②)で並び順を変更します。
このとき、上が手前・下が奥の関係になります。
ボーンの配置
事前準備
Editor内の「Tools」の「Create」を選択します。
基礎ボーンの作成
- 「root」(①)を選択
- Control押しながら、キャラクタの最も基礎となる部位(※背骨など)の画像を選択(②)
- 基礎部位の始点を左クリック
- 左クリックしながら終点をクリック
- 1本目のボーンが完成
枝ボーンの作成
- 親となるボーンを選択
- Controlを押して、次の画像を選択
- 基礎部位の始点を左クリック
- 左クリックしながら終点をクリック
- 2本目以降のボーンが完成
以降、同じ手順ですべての画像に対して、ボーンを作成します。
すべての画像にボーンが入ると、上記図③のようにHierarchyのSlotすべてにBoneが自動で命名され、配置されます。
アニメーションの入力
事前準備
事前準備として、以下の作業を行います。
- Editor上の[Options]の「Images」の「矢印」の選択を外す
- 画像をマウスの矩形選択ですべて選択→Control+Lでキーを配置
- 「Auto Key」を選択
フレーム単位で動きを作成
- 加工したいフレームを選択(②)する
- Editorで対象のボーンを選択(①)し、移動や回転等の加工を施す
15の倍数のフレーム単位でアニメーションを作ると、滑らかにアニメーションを作成できます。
※目パチは、画像の差し替えで表現できます。
結果
以下映像のように、アニメーションが作成できました。youtu.be
※Spineを体験版で作成しているため、ソフトウェアでの操作をキャプチャした映像となっています。
ここまで初めてSpineに触れて制作しましたが、およそ2時間位で作成できました。
総括
Spineを作る上で重要なこととして、以下のことがあります。
- 完成形を作りきること
- Spineで使うことを考え、パーツ単位での絵の作成を意識すること
- 体の作りを意識し、骨入れを行うこと
- 体の動きに無理がない動きを設計すること
皆さんも是非お試し下さい!
以上、Spineでのアニメーションの作成方法でした。