【Spine】初心者向けチュートリアル！インストールから使い方まで解説

下記のURLからデータをダウンロードできます。

ダウンロードした「SpineTrialSetup.exe」を実行してソフトを入れましょう。

下記のパスにデータがインストールされています。
「SpineTrial.exe」を実行するとSpineのソフトが起動します。

C:\Program Files (x86)\SpineTrial

※購入版の場合はC:\Program Files (x86)\Spine

※正規版を購入した人は必要ない項目です。

「SpineTrial.exe」を起動すると電子メール入力のダイアログが表示されますので、メールアドレスと入力しましょう。

メールに「トライアルコード」が記述されているので、そのコードを入力すれば、トライアル版が使えるようになります。

新規プロジェクトの文字を押すと作業する画面に切り替わります。

SpineのインストールデータにPhotoshop用のスクリプトがあるので探します。

C:\Program Files (x86)\SpineTrial\scripts\photoshop

下記の2つのファイルをコピーします。

※「LayersToPNG.jsx」というスクリプトもありますが、同じ機能で古いスクリプトになるのでこちらは使用しません。ちなみに新しいスクリプト「PhotoshopToSpine.jsx」は｢タグ｣機能が追加されていて便利です

下記のPhotoshopのスクリプトフォルに「Spine」というフォルダを作成して先の2つのファイルをペーストします。

C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\Spin

以上でPhotoshopでイラストを作成した際、Spine用に書き出すためのスクリプトの準備ができました。

Photoshopで風鈴のデータをパーツ分けします。

下図のような感じでパーツ分けしてます。（※パーツを見やすいようにずらしてます）

Photoshopのルーラーの（0，0 ）地点が原点になるので、ルーラーをドラックして、風鈴の根本を（0，0）にしましょう。

Photoshopの上部メニューからファイル＞スクリプト＞PhotoshopToSpine

画像のPOPUPが起動します。

英語の細かいメニューがありますが気にせず。

Trim whitespace(余白の削除)のチェックだけ外してOKボタンを押しましょう！PSDデータのあった場所にデータが書き出されます。

すいみん

「PhotoshopToSpine」の詳細はこちらに書きました

あわせて読みたい

【Spine】書き出しスクリプト「PhotoshopToSpine」の詳細解説と日本語化について 本記事でSpineにインポートするための書き出しスクリプト「PhotoshopToSpine」の詳細と日本化についてを紹介します！ 【Spine用書き出しスクリプト「PhotoshopToSpine」…

インポートボタンを押した後、風鈴のデータがSpineで再現されます。

指定した原点の位置もばっちりです！

以上でSpineで画像データの取り込みが完了です！

「作成」ボタンを押すして骨を入れるモードにします。

「Ctrl+クリック」でアタッチメントを選択した状態でドラッグで骨を作成してみましょう。

すると選択したアタッチメント+スロットの親階層にアタッチメントと同じ名前で骨が追加されます。

実はそのままドラッグすると「骨」を作成することができますが「bone」という名前で作成されてしまいます。（要リネーム）

さらに対象のアタッチメントを階層下に移動しないといけないので、さきにCrlt+クリックで画像選択するだけでこれらの手順を省略することができます！

紙部分をCtrl+クリックで選択して、下の図のようにさらに骨を作成します。

あとで骨を分割するので1本でOKです。

2番めに作った骨と1番目の骨のつながり部分がずれているので、下のアタッチメントは動かさずに骨の位置調整をします。

2つめに作成した骨を選択してツリーパネルしたの「分割」ボタンを押します。

チェックは何もせず、そのまま骨を5分割します。

5分割されました。

ツリーパネルの下の「新規」ボタンから「パス」を選択して下図のように紙部分にパスを引きます。

階層を整えて、早速骨をパスに沿わせてみましょう！

まずは分割した5つの骨だけを選択して、ツリーパネル＞新規＞「パスコンストレイン」を選択します。

その後に先程作成した「パス」を選択しましょう。

以上で、パスコンストレイント・が効いて選択した骨がパスに骨が沿うようになりました！

さらにパスの回転設定をチェーンスケールにします。

骨のスケールが変化して、より骨がパスに沿った形になりました。

紙部分のアタッチメントを選択して、メッシュ編集します。

編集モードになるので、まず見やすくするために、「減光」にチェック

つづいて「作成」で頂点を作成して、「変更」位置調整、消したい時は頂点をダブルクリック（または「削除」）でメッシュを作成していきます。

※面倒な人は「トレース」で自動生成して、「生成」で詰めてもよいです。

上図のように横に多めに分割してしまいましょう。

最後に「スペースキー」または「メッシュ編集」ボタンを押してモードを終了します。

右上の「ビュー」からウェイトパネルを表示させましょう

紙部分のアタッチメントを選択した状態で、ウェイトパネルの下にある「バインド」ボタンを押して5つの骨を追加しましょう。（ビューポートからでもツリービューからでもOK）

終わったら「スペースキー」または「メッシュ編集」ボタンを押してモードを終了します。

ウェイトパネルの「オーバーレイにチェック」を入れて「自動」を押すと自動でウェイトが割り当てされます。

骨とアタッチメントが離れていると「ウェイトを計算できません」と警告がでることがあります。その場合はウェイト調整できないので注意

手動でウェイトを調整します。

まずパスや骨の表示を下のパネルの目玉ボタンの下のチェックを外して非表示にしてしまいましょう

あとは地味なのですが頂点を選択して、ウェイトを割り当てたい骨を選択して、ウェイトの値を上げ下げするということをひたすら繰り返します。

感覚的に調整したい場合は頂点を選択して上下にドラッグするとウェイト値が変化します。

始めは数学的に間の頂点が2つだったら100%→66%→33%みたいに均等に割ってもよいです。

この時点で状態を確認したい場合は骨とパスがリンク（コンストレイン）しているのでパスの頂点を動かすとアタッチメントが変形します。

動かす用の骨（コントローラー）を作成します。

図のような位置に骨を作成します。

骨をわかりやすい見た目に変えます。「アイコン」と「カラー」を変更しましょう。

パスにもウェイトをつけます。

先と同じ手順でパスを選択して、一番上の骨とコントローラーの骨をバインドします。

パスの頂点を選択してウェイト値を振ります。

コントローラーを動かすと紙部分が連動して動く様になりました。

この時点では仮のウェイトです。アニメーションさせながら最終調整します。

左上の「設定」の文字をクリックして「アニメ化」に変更します。

コントローラーをトランスフォームで動かし、鍵アイコンを押して2箇所キーを打ちましょう（0F、20F）

またループさせたいので、50Fのキーは0Fのキーを選択してコピペでOKです。

「▷」の再生ボタンをおして左右に紙を動かしながら、パスのウェイトを修正しましょう。

「グラフ」ボタンを押して、アニメーションカーブの調整をします。 ※再生しながらでもOKです。

最終的に鈴の骨も少し動かして、下記のような感じになりました。

※トライアル版は全機能使えるものの、保存とエクスポートができませんので、Gifでキャプチャしました。