ムーぶろ

株式会社オフィスムーブの雑記ブログです。2D アニメーション ソフト[spine]挑戦中。随時ご質問等、お気軽にください(^O^)

スパイン「ストア選択」

ボーンを沢山使うような、髪の毛の束、布など
まとめて選択する機会が多いもの、そういう操作は
案外時間が掛かりますよね。

ストア選択(Store Selection)を使うと時短できます。

CTRL+9~0の数字で登録
9~0で登録した選択を、再選択できます。

youtu.be

スパイン「Clean Up」

Clean Up」はご存知ですか?

アニメーションを作っていると、動きに影響を与えない
余分なフレームキーが増えてくると思いますが
その余分なフレームキーを削除してくれる機能が、バージョン 3.5から追加されました。

f:id:officemove:20170310155151g:plain
余分なフレームキー
キーとキーの間に線が入っていないと、動きが変わっていないということになります。

f:id:officemove:20170310155615p:plain
Clean Upボタン
押します。

f:id:officemove:20170310155740p:plain

いくつの不要キーが消されたのか、
というポップアップが表示されました


f:id:officemove:20170310155821p:plain
不要キーが消去された後のタイムラインです!
すっきりしていたほうがCPUの使用率など、少なくて済むのでお勧めです

spineはじめました6(基礎まとめ)

spineはじめました2 - ムーぶろ

spineはじめました3(メッシュ編) - ムーぶろ

spineはじめました4(ボーン、ウェイトアニメ編) - ムーぶろ

spineはじめました5(IK編) - ムーぶろ

上記記事で紹介しましたがいかがでしたでしょうか?
基礎を組み合わせれば、キャラクターが動き出します!


待機

f:id:officemove:20170308143120g:plain

頭の方向が変わった時に、影がちゃんと移動するよう
影の形に添ってメッシュポイントを打ちました。

f:id:officemove:20170308145343j:plain

****
ビックリ

f:id:officemove:20170308143210g:plain
驚いたときにお皿が外れるように、素材を別に分けてあります。
頭の影は、頭と同化しているので
体の時と同じよう、影に沿ってポイントを打ちました

****
歩き

f:id:officemove:20170308143203g:plain

IKが一番生かしやすいアニメーションでした
脚の付け根が、胴体にくっつくようwait調整をかけてありますが
曲げ切った部分はどうしても縒れてしまうので、
別途、メッシュの調整が必要でした

spineはじめました5(IK編)

作業分担紹介編
こちらでちらっと登場した「IK」を紹介します

IKとは、インバースキネマティクスの略です。
難しい単語の解説はとりあえず飛ばします。

目標のポイントを決めると、そのポイントに合わせて
関節部分が動きます。

オレンジ色のポイントに向かって関節が動いていますね!

f:id:officemove:20170302201440g:plain

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
やり方は、もも、すねを選択して

f:id:officemove:20170302201449g:plain
このウィンドウから作れます。
(スパインでは現状ボーンは2本までしか設定できません。)

f:id:officemove:20170302201445p:plain

 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
IKは地面についている部分に使うと便利です

f:id:officemove:20170302221741g:plain

 

spineはじめました4(ボーン、ウェイトアニメ編)

作業分担紹介編
こちらでちらっと登場した「ボーン機能」を紹介します

まずは、パーツをバラバラに用意し、
スパイン上で合体します。

f:id:officemove:20170301153354j:plain

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
ここの「Tools」の「作成」から、キャラクターの骨組みを
想像しながら、合体した絵の上に打っていきます。

f:id:officemove:20161117144430p:plain

しかしこの作業は、下記の記事で使用したスクリプトを使用すれば数分で完了します!おすすめです



↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
大体こんな感じです。
ボーンはカラーから色を変更できるので
自分が解りやすいように色を変更すると視認性が上がっておすすめです

f:id:officemove:20170301153353g:plain

シングルクリックで「
ドラックで引っ張ると「◎▶」で使い分けられます。

小物系は「
関節や長物など方向が変わるものは「◎▶
で使い分けます

ボーン名は日本語も使えますが
エラーを起こしやすいので英字で名前を付けましょう

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ボーンとパーツに親設定をしてあげ、
アニメをつけると…
ボーンにパーツが付いてくるようになりました!

f:id:officemove:20170301155307g:plain

でも、腕のひじの関節は、絵が上腕と一体化しているので
このままだと動きません。

f:id:officemove:20170301161907j:plain


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
そこで、前回紹介した「メッシュ機能」をつけてあげ、その後
ポイントとボーンをどれだけ付いていくかを設定をできる
「ウェイト(wait)」機能を使用します。

f:id:officemove:20170301153342g:plain

今見える3つのウェイトは、
赤いポイントはどれだけ赤いボーンについてくるか
黄色いポイントはどれだけ黄色ボーンについてくるか
緑のポイントはどれだけ緑のボーンについてくるか
ということが色の割合で表されています。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
◆ウェイトの付け方

f:id:officemove:20181109174828p:plain

f:id:officemove:20181109175301p:plain

f:id:officemove:20181109175316p:plain


④のModeはここから選べます。

f:id:officemove:20181109175326p:plain


●Direct
ポイント1つ1つ、マウス上下で調整します。
細かい部分を調整したいときに便利

●Add
ブラシツールのようにまとめて調整します。
大まかに付けたいときや、感覚的に調整したいときに便利

●取り除く
現在選択しているボーンのウェイトを取り除けます。

●置換
現在選択しているボーンのウェイトを、
[ウェイト]に設定している数値に置換します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:officemove:20170301153333g:plain

動きました!
関節部分など、機動部分にポイントを多く打ちましょう

次は、歩いたり走ったりするときに便利な
「IK」について紹介したいと思います

spineはじめました3(メッシュ編)

 

作業分担紹介編
こちらでちらっと登場した「メッシュ機能」を紹介します

わかりやすいようにこちらの一枚絵を使用して

f:id:officemove:20170227150949p:plain

 

「メッシュ編集」から、まずは輪郭をなぞって
形を縁取るようにポイントを打ちます。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:officemove:20170227153619p:plain


もしこの絵が3Dポリゴン化したときにどんなポイントになるか?
と想像しながら打ちます。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:officemove:20170227150950p:plain

 そこから、内側の「面」と「辺」を意識しながら打ちます。
クリックで青色の点(point)、ドラッグでオレンジ色の辺(edge)が使えます

外側以外の輪郭にはedge、柔らかく動かしたい部分はpoint
分けると打ちやすいかもしれません。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 打ったポイントを動かすと周辺の絵が付いてくるようになります
それを利用して立体的な動きをつけます

f:id:officemove:20170227163140g:plain

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
こちらで出てきた「回転」「トランスレート」を使用して
縦横移動以外にも、「メッシュ機能」で奥行きが追加されましたね!

f:id:officemove:20170227162924g:plain

でも、単純な絵はこれで動かせますが
腕とか脚とか、関節部分はどうするのかな?

次は「ボーン機能」について紹介したいと思います


※追記
制作過程を録画しました

officemove.hatenablog.com

spineはじめました2

officemove.hatenablog.com

以前こちらの記事で紹介したアニメーションについて
どういう風に作られているのか、機能を限定して書きたいと思います!

回転、トランスレート、スケール、Shear機能を
組み合わせて作ってます。

 

youtu.be

 

でもこれだけだと、ただの1枚絵を動かしてるだけにしか

見えませんね???

 

次の記事では、「spine」の醍醐味、
一枚絵が立体に見えるようになる「メッシュ機能」について
書きたいと思います