Spineでのアニメーションの作り方

本章では、Spineでアニメーションを作る方法について共有します。

キャラクタの組立

画像の準備

SAIやClipStudio、Photoshopなどで、一度キャラクタの完成形を作成します。
次にキャラクタをパーツ単位に分割します。
そしてパーツ単位で画像をファイルに出力します。

画像の配置

Spineでの作業に移ります。
「Hierarchy」の「Images」フォルダにある画像すべて(①)を一度、「Editor」(②)上に配置します。
画像をEditor上に配置すると、HierarchyにSlotで構成された画像が自動で配置されます。

画像の組合せ

キャラクタの完成形の絵を元に、画像を配置(①)していきます。
配置の中で画像の前後関係が調整する必要があるので、「DrawOrder」(②)で並び順を変更します。
このとき、上が手前・下が奥の関係になります。

ボーンの配置

事前準備

Editor内の「Tools」の「Create」を選択します。

基礎ボーンの作成

1. 「root」(①)を選択
2. Control押しながら、キャラクタの最も基礎となる部位(※背骨など)の画像を選択(②)
3. 基礎部位の始点を左クリック
4. 左クリックしながら終点をクリック
5. 1本目のボーンが完成

枝ボーンの作成

1. 親となるボーンを選択
2. Controlを押して、次の画像を選択
3. 基礎部位の始点を左クリック
4. 左クリックしながら終点をクリック
5. 2本目以降のボーンが完成

以降、同じ手順ですべての画像に対して、ボーンを作成します。
すべての画像にボーンが入ると、上記図③のようにHierarchyのSlotすべてにBoneが自動で命名され、配置されます。

アニメーションの入力

事前準備

事前準備として、以下の作業を行います。

• Editor上の[Options]の「Images」の「矢印」の選択を外す
• 画像をマウスの矩形選択ですべて選択→Control+Lでキーを配置
• 「Auto Key」を選択

フレーム単位で動きを作成

1. 加工したいフレームを選択(②)する
2. Editorで対象のボーンを選択(①)し、移動や回転等の加工を施す

15の倍数のフレーム単位でアニメーションを作ると、滑らかにアニメーションを作成できます。
※目パチは、画像の差し替えで表現できます。

結果

以下映像のように、アニメーションが作成できました。youtu.be
※Spineを体験版で作成しているため、ソフトウェアでの操作をキャプチャした映像となっています。

ここまで初めてSpineに触れて制作しましたが、およそ2時間位で作成できました。

総括

Spineを作る上で重要なこととして、以下のことがあります。

• 完成形を作りきること
• Spineで使うことを考え、パーツ単位での絵の作成を意識すること
• 体の作りを意識し、骨入れを行うこと
• 体の動きに無理がない動きを設計すること

皆さんも是非お試し下さい!

以上、Spineでのアニメーションの作成方法でした。