Skip to content

Instantly share code, notes, and snippets.

@s2kw
Last active February 6, 2018 17:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save s2kw/de5abc9cb28d4734c483016c3768c826 to your computer and use it in GitHub Desktop.
Save s2kw/de5abc9cb28d4734c483016c3768c826 to your computer and use it in GitHub Desktop.
Spineの使い方メモ

Spine

スパインっていう2Dアニメーションツール。 画像を何重にも切り出して、各パーツをゆらゆらさせるアニメーションを作るとまるで2Dなのに3Dのように見えたりする。

必要なスキル

  • イラストレーションの能力
  • 3Dモデリングのセンス
  • 3Dアニメーションのセンス

能力とセンスと書いたのは、イラストを描かないと素材が無いから。 写真とかでも良いのかもしれないけど。 (写真だと面白いことにはなりそうかも…。)

パーツの割り振りをしていると、静止画では見えない範囲とか、帽子のつばの内側とか、隠れていた場所を自分で描かないといけない。 なので能力として必要。

3Dモデリングのセンスは、あくまでセンス。頂点の割り方をどうするとテクスチャが伸びて、どうすると伸びないかを直感的にわかってる方がやりやすい。 経験や能力よりも、っぽくやれるセンス。

3Dアニメーションのセンスであって、アニメーションのセンスではないところがポイント。基本的に骨の回転やスケールでアニメーションをさせるので、2Dではなくて3Dやろな、と思い。アニメーションのセンスはそれはそれで必要だけど3Dのアニメーションのセンスはそれを含むと捉えたので。


使いかた

画像のインポート

画像はプロジェクトのディレクトリを指定するとその下に入っている画像が全てSpine内に読み込まれ、Hierarchyペイン下に出現する。 HierarchyのImageディレクトリを選択すると、同ペインの下にPathの入力項目が出て来る。 ここのフォルダボタンをクリックするとFinderが立ち上がるのでそこからディレクトリを指定するでもOK。

画像の配置

画像はHierarchyのImage下にあるものをメインのフィールドにD&Dする。

親子付

  • 骨を画面下側のAdd Boneアイコンから追加を行う。Toolsウィンドウ(画面左下のボタン3つがならんでる)
  • Hierarchyから親子関係を確認しながら、意図した形に配置する。

骨と画像の関連付け

すでにSkelton下にあるImageオブジェクト(丸いアイコン)を骨アイコンにD&Dすると骨の下にImageオブジェクトが入る。 これで骨を回転させるとImageもついてくるようになる。

Imageにウェイト付け

ImageをMesh化する。その他とMeshの頂点のWeightを骨に関連付けさせる。

ImageをMesh化する

Imageオブジェクトの下にくっついているオブジェクト(名称わからないけどImage下にはかならずある四角いアイコン)を選択してHierarchy下にある MeshEdit ボタンを押下するとメッシュ編集モードになる。

画面下部が色々変化するはずなので new を選んでアウトラインの頂点を作る。 頂点どうしのエッジをループさせるべく、最後に、最初の頂点をクリックすると繋がる。

ついで、内部のメッシュの割を行う。

2D画像ではあるけど、立体にした歳の、エッジに相当する部分(正面から顔を見た際の鼻とか、鼻筋、眉間や眉のあたりの骨、唇の縁、正中線、といった具合に高低差がある部分)に頂点を割りつつ、高さが同じところは直線的に並ぶように調整しながらポリゴンを割っていく。

Modifierで頂点の変更・移動。Createで頂点を追加。などできる。 Createでドラッグするとそこから頂点が分裂する。

Mesh化すると四角いアイコンが蜘蛛の巣みたいなアイコンになってるはず。

コツ

  • 伸びてほしい範囲は頂点をおかない
  • 伸びてほしくないところは頂点どうしの間隔をせまくする
  • ウェイトに影響されにくい範囲(硬そうな表現を死体場所)は頂点で2重に囲む

MeshにWeitをつける

Mesh化が完了したらMeshの各頂点に、個別に骨を割り当てる。 対象となるMeshを選択して Tools のウィンドウに並ぶ Pose, Weights, Create, の3つのボタンの真ん中にあるWeightsを選択。(Createは骨作る時のボタン)

Weightsウィンドウが開くので、同ウィンドウ下にあるBindボタンを押下。 Bindボタンを押下すると関連付けを行う骨をクリックするように指示がでる。

選択が終わったらウェイトをつける。 ウェイトはデフォルトで適当につけてはくれる。

あとは調整。

頂点Overlayモードにするとどの範囲がどの骨に影響されるかがわかる。

アニメーション

アニメーションは画面左上のSETUPとかかれたTスタンスのイラストあたりをクリックするとアニメーションモードに切り替わる。

最初はキーが撃たれてないので、0フレーム目とアニメーションを付けたい最後のフレームにキーを入れる。

アニメーションのキーの入れ方

アニメーションキーは、アニメーションさせたい骨を選択して、TransformウィンドウのRotateの項目の右側に鍵のマークがついてるのでこのボタンを押下するとキーが打たれる。

あとは編集しながらキーを打ちまくるだけ。

キーって…

アニメーションキーって鍵盤の方のキーだと思ってた。 でもなぜか鍵の方なんだよな。

Midiとかのキーを打つのと同じだと解釈してたけど、どうやらそうではないらしい。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment