モーション

【Spine】2Dアニメーションはいいぞ_セットアップ編【セットアップ】

2022-01-23

Spine ってなんぞ?

こんにちは! Spineを本業でむしゃむしゃ使っている雨涙です!

Spinerが増えてくれると嬉しい(私のいるプロジェクトが人手不足深刻で…)ので「Spineはええぞ」と宣伝っす!

Sponsored Links

Spineにちょっとでも興味を持ってくれたら万々歳。
Live2D使いはきっとたぶんいっぱいいるけどSpinerって少ないイメージ(イメージなだけ・・・?)

そもSpineとは

kickstarter発の2Dスケルタルアニメーション作成ソフト。メッシュを掛けて変化を持たせ、2.5Dに見せることも可能。採用例にはCygamesのアニメRPG『プリンセスコネクト!Re:Dive』や、バンダイナムコエンターテインメントのブラウザゲーム『アイドルマスター シャイニーカラーズ』などがある。

WiKiより引用 https://ja.wikipedia.org/wiki/2D

説明短っ!

つまりはイラストを変形させてアニメーションさせるソフトです。

2Dモーションを作成できる有名どころのソフトに「Live2D」などがあるかと思いますが、Live2Dが主にモーフィング(あまり使ったことがないので詳しくないですが)、Spineはスケルタルアニメーションになるので、作り方はは全くの別物となります。

どっちが良い、悪いは使いどころに寄るかと思いますが、

Spineに関してはゲームへの実装が強く、別のキャラで同じ動きをさせる際などに大変便利です。

SD(ちびきゃら)などで活躍します。

もちろん立ち絵(等身大イラスト)などでも使えます!!

Spineはええぞ(3回目)

公式サイトも貼っておきます。http://ja.esotericsoftware.com/

こんな動き(待機モーション)などであればサクッと作れる神ソフトです!

耳動かすの忘れてる・・
とりあえずこのくらいのボーンで動いてるの図

こんな方におすすめ

  • Spineとはどんなものなのかがとりあえず知りたい方
  • Spineをあまり触ったことがない方・初心者さん

今回はセットアップまで!!

とりあえず触ってみたらなんとなく把握できる(はず)

※この記事は「Professional」の画面を前提に話が進んでまいりますので、「体験版」「Essential」を使用している方にはない機能などの紹介が含まれますことをご承知おきいただけますと幸いです。

正直ひとまず触ってみる分には「体験版」、良きかなと思って買おうかなとなったら「professional」を買ってしまうことをお勧めしています。「Essential」はSpineの一番使う機能が使用不可のため、安かろう悪かろうですね(使い方が違う気がする)

  • SDをセットアップしてみよう ←イマココ
  • SDをアニメーションさせてみよう

SDで待機モーションを作ろう!!! の前にざっくり画面説明

まずは待機モーションを作ってみましょう

Spineのバージョンはどれでも大丈夫ですが、出来るだけ安定しているバージョンを選択すると安心です。

ここでは4.0.64の使用を想定してしていきます。

バージョンを変更するには

Spine起動時のLauncher画面
1.ランチャー起動画面で選択

右上のバージョンをクリックすると起動するバージョンを自由に選ぶことができる。
Launcher画面をすっ飛ばして指定したバージョンで自動的に開きたい場合は、Launcher画面右下、「▶起動する」ボタンの左にあるチェックボックス「自動的に起動する」にチェックを入れると、次回から同じバージョンで起動される。

2.spineの設定から変更(spineの再起動必須)
2.2 versionを選択後、保存を押してからSpineを再起動

さっそくSpineを開いてみましょう

開いたばかりのシンプルなセットアップ画面。左上の「設定」という文字を押すとアニメーションエディタに切り替わる。

ここがセットアップ画面!

ここでボーンを入れたりメッシュを切ったりウェイトを適用したりIK入れたりなんだりしていきます

動かす前の下準備用の画面ですね。

ひとまずSetup画面に映っているものを軽く解説していきます。

セットアップ画面とウィンドウについて

まずは左上から

メニューバー
Spineをクリックすると出るメニュー?画面

一番左上「SPINE」のロゴをクリックすると上記の画面が表示されます。

  1. 新規プロジェクト
    • 新しいシーンを作成します
  2. プロジェクトを開く
    • 過去に作ったPROJECTを呼び出す
  3. 最近のプロジェクト
    • エクスプローラーを介さず最近使ったspineデータを呼び出す
  4. プロジェクトを保存
    • 保存
  5. プロジェクトを名前を付けて保存
    • いわゆる別名保存
  6. 新規スケルトン
    • 作業中のプロジェクトに新しいスケルトンを作成
  7. プロジェクトインポート
    • 別プロジェクトのボーンまたはアニメーションをインポートする
  8. データインポート(使ったことがない)
  9. エクスポート
    • いろいろな形式(画像・動画・json、バイナリなど)で書き出す
  10. テクスチャ・パッカー&アンパッカー(使ったことがない)
  11. 設定
    • 環境設定など

