Spineではじめる、動くイラスト制作:第1回：Spineを使うと、何ができるのか？ | 連載

Spineでも、オーソドックスなボーンアニメーションを使用

Spine（背骨）の名が表す通り、Spineでは基本的にオーソドックスなボーンアニメーションを用います。3DCGのボーンアニメーションに触れたことがある方は、すぐに馴染めると思います。逆にボーンの階層構造に馴染みのない方は、最初は少し混乱するかもしれません。けれど一度しくみを理解すれば、とてもスピーディにアニメーションを制作できます。

以降では、Photoshopで制作したキャラクターデータをSpineへエクスポートして、セットアップをし、走りのループアニメーションを制作するまでのながれを解説します｡本記事で使用したPhotoshopのキャラクターデータはこちらからダウンロードできますので、ぜひSpine習得にご活用ください。

Photoshopでのキャラクターデータ制作と、Spineへのエクスポート

上は、Photoshopで制作したキャラクターデータです。レイヤーはいくつかのグループに分かれており、［character］グループ内には、キャラクターを構成する34のパーツレイヤーを格納しています。レイヤー名は、そのままSpine上でのパーツ名になります。［circle］グループ内には、赤色の円で全身の関節を示した12のレイヤーを格納しています。［point］グループ内には、赤色の点で各関節が回転する際の中心点を示した12のレイヤーを格納しています。

Spineでボーンアニメーションを適用するキャラクターの関節部分は、円を基準に構成しておきます。中心点を基点に各関節を回転させたとき、各パーツのシルエットが飛び出さないように調整しておくと、データの汎用性が高くなります。

PhotoshopからSpineへデータをエクスポートするためのスクリプト［PhotoshopToSpine.jsx］は、Spineのスクリプトフォルダ［C:¥Program Files (x86)¥Spine¥scripts¥photoshop］に格納されています。これをPhotoshopのスクリプトフォルダ［C:¥Program Files¥Adobe¥（使用するPhotoshopのバージョン名）¥Presets¥Scripts］に複製した後、Photoshopを起動し直します。

前述のキャラクターデータを開き、メニューバーの［ファイル］→［スクリプト］から新たに登録された［PhotoshopToSpine］を実行すると、上のダイアログが表示されます。基本的には初期設定のまま使用するので問題ありませんが、必要に応じて設定を変更できます。

例えば、非表示レイヤーを除外したいときには［Ignore hidden layers］のチェックボックスを選択します。全レイヤーの結合画像を追加で書き出したいときには［Write template image］のチェックボックスを選択します。書き出された結合画像は、Spine上でキャラクターデータの位置合わせをする際などに使用できます。最後に［OK］ボタンを押すと、指定した出力場所に［Images］フォルダと［JSON］ファイルが生成されます。

Spineを起動後、メニューから［データのインポート］を選択すると、上のダイアログが表示されるので、前述の［JSON］ファイルを選択し、キャラクターデータを読み込みます。

Spineでのキャラクターのセットアップ

セットアップは、［SETUPモード］で行います。まずはVキーを押し、［トランスレート］ツールに切り替えます。作業領域の何もない部分をクリック＆ドラッグして選択ボックスを表示し、キャラクター全体を囲むように全パーツを選択します。その状態でドラッグし、［root］の位置を地面の高さに移動させます。今回は原点（0,0）に移動させました。なお、［root］はデータをインポートした時点で自動的に設定されます。

続いて、Nキーを押して［作成］ツールに切り替え、［root］の下位にキャラクターの全身ボーンの階層構造を構築します。［root］を選択した状態で、Ctrlキーを押しながらボーンの階層の最上位パーツを選択します（今回は人型のキャラクターなので、腰にあたる［bodyHip］パーツを選択します）。その状態で下位パーツの中心点（［body］パーツ上の赤色の点）までドラッグ＆ドロップをして、［bodyHip］ボーンを設定します。

このように、【1】上位のボーンを選択、【2】Ctrlキーを押しながらパーツを選択、【3】ドラッグ＆ドロップをしてボーンを設定、という手順を経ることで、自動的にパーツと同名の新規ボーンが生成されます。なお、新規ボーンを設定した直後は、そのボーンが選択状態なので、手順【1】を省くことができます。［bodyHip］ボーンの設定後は、Ctrlキーを押しながら［body］パーツを選択し、［head］パーツ上の赤色の点までドラッグ＆ドロップをして、［body］ボーンを設定します。さらに同様の手順をくり返し、［head］ボーンを設定します。右上腕にあたる［armInner_upper］ボーンの場合は［body］ボーンが上位になるため、手順【1】を経る必要があります。これらの手順を経て、全身のボーンを構築していきます。