73
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

【Spine】2Dアニメーションツール Spine の使い方

Spineとは

Spineとは2Dアニメーションを作成するためのツールです。ボーンを入れることで人体のような複雑な動きをさせることも可能で、アクションゲーム向きな印象です。

対応するゲームエンジンの多さが圧巻で、Cocos2D / Unityはもちろんのことマイナーな環境でも動作するのが魅力ではないかと思います。

ただ日本語の情報が少なく、導入の時点でつまづく人も多いような気がしました。
ということで、今回は基本操作を理解するために、簡単な拡大アニメの作り方を紹介したいと思います。(ボーンの使い方は説明しません)

画面レイアウトの説明

重要な機能に絞って、簡単に画面レイアウトを説明します

001.png

  1. メニュー : ここをクリックするとプロジェクトの保存やエクスポートができます
  2. モード切り替え : 「SETUP」と「ANIMATION」の2つのモードを切り替えます
  3. Treeビュー : 配置する画像データやボーン構造の管理をします

使用する画像データ

今回は以下の画像を使います。

spine.png

右クリックで保存して、画像はデスクトップの "project" フォルダに保存するとします。

作業フォルダの登録

Spineを起動したら、何はともあれプロジェクトの保存をします。左上のSpineのロゴをクリックするとメニューが表示されるので「Save Project As ...」を選択します。

007.png

プロジェクトファイルは、デスクトップにある"project"フォルダに保存します。これにより、基準ディレクトリが"project"フォルダになります。

画像フォルダの確認

TreeビューのImageフォルダを展開して spine画像 があることを確認します。
なお、素材フォルダをプロジェクトと別にしたい場合には、下にあるBrowseボタンをクリックして変更します。

008.png

画像をRootノードに登録する

spine画像を画面中心にドラッグ&ドロップしてRootノードに登録します。

006.png

もし配置位置がズレてしまったら下にある「Transform > Translate」を選択して移動を有効にして調整します。

009.png

アニメーションの作成

素材の配置が完了したので、アニメーションを作成します。
「SETUP」をクリックして「ANIMATE」モードに切り替え、Dopesheetをクリックすると、アニメーションのシートが表示されるようになります

002.png

キーを作成する

今回は拡大するシンプルな拡大アニメを作ります。
まずはDopesheetを0フレーム目に合わせて、画像を選択し、Scaleを選択、カギアイコンをクリックするとキーが打たれます。

010.png

このカギアイコンですが、

  • 緑色 : キーがない
  • 黄色 : キーの値が変更された
  • 赤色 : キーの値が反映された

となります。よくある失敗が 値を変更したものの(黄色のままにして)、別のフレームを選んだり別のノードを選択してしまい、値が反映されない というケースです。その場合、変更した値は元に戻り、やり直さなければなりません。なので値を変更したら、カギアイコンをクリックして反映させるのを忘れないようにします。

拡大アニメのキーを打つ

続けて30フレーム目を選択し、Scale値をX軸Y軸ともに「2.0」を指定し、カギアイコンをクリックします。

011.png

横向きの三角ボタンを押すと拡大アニメの確認ができます。また回転矢印をクリックするとループ再生となります。

012.png

補完の仕組み

作成したキーは2つだけですが、滑らかに拡大してくれました。この仕組みは「補完」が有効になっているためです。補完を有効にするためには

  • 2つのキーが存在する
  • そのキーの間の補完設定が有効になっている

という2つの条件が必要となります。試しに最初のキーをDeleteキーで削除すると補完されなくなっているはずです。また補完の設定は「Playback」ボタンから確認できます。ここの「Interpolated」が有効になっていると補完されるようになります。

013.png

補完の方法を変更する

デフォルトだと直線の補完なので、これを曲線にしてみます。
補完の開始フレーム(0フレーム目)を選択し、「Graph」ボタンをクリックすると、グラフが表示されます。

014.png

このGraphの右上にあるアイコンから「Bezier Curve」を選択し、表示された制御点(白丸)左右に伸ばしていきます。

015.png

すると、緩急のついた拡大アニメとなります。

:Users:syun:Desktop:Project:spine;project.spine.gif

出力をする

最後に出力方法です。
メニューから「Export」を選びます。

016.png

Exportダイアログが表示されるので、実行環境にあったフォーマットを選び、出力フォルダを指定して「Export」ボタンで出力完了です。

018.png

たいていの環境ではAtlasテクスチャが必須のようなので、「Create atlas」にはチェックを入れるようにします。

おまけ

各エディションの違い

エディション 値段 説明
体験版 無料 プロジェクトの保存やエクスポートができません
Essential $60 基本機能のみ。凝ったアニメーションをしないならこれで充分
Professional $249 すべての機能が入ったもの
Enterprise $2200 年間の売上が$50万を超える場合には、このエディションの購入が必要

※EssentialからProfessionalへのアップグレードは$189で可能なので、Essential買った後でアップグレードしても損しないです

Essentialと Professionalの違い (Professionalで有効な機能)

  • Auto Key : スケルトンポーズのキーを自動でつけてくれる
  • Dopesheet Keyの入力補助 : アニメーションタイムラインであるDopesheetの入力補助
  • Ghostの表示 : アニメを確認するためのゴーストの表示ができる
  • メッシュ機能 : 矩形をポリゴンへコンバートできる
  • 画像の自由な変形 : 画像を柔軟に変形できる
  • スキニング : メッシュに複数のボーンを持たせて変形できる
  • IK : インバースキネマティクスのサポート

チートシート(よく使うショートカットキー)

完全な情報はこちらにありますが、よく使うものを抜粋しました

分類 アクション キー
メニュー エクスポート Cmd+E
一般 名前の変更 F2
~ 表示・非表示の切り替え H
~ 非選択状態にする Space / ESC
ビュー カメラの移動 マウス右ドラッグ
~ カメラのズーム マウスホイール
~ 複数の項目を選択 Cmd+左クリック
~ 矩形で複数の項目を選択 Spaceで非選択状態にして、何もない場所から左ドラッグ
Transform Scaleを選択 X
~ Rotateを選択 C
~ Translateを選択 V
~ 選択しているTransformのX軸の値を増減 左右キー
~ 選択しているTransformのY軸の値を増減 上下キー
~ 15度ずつ回転する Shiftを押しながらマウス左ドラッグ
Tools Pose(ボーンの制御モード)を選択 B
~ Create(ボーンの追加モード)を選択 N
Setup 親の設定 P
Animation 再生と一時停止 D
~ 逆再生 A
~ 0フレーム目に戻す Q
~ 最終フレームに移動 E
~ 次のキーに移動 W
~ 1つ前のキーに移動 S
~ 1フレーム進める R
~ 1フレーム戻す F
~ 10フレーム進める Shift+R
~ 10フレーム戻す Shift+F
~ ループ再生のON/OFF Cmd+R
Tree 名前の変更 ダブル左クリック
Dopesheet スクロール マウス右ドラッグ
~ キーの削除 キーをダブル左クリック
~ キーの切り取り Cmd+X
~ キーのコピー Cmd+C
~ キーの貼りつけ Cmd+V
Timeline スクロール マウス右ドラッグ

SETUPモード

001.png

ANIMATEモード

002.png

参考リンク

  • Spineを使ってみた Part1
    • ボーンのつけ方を紹介しています。ボーンアニメの作り方の説明がないですが、頑張れば何とかなります
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
73
Help us understand the problem. What are the problem?