といった項目が存在します。

よく使う →→「保存」「インポート」「エクスポート」

ロゴの右から

  1. プロジェクトを開く
  2. 保存
  3. 戻る
  4. 進む
  5. 通知
  6. 開いているspineのデータ名

となっています。通知に関しては古いバージョンだとなかったりしますが、この辺りをクリックすることはまずない(基本ショートカットがある)のであまり気にしなくても良きです。

上部右端

右四つは他ソフトと変わらないため割愛

□が二つ重なったようなマークを押すと、現在表示されているウィンドウがいったんすべて非表示になり、作業スペースが画面いっぱいに広がります。

もう一度押すと元の位置にウィンドウが戻ります。

その隣の「ビュー」をクリックすると、ウィンドウ一覧が出ます。ここで使用したいウィンドウを表示させることができます。

  1. ウェイト
    • ウェイトビューを表示します。ウェイトに関しては別途解説
  2. スキン
    • スキンビューを表示します。スキンに関しては別途解説
  3. スロットカラー
    • カラーサークルが表示されます。スロットに色を付け、イラスト(画像)の色をざっくり変更できます
  4. メッシュツール
    • メッシュツールが表示されます。(私は)このビューで作業することはないです
  5. アウトライン
    • プレビューみたいなもの…? 詳しくはないので別の機会に調べておきます
  6. ツリー
    • スケルトンを管理するビューを表示します。ここにすべてのイラスト素材・ボーン・アニメーション・スキン・表示順序などが一覧で表示されます。
  7. プレビュー
    • アニメーションを再生してくれるビューを表示します。再生自体は作業画面でもできますが、これを使うと微調整したいときに便利です。
  8. 測定基準
    • ボーンの数やメッシュの頂点数などを計測・表示してくれます。データ軽量化のお供に……。

基本的にセットアップ画面で使用するビューは初期で表示されている「ツリー」「ウェイト」のみで十分事足りますが、使用状況等に合わせて表示・非表示しながら作業していきましょう!

画面下部

左から Tools・Transform・Axes・Compesate・Options となっています。

左下の方のうっっすい鍵マークを押すと、左右に移動できるので使いやすい位置に持って行きましょう。

  1. Tools
    • ウェイト調整用の表示・ボーン作成用の表示に切り替えられます。
  2. Transform
    • ボーンに対して、回転・移動・拡縮・シアーの数値を調整できます。
  3. Axes
    • Transformで移動等を行う際、軸方向がWORLD準拠、親ボーン準拠、ローカル(自分)準拠かを切り替えます。
  4. Compesate
    • とあるボーンを移動する際に、画像の位置は変えたくない、子ボーンの位置は変えたくない、などの時に有効化します。
  5. Options
    • 作業画面に表示・選択の可不可を設定できます。左から選択・表示・名前の表示、上からボーン・イメージ・その他(パスなど)となります。それぞれショートカットもあります。

ざっくりとした画面説明は以上となります

アニメーション画面についてはまた別の記事にて。。

SDを動かそう

モーションを付けるためには分解されたイラストデータが必要となります。

全くの一枚絵でもできないことはないですが、めんどいの極みなのでざっくりとでも分けた状態のものがあるとベストですね。

今回使用する子はこちら。

素体

PNG(全パーツ)

JSONとPNGデータを使用したい場合は☟☟からDLください。

Boothへ跳びます

自前のSDがあるかたはそちらでも!!!

※上記JSONをD&Dして読み込んだ際に日本語名ファイルが2枚ほど出てしまっていますが削除していただけると助かります・・・

spineにjsonが読み込めたらさっそくセットアップをしていきましょう。

読み込んだ際にimageがエラー(赤枠)になった場合。

ツリー下の方黄色いフォルダマークの「イメージ」を選択 ⇒ 下の方に出てくる欄の右端フォルダマークからエクスプローラーを開いて該当のimageフォルダを指定してあげると治ります。

さっそくセットアップしましょう!

1.ボーンを付ける

セットアップの順序には個人差があるかと思いますが、

今回は ボーンを入れる→スロットをボーンに適用する→メッシュを割る→ウェイト調整 という流れで進んでいきます。

ボーンについて

SDなどの汎用化(使いまわし)が目的とされるセットアップではボーンの命名規則をはっきり決めていると、後々アニメーションを読み込んで適用する際に楽ができます。

実務で何度も泣きをみた私が言うので間違いないです()

名前は基本自由ではありますが、ある程度の規則性を持たせた方が開発の方に渡す際に便利だったりするかも・・・なので私の設定を置いておきます。参考にどうぞ。

階層ごちゃつきがちなので、ボーンに色付けすると便利。

ボーンを付ける際、イメージの上に位置を合わせて作成→ボーン名変更で作成していくのもアリですが、

image名をきちんと設定している場合は、

  1. 親ボーンを選択
  2. スロットを選択
  3. ボーンを作成

とすると、スロット名(image名)でボーンが作成される、且つ自動的にボーンの子に対象のスロットが格納され大変便利です。

ちょっとした小技ですが積み重なれば時短になるのでオススメ。

2.IKを付ける

何かに接地している動きを付けたいときに便利なIKです。

色々使えますが、基本は足を地面に固定するために使用します。

ボーンは1~2本に対して設定できます。

ひとまず足を地面に固定してみましょう。

  1. 太もも(Thigh)・ふくらはぎ(leg)のボーンを選択
  2. 画面右下(ツリーウィンドウ下部)「+新規」から「IKコンストレイント」を選択
  3. つま先をクリック(自動でIK用ターゲットボーンが生成)
  4. IKに名前を付ける

腰をもって上下に動かしてみると、IKの付いていない方では膝が曲がらず地面を貫通、IKが付いていると膝が曲がるようになります。

便利!

これを両足に適用すると、簡単に地に足付いたアニメーションできるようになります

使えるところは足元だけではないです

ツリー右側に謎(関節)マーク

IKを作成すると、ツリー、対象のボーンの右端にオレンジ色(初期設定)の変なマークができます。これが、IKついてますよ!!と教えてくれるマークです

コンストレイント設定
KORE

ここをクリックするとツリー下部のコンストレイント設定へと簡単に飛べるようになります。

(コンストレイント設定はスクロールで下に行けば確認できますが、ボーン数など増えてくるとめんどいのでここクリックすると楽。)

3.メッシュを割る

・メッシュを割る

・メッシュを切る ・・・etc

色々言い方はあるかと思いますが、メッシュというやつを画像に適用していく作業になります。

メッシュって何ぞや、って方はとりあえず☟☟の方にyoutube動画もあるのでこちらを見てもらえれば「ほ~~ん」ってなると思います・・・

(ちょっと言語化しづらく・・・)

ボーンだけの状態でもアニメーションはさせられるけど、メッシュとウェイトを設定するとSpineの本領発揮!!※Proのみの機能です。

でも入れすぎるとデータが重くなりがちなので、不必要な箇所にはできるだけ入れないように心がけると良きです

この辺は仕様と経験と相談といったところではありますne・・・

とりあえず耳を動かせるようにしてみましょう!!! けもみみは正義だ!

▲▲(←勝手にけもみみだと思っている記号)

  1. メッシュを割りたいイメージを選択
  2. ツリー下部、オプション欄のメッシュにチェックを入れる
  3. メッシュ編集ボタンをクリック
  4. 作成ボタンが選択されている状態で、いい感じに点を描く(オレンジ色の線を引く場合は1クリックした後離さずドラック)
  5. 不要になったメッシュの角を削除する

新規ボタンからメッシュを割るのも良いですが、他の画像の位置などを確認しながらメッシュを割れるので、作成ボタンから割るのがオススメ

途中、メッシュ割り中のimage以外が非表示になるのは「Tab」キーを押してます(ショートカット)

メッシュをきれいにきれいに割るのも間違いではないですが、

最初から細かく割るよりもある程度ざっくり割りつつウェイト調整中やアニメーション作成中に増やしたり減らしたりと適宜設定し直すこともできるので

まずはある程度入れておきましょう。

4.ウェイトを設定する

メッシュを割っただけではimageをボーンに沿わせてうねうねと動かすことはまだできないです。

そのため、メッシュを割ったイメージには、ウェイトを割り当てる必要があります。

メッシュを細かくし過ぎるとウェイトの調整の時に大変です・・・

先ほど割った耳にウェイトを適用していきましょう。

  1. ウェイトを適用したいimageを選択
  2. ウェイトビュー下部、「バインド」ボタンを押下
  3. バインド(影響を反映)させたいボーンを親から順に選択(親⇁子⇁孫…の順に選択すると後々わかりやすくなります)
  4. バインドボタンを再度押下(もしくはスペースキーなどを押す)
  5. ウェイト値を自動で計算
  6. (私は一応)スムージングをかける(好みにより)
  7. 気に入らなければ自分で微調整(6の前に調整をするのがよきです。)

基本は自動で計算してくれますが、計算ができない場合や、離れた位置のボーンの影響などを別途適用させたい場合などは手動で設定することも可能です。

ウェイトビューの該当のボーンを選択後、丸く表示されているメッシュの点を選択、そのまま画面上で上下に左クリックのままスライドさせると影響値を調整できます。

数値で制御したい場合は、ウェイトビュー上部、「ウェイト」と書かれたスライダー部分に数値入力で反映させることもできます。

直感型の私はマウスのドラックのみで設定してしまいます。

使いやすさは人それぞれなので好きな方で調整!!調整!!

以上がセットアップの基本の流れ

パスアニメーションだとか、トランスフォームコンストレインだとか、スキンだとか、他にもいろいろ機能はありますが、

とりあえずキャラを動かすだけであればこれだけで事足ります。

というか私が早く動かしたくてたまらないので今は後回し!!!!

ひとまずメッシュとウェイトをほかのimageにも反映させていきましょう。

次回!!

アニメーションさせるよ。

Sponsored Links

-モーション
-, ,