読者です 読者をやめる 読者になる 読者になる

kikki's tech note

技術ブログです。UnityやSpine、MS製品など技術色々について解説しています。

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

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

キャラクタの組立

画像の準備

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

画像の配置

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

画像の組合せ

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

ボーンの配置

事前準備

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

基礎ボーンの作成

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

f:id:kikkisnrdec:20150612130546p:plain

枝ボーンの作成

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

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

アニメーションの入力

事前準備

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

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

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

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

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

結果

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

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

総括

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

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

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

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

※無断転載禁止 Copyright (C) 2015 kikkisnrdec All Rights Reserved.