Spine Tutorial

トップに戻る

Spineの使いかた

このページではSpineの基本的な使い方とHaxeFlixelへの組み込み方法を紹介しています。

↑

画面レイアウトの説明

簡単に画面レイアウトを説明します

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」をクリックして「ANIMATION」モードに切り替え、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

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

100.gif
↑

出力をする

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

016.png

Exportダイアログが表示されるので、出力フォルダを指定して「Export」ボタンで出力完了です。

018.png

なお、HaxeFlixelのFlxSpineではAtlasテクスチャは必須なので、「Create atlas」にはチェックを入れるようにします。

↑

HaxeFlixelへの組み込み方法

↑

spinehx のインストール

Spineのデータ解析のために「spinehx」というライブラリをインストールします。

方法はコマンドプロンプトまたはターミナルを起動して、

haxelib install spinehx

というコマンドを入力すればインストールできます。

↑

Project.xmlの編集

Spineを再生するには、拡張機能と spinehx を有効にする必要があります。

  <!--------------------------------LIBRARIES------------------------------------->

  <haxelib name="flixel"/>
  <haxelib name="spinehx" /> <!-- SpineHxを有効にする -->

  <!--In case you want to use the addons package-->
  <haxelib name="flixel-addons" /> <!-- 拡張機能を有効 -->

デモに含まれているSpine坊やを再生するサンプルです。データは"assets"フォルダ直下に配置したとします。

class MenuState extends FlxState {

  private var _spine:FlxSpine;

  override public function create():Void {
    super.create();

    // データ読み込み
    var data = FlxSpine.readSkeletonData("spineboy", "assets");

    // Spineオブジェクト生成
    _spine = new FlxSpine(data, 240, 480);

    // Y軸が逆なので上下反転する
    _spine.flipY = true;

    // 登録
    add(_spine);

    // "walk"アニメをループ再生
    _spine.state.setAnimationByName("walk", true);
  }
↑

2つのアニメを合成したい

アニメを切り替える際に、2つのアニメを合成して違和感なく切り替えるためには以下の記述をします。

  var _spine:FlxSpine;
  // "walk"から"jump"切替時に0.2秒ブレンドする
  _spine.stateData.setMixByName("walk", "jump", 0.2);