Home / Uncategorized / Spineを使ってみる

Spineを使ってみる

Spine はボーンやメッシュを使った2次元アニメーションを作成するツールです。
http://esotericsoftware.com/spine-quickstart

フォトショップのスクリプト Photoshop-LayersToPNG.jsx を使って、レイヤーグループの画像を出力し、Spineにインポート可能です。
https://gist.github.com/NathanSweet/c8e2f6e1d79dedd56e8c

ロケット(rocket)のアニメーションをSpineで作成して、Kwik/Coronaで使ったみたいと思います。
サンプルプロジェクトはこちらです。 http://kwiksher.com/daily/spine0124/Spine.zip

Steps

  1. 最初にKwik のプロジェクトを新規作成します。
  2. レイヤーグループで body, wingR, wingL とtaleの画像を作成して、レイヤーグループの名前をrocketとします。
  3. ‘rocket’ レイヤーグループをLayersToPNG.jsxのスクリプトでエクスポートします。
  4. Spineを開き、新規プロジェクトを作成します。ロケット(rocket)の画像をインポートします。
  5. Spineでアニメーションを作成します。
  6. Spineで完成したアニメーションをエクスポートします。json, atlas と pngのファイルを出力します。
  7. Kwikに戻り、まずパブリッシュを行います。まだ動かないロケットが Corona simulatorに表示されます。
  8. カスタム(custom)ファイルを作成します。rocket_image.luaをカスタム化して、Spineの json, atlas, pngを読み込み、表示させます。
  9. カスタムファイルを有効にするために、もう一度 Publishします。

Kwikのプロジェクトを作成して、rocket の部品を LayersToPNG.jsのスクリプトで出力します。

PNGファイルと page1.json が出力されます。

Spineを開き、データをインポートします。 page1.json ファイルを選択してください。
Skeleton 名は、 ” rocket” として OKをクリックします。

Missingとなった場合は、images フォルダの場所をパネルから指定する必要があります。

images を選択して、Pathに先ほど出力されたimages フォルダをBrowseボタンから指定してください。

images フォルダを選ぶ.

Spineで画像が表示されます。

背景は使用しませんので  background の設定で  “Export” のチェックを外します。(見やすいように、透過度を変えてあります)

ロケットの中央をSpineの原点に合わします。Kwik/Coronaに取り込む場合に、原点が合っていないと位置がずれてしまいます。

ボーンなどの設定。

アニメーションの作成。ここでは  “animation” というアニメーション名にしました。

Exportします。

JSON と Create atlas にチェックを入れます。. 出力先は、 “build4/assets/sprites”にしてください

サンプルプロジェクトのspineフォルダにプレビュー用のmain.luaが用意してあります。spine/main.lua を Corona simulatorで開いてください。

kwikに戻ります。 Publish して lua ファイルを出力します。

rocket_image_.lua が components/page01 フォルダにあります。

rocket_image_.lua を custom/components/page01 フォルダにコピーして配置してください。 ( ‘page01’ フォルダの作成を忘れないでください。 )

rocket_image_.luaを以下のように カスタマイズします。

  • 行22    local spine = require(“extlib.spine”).new(“rocket”)
  • 行 28   layer.rocket = spine:newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight)

spineフォルダにある spine-corona, spine-lua フォルダとspine.lua ファイルを build4/extlib フォルダにコピーします。

再度 KwikでPublishすることでカスタムファイルが有効になります。

補足 サンプルプロジェクトでは、パーティクルも足して見ました。 fire と background がパーティクルで置換されています。

サンプルのパーティクルはCoronaSDK_Emitter_Viewer_Sample フォルダに格納されています。

air_starsの向きはエミットアングルを180に 変更されています。Kwik4でのパーティクルの編集(Kaboom)は、Kwikのライセンスを購入する必要があります。

Enjoy.