Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介

アニメーション制作フロー比較と実例紹介
&
ディスカッション
2020.5.15

※こちらのスライドをご覧になる方への注意事項 
 
本スライドではたくさんのGIFアニメーションを掲載していましたが、残念な
がらSlideShareではGIFアニメーションを載せることができず、静止画に置
き換わってしまっています。 
 
こちらのスライドは補助的にご覧いただき、 
アニメーションについては以下の動画でご覧ください。
https://youtu.be/quCEgAN4bdg

１. はじめに
- 本日の流れ
- Spiners MeetUpとは
- 登壇者紹介
２. Artner / G2 Studiosのワークフロー紹介
３. Artner / G2 Studiosの実例紹介
４. Spineディスカッション
５. 質疑応答
本日の流れ

Spineを使用しているアニメーター（Spiners）同士を繋ぎ、
互いのノウハウを共有し、業界全体での技術アップを目的とした
共同企画イベントです。 
Spiners MeetUpとは
今後(Youtube配信に限らず) 継続開催を予定していますので、
終了後アンケートで今後やってほしいことなどをぜひ教えてください！

G2 Studios株式会社 / アートチーム Spineアニメーター  
エマール美咲 
1992年生(27歳) 
武蔵野美術大学　映像学科卒 
登壇者紹介 -
・大学時代に映像制作を勉強 
・前職ではUIデザイン・PV制作・公式サイト制作などを担当 
・現在は複数プロジェクトのSpine業務を担当 
・Spine歴は約4年

登壇者紹介 -
株式会社Artner / 代表取締役 
長沢誠一 
1972年生(47歳) 
東京デザイナー学院　アニメーション科卒 
・専門学校卒業後、3DCG業界に就職。業界歴は23年 
・フリーランスを経てArtner設立し、今年度で13年目に入る 
・4年前にSpineを知り、研究開発を経て業務の一環として取り入れる 
・現在SpineはArtnerの主軸となり、スマホゲーム「Shadowverse」 
　「TEPPEN」等のSpineアニメーションを手掛ける

１. 全体の流れ
２. 役割分担
３. アニメーション制作の流れ
４.アニメーション制作の進め方
-　ブロッキング
-　レイアードアプローチ
５. アニメーション制作時、主に気にすること
ワークフロー紹介

ワークフロー紹介全体の流れ
イラストチーム
アニメーションチー
ム
クライアント
発注
納品
ArtnerのSpineアニメーション制作は、
　　　　　イラストチームとアニメーションチームに分担して制作をしています。

ワークフロー紹介役割分担
セットアップ
アニメーション
新規プロジェクト等の試作・検証
素材作成
切り分け・描き足し
絵コンテ作成
アニメーションチー
ム
イラスト
チーム
　　クライアント
発注納品

ワークフロー紹介アニメーション制作の流れ　その１
　②　　動きのタイミングを決める
クライアントチェック
社内チェック
OK
NG
　①　　動きのイメージを固める
NG
納品
　③　　揺れもの以外の動きをつける
　④　　揺れものを付ける
絵コンテなどの有無に関わらず、
イメージが固まっていない状態で作業を進
めるのは非常に危険な方法です。
メリット 
詰めた状態のチェックになる為チェック時
の印象が良くなり、 
FBが少なくなる可能性がある 
 
デメリット  
動きのイメージが違った場合など、巻き
戻りが発⽣する可能性がある

ワークフロー紹介アニメーション制作の流れ　その２
　②　　動きのタイミングを決める
社内チェック
OK
NG
　①　　動きのイメージを固める
NG
納品
　③　　揺れもの以外の動きをつける
　④　　揺れものを付ける
社内orクライアントチェック
社内orクライアントチェック
NG
NG
メリット 
段階的なチェックを挟む為、 
大きな巻き戻りが発生しにくい 
 
 
デメリット  
細かくチェックを挟むのでFBが多くなった
り、最終的なアニメーションが出来上がる
まで時間が掛かる可能性がある。

シルエットが大きく変わる動きの場合
ワークフロー紹介アニメーション制作の進め方
１.　アニメーション制作の進め方
ブロッキング
主要ポーズを配置し、
タイミングなど大まかな流れを決める事
レイヤードアプローチ
シルエットがあまり変わらない動きの場合

スペーシングを調整しよう！
　　予備動作の作成、
　　　　グラフの調整を行います。
　　　　　
２.　アニメーションワークフロー「ブロッキング」　
揺れもの以外の動きを付ける
動きのタイミングを決める
キーポーズを作成
重心は正しい？
体のつながりは自然？
　シルエットを意識しよう！
　　　分かりやすく、説得力のあるポーズ（シルエット）を目指します。
　　　伸縮（ストレッチ、スクアッシュ）を入れる事で躍動感が増す事も！
　　　大きい動きの時は、重心を崩さないと違和感がでる場合があります。

シルエットが大きく変わる動きの場合
１.　アニメーション制作の進め方
ブロッキング
主要ポーズを配置し、
タイミングなど大まかな流れを決める事
レイヤードアプローチ
ベースのアニメーションを作り、
ベースから影響が⽴きい順にアニメーションを
つけていく事。
シルエットがあまり変わらない動きの場合

３.　アニメーションワークフロー「レイヤードアプローチ」　
ベースの動きを作成
全体の動きをつける

1) リニアな動きになっていないか 
 
2) 軌道が滑らかになっているか 
 
3) ⼒の伝わる⽅向は正しくなっているか 
 
4) 動きの周期、タイミングが同じになっていないか 
 
5) ⽴体表現に歪みが生じていないか 
 
6) サンプルとの印象が合っているか 
4.　アニメーション制作時、主に気にする事

1）リニアな動きになっていないか
跳ねるタイミングはどちらも同じ  

1）リニアな動きになっていないか

　　2）軌道が滑らかになっているか

　　3）力の伝わるタイミングは正しくなっているか

　　4）動きの周期、タイミングが同じになっていないか

　　5）⽴体表現に歪みが生じていないか

　　6）サンプルとの印象が合っているか
　　　ここで重要視していることは、大きく下記の3点が挙げられます。
● 動きの周期
● メッシュの細かさ
● 揺れもののボーンの入れ方

次の3つだけは、覚えておいてほしい！！
1. 作業前に動きのイメージを固める
2. ゴースト機能を使ってチェック
3. スローにしてチェック
ワークフロー紹介

ワークフロー紹介全体の流れ
各プロジェクト所属
メンバー
アートチーム
(横断チーム)
版元様
パブリッシャー様
発注
納品
弊社ではSpineアニメーション制作は主に、横断チームであるアートチームが担当しています
※プロジェクトによっては、プロジェクト所属メンバーが制作している場合もあります
◇アートチームとは？
G2 Studiosのエンジニア / アニメーター / 2Dデザイナー/サウンドの混合チームです。
基本的に全員Spineに関する基礎知識は持っていて、役割を兼任している社員もいます。
(エンジニア兼アニメーターなど )

ワークフロー紹介チーム内役割分担(新規案件受注時)
サンプルアニメーション作成
セットアップ検証
サンプルエフェクト作成
組み込みテスト
負荷検証
デザイン案作成
切り分け確認
切り分けテンプレート作成
アニメーター
エンジニア 2Dデザイナー
各プロジェクト
アートチーム
発注納品

ワークフロー紹介セットアップ検証とは？
例えばSDキャラの場合は、スキンを利用して1スケルトンで全キャラを作成するか
キャラクターごとにスケルトンを用意するか、どちらのデータの持ち方が良いかを検討したりします

ワークフロー紹介アニメーション量産の流れ(SDキャラ編)
1体分のアニメーションを作成
別キャラパターンを作成
社内チェック
社内チェック
OK
NG
NG
各PJからアニメーション要件をもらう
NG
NG
SDキャラの場合は、
同じモーションをたくさんのキャラに
適用する必要があったりするので
まず1体分を作成して監修に出し、
OKだったら量産する流れで進めていま
す
アニメーション要件の時点でクライアント
チェックはされている前提で、
絵コンテなども書かずにいきなり Spineで
作業を始めることが多いです
実装

ワークフロー紹介アニメーション量産の流れ(カードイラスト編)
アニメーション作成
エフェクト作成
実装
社内チェック
OK
NG
イラスト切り分け指示
NG
イラスト切り分け作成
アニメーターからイラストの切り分け指示
を行なって、2Dデザイナーに切り分けを
依頼します。
エフェクトについては、
どこまでをSpineで持ち、
どこからをUnityで動かすかを、
あらかじめ打ち合わせておきます
例えばワープホールのような
背景エフェクトが必要だった場合、
シルエットをSpineで動かして
Unityでテクスチャを載せて UVスクロールで動
かしたりします

ワークフロー紹介社内チェックで見ていること(SDキャラ編)
１.　キャラクターの性格を表現できているか
あらかじめ動きのレギュレーションを決めておき、レギュレーションに沿った動きになっているかを確認
します
キャラ(or性格パターン)ごとに動きの大きさ、速さ、体重のバランス(片足重心で立つなど)のレギュレーションを決めてレ
ビューします

ワークフロー紹介社内チェックで見ていること(SD編)
２.　揺れものの動きは正しいか①
・体の動きに対して揺れるタイミングが適切かを確認します

２.　揺れものの動きは正しいか②
・体の動きに対して揺れの方向が合っているかを確認します
揺れものは「遅れてついてくる」のが基本なので、まず体の動きとは逆方向に行くのが正しいです

２.　揺れものの動きは正しいか③
・揺れもののフォロースルーの大きさが適切かを確認します
あまりにも大きく戻っていると、意思を持っているもののように見えてしまいます

３.　正しい体重移動ができている①
・足だけがスライドするように動いてしまっていないか

３.　正しい体重移動ができているか
・腰から動けているか

ワークフロー紹介社内チェックで見ていること(リアル頭身)
１．全体で動かしているか
〇の例では体もわずかながらに動いてる / Xの例では首と腕だけで動いてる
微妙にでも全体で動かさないと固まっている感が出て違和感がある
絵の出展：アムステルダム国立美術館 / 卵商人

ワークフロー紹介社内チェックで見ていること(リアル頭身)
２．筋肉&骨格の繋がりを意識できているか
〇の例では、目を閉じると眉やおでこが下がり、口を閉じると顎全体が上がり、頬の位置も動く
Xの例では、目を閉じるとまぶただけ、口を閉じると唇だけが動く
特に顎を動かさずに口を開くことはできないので、リアルな絵柄では注意
絵の出展：アムステルダム国立美術館 / 卵商人

実例紹介立体表現を使った走りモーション

手前用奥用
１.　各所のパーツの切り替えによる立体表現
手前用奥用

２.　足パーツの切り替え＋変形
切り替えのみではなく、
パーツにも立体表現を加えています。

３.　動きに合わせた袖口の変形
動きに合わせた変形により
　　　奥行きの表現をしています。

４.　頂点移動による立体表現
遠近法を応用した立体表現です。
出っ張る部分を大きく動かしています。

番外編：スカートの裏面を追加する
元絵
パーツを複製し、
色味調整で裏面を表現しました。

立体表現　有無の比較
Before After

実例紹介研究開発プロジェクト”Ignite”について
Igniteとは、G2 Studiosのアートチームが行っている
「2Dの魅力を生かした新たな表現手法の研究開発」のためのプロジェクトです。 
 
この中で行ったセットアップ/アニメーションの試みについて紹介します 
 
※プロジェクト全体の詳細はG2 Studiosのブログ記事をご参照ください

実例紹介 Igniteで行った試み
１．多方向を向けるセットアップ
各方向のアタッチメントの表示 /非表示を保存したアニメーションを作成して、
攻撃モーションなどを作る際には、ここから毎度キーをコピーして対応しています

２．どの方向でも「同じ武器」を流用する
武器のボーンはトランスフォームコンストレイントを使用して手のボーンに付けることによって
どの方向でも同じ武器の画像を流用するようにしています

・スキンの活用

アタッチメントのカラーはスキンごとで持つことが
可能なので、エフェクトは白い画像を用意して
カラー変更で2キャラ分を用意しています

・マントがひるがえる(片面しか見えてない状態からのスタート)
動きのダイナミックさを出すためにマントが翻るようにセットアップしました
▼テスト時のもの

４. Spineディスカッション
こちらは当日フリートークに近い形で話していたので
参考URLなどを載せたもののみを抜粋して掲載します

Spine作業の悩みについて

～質問～
グラフが扱いづらいので、
良い方法があれば知りたい。

プリセットを活用して、パパッとカーブ設定が
出来るようにしておくのがオススメです

ちなみに、
Spine3.9でこちらのようなカーブエディタが
実装されるようです
詳しい開発状況はコチラ

～質問～
差分のポーズが複数あるキャラクターの
セットアップが難しいので、
良い方法があれば知りたい。

Spine 3.8.77からアニメ化(ANIMATE)モード中に
バインドできるようになったのを利用するのがオススメです
http://ja.esotericsoftware.com/blog/Mesh-binding-tutorial

～質問～
どうやって（どこから）
知識の習得をしていますか？
アニメーション制作時に
参考にしているサイトや本は
ありますか？

定期的に社内での勉強会で技術の共有をしています。
制作時にはゲーム動画や
アクション系モーション撮影をされている方などを
参考にしています。
　ミソジサラリーマン　様
　YouTube https://www.youtube.com/c/MisoziSalarymanGameStyleAction
　Twitter　https://twitter.com/keriwaza?s=20

５. 質疑応答
当日フリートークに近い形で話していたので
当日回答できなかったご質問のみ、回答を掲載します
(ご質問いただいた皆様、ありがとうございました！)

～質問～
コンストレイトの名前を
どのような法則性でつけていますか？

G2：
「(コンストレイント名)_(元ボーン名)_(ターゲットボーン名)」
という規則でつけています。
たとえば武器を左手にくっつけるためのトランスフォームコンストレイン
トなら「TC_weapon_handL」などです。
Artner:
「元ボーン名_con」と付けて、後ろのコンストレイントの
部分は、下記の様な規則で付けています。
コンストレイント＝con
移動のみ＝pos
回転のみ＝rot
IKコンストレイント＝IK

～質問～
spineモーションをUnityに持っていきた
いのですがやり方が分からず…
参考書や参考サイトなど教えていただけ
ましたら幸いです

G2：
こちらなどが分かりやすいかと思います…！
https://qiita.com/harayoki/items/f595c9d8d433b1d0ad71
まずUnityをインストールしたら、Spine公式から「spine-unityランタイ
ム」というのをダウンロードして、それをUnityに入れてください。
すると、JSONエクスポートで書き出したデータ3点セット
(.json/.png/.atlas.txtファイル)をUnityのAssetウィンドウにまとめて投
げ入れるだけで「(スケルトン名)_SkeletonData」という名前のデータを
作ってくれますので、これをシーンビューに配置して確認することが出
来ます！

～質問～
1000フレームを超えるような長めの尺の
アニメーションを作成する場合、
工数を削減するコツはありますか？

G2：
ドープシートに再生範囲を決める機能があるので、それを利用して確
認していくと良いと思います。「ループスタート」と「エンド」に今確認した
いフレームの開始と終了の番号を入れておけばそこだけでループ再
生して確認できます。
「プレビュー」ビューも出しておけば常に全体を再生してくれるので、プ
レビュービューの再生速度をちょっと速くしておいて常に全体が見れる
ようにする等も良いかと思います。
Artner:
長い尺だと、どうしても集中力が切れてしまうので、区切れるところで
区切って細切れにして、別アニメーションとして作成していきます。
一つ一つが出来たら、その部分をコピーして、一つのアニメーションに
入れて、微調整をして完成という流れで作成してます。

～質問～
例にあったレイヤードアプローチを使用した
ゆったりとした上下の動きのアニメーションにおい
て、髪や揺れものの動きに違和感がないよ
うに、かつ魅力的に揺らすためにはどのよう
な部分を気を付けるべきでしょうか？

G2：
「重さを考える」ことでしょうか…
軽いものと重いものの動きの差(特にグラフのカーブに出ますが)をしっ
かりつけられると魅力的になるかなと思います
Artner:
空気の流れを追加してあげると、より魅力的になると思います。
そよ風なのか？強風なのか？などを考慮してあげると良いです。

～質問～
スキンで多くのキャラクターを作る
場合どのようなフローで作っています
か？メッシュを作るタイミングなど
気になります。

G2：
どんな条件かにもよりますが、「体格が同じで顔だけ違う」などであれ
ば、とりあえず1体メッシュ＆ウェイト付けまで含めて完成させて、他の
キャラは後から作ります。
理由としては「リンクメッシュ」を使用する場合でも、1体分まず完全な
状態に仕上げてからリンクメッシュを作成した方が分かりやすいからで
す。
複数キャラで流用することを考えて作らないといけない点は命名くらい
で、フローとしては1体1人別スケルトンで作るのとあまり変わらないか
なと思います。

～質問～
過去に3DCGアニメーターとして働いてい
たのですが、会社で寝泊まりをして作業
をしていた時がありました。Spineでの仕
事で会社に泊まって作業していたという
事はありましたか？

G2：
無いですね…！
Artner:
週1で放送がある案件があったのですが、間に合わせるために納品間
際で泊まりになることもありました。

～質問～
セットアップ画面で間違えてボーンを動か
してしまった事があり、元の形状まで戻れ
なかったことが何度もあります。簡単に
元に戻すことは出来ないですよね？

G2：
何もバックアップとっていなかったとなれば難しいですね。個人的に
は、セットアップをする際にボーンの位置や回転角度を必ずピッタリし
た値になるようにしているので、間違えて手のボーンなどの回転を変
えてしまったとしても必ず(Axesは親基準で)0度などにすれば正しい角
度になるようにしています
Artner:
簡単に戻すのは難しいので、なるべくセットアップでは動かさないよう
にしています。
ウエイトの調整など、ボーンを動かしながら確認する作業は必ず
【アニメ化】モードでテスト用のアニメーションを作成して、そこで確認を
する様にしています。

～質問～
Spineのアニメーションを利用している
ゲームで「この作品がスゴイ！」というよう
なゲームはございますか？

G2：
最近だと「この素晴らしい世界に祝福を！　ファンタスティックデイズ」
がミニキャラの中で最高峰に良い動きしていてすごいと思います。あと
は「Muse Dash!」は頭身の高いキャラ＆ポーズ付きの絵の中で最も
良い動きをしていると思います。あとは韓国のゲームですが
「SoulArk」は立体表現が素晴らしいです。日本ではまだ配信していま
せんが「AFK Arena」などもとても良い動きです。リアル系の絵柄であ
れば「Zodiac: Orcanon Odyssay」は最高にかっこよくて、メイキング
なども公開されているのでぜひ調べてみてほしいです！
Artner:
中国の会社さんのゲームで【ロケットパンチ】がスゴイです。最初見た
時に3Dかと思った程でした。ロボットが変形して飛行機になったりしま
す。

～質問～
トランスフォームコンストレイントのコツに
ついて、ウェイトの割り方とかのパーセン
テージとか、どんな感じでやれば宜しいで
しょうか？
こうやれば8割がた完成するような
やり方とかありますか？

G2：
頂点が多いキャラクターであれば、ウェイトの「追加」「取り除く」ツール
でブラシで塗っていくような感じでウェイトを塗っていくとすぐに設定でき
ます。「アニメ化」モードで先にボーンを動かしておいてからウェイトを
編集すれば簡単です。
Artner:
【アニメ化】でコンストレイントを効かせたいコンストレイントの元になる
ボーンを動かして0フレームでキーを打ちます。
【セットアップ】に戻って【プレビュー】にて、先程付けたアニメーションを
表示しながらコンストレイントのパーセンテージを変えます。すると、コ
ンストレイントの効かせたい画像が動くので、理想の見た目になるよう
に調整します。

～質問～
ウェイト付けをするときに自動機能は使い
ますか？
使う場合、自動のまま使えるのでしょう
か、調整は必須でしょうか。

G2：
自動機能使います！
調整が必要かどうかはボーンの入り方次第かなと思います。
棒状のメッシュで、棒に沿ってボーンが入っているような場合は自動
メッシュだけでもほとんど問題ないですが、髪のメッシュなどで頭皮に
固定したい髪の根本部分などはheadボーンの位置が遠かったりする
ので手動で設定します。
Artner:
基本的には、自動機能で良いと思います。
もっと滑らかに曲げたい際はウエイトにスムーズかけたり、どうしても
思ったように曲がらない場合は、メッシュを切り直して手動で微調整し
たりしています。

～質問～
Spine用にPhotoshopから
画像を書き出す際に
スクリプト（PhotoshopToSpine）とア
セット生成の二つの方法がありますが、
どちらを使用した方がいいというのはあり
ますか？

G2：
Spineインポート用のJSONを生成できるという利点は
PhotoshopToSpineにしかないので、こちらを使用した方が良いかなと
思います。ただアセット生成ならマスク範囲によってトリミング範囲を決
められるという利点もあるので、基本的にPhotoshopToSpine使いつ
つ、もし余白のサイズを変えたいものがあればそれだけアセット生成で
書き出すのが良いのではないかと思います。
Artner:
普段はスクリプト（PhotoshopToSpine）を使用しています。

～質問～
Unity+Spineで使用しているとSpineアッ
プデートが入り「Spine素材を吐き出し直
してください」みたいなことがあると思いま
す。そういう場合どうしていますか。すべ
て手動で吐き出し直ししかないでしょうか
……

G2：
エンジニアに頼んでスクリプトやAutomatorを組んで自動化してもらう
と良いと思います！
Spine公式にエクスポートのスクリプトの書き方は解説されています。
http://ja.esotericsoftware.com/spine-export#%E3%82%B3%E3%8
3%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E
3%83%B3
↑は日本語ページですが、英語ページを見た方がもっとたくさんのコマ
ンドが載っています。
http://en.esotericsoftware.com/spine-export#Command-line

～質問～
複雑な造形のテクスチャ（S字型）などに
メッシュを打って揺らさなければならない
時があると思います。
その際、どうしてもテクスチャが崩れてし
まうのですが、どのように対応されていま
すか？

G2：
S字などの場合は頂点数をケチらないようにするしかないかなと思いま
す。ただ、揺れものなのであれば根本は頂点を少なくし、先端ほど頂
点数が多く、ボーンも細かい状態にすれば比較的制御しやすくなるの
ではないかと思います。
Artner:
テクスチャが崩れるギリギリの範囲で揺れるようにしています。
どうしても、もっと動かしたい場合は、差分の絵を用意して切り替えで
対応しています。
まだ試したことはないですが、公式サイトで紹介している、真っ直ぐな
絵を用意して、そこから形を作るやり方も有効かもしれません。

～質問～
アニメ作成する際に
fpsはどうしてますか？

G2：
エンジニアと相談して決定しています。基本的に60FPSにすることが
多いです。(その方がUnityの再生速度とうまくかみ合うので)
Artner:
基本的にデフォルトの30fpsで作成しています。
クライアントからもfpsの指定をされたことも無かったので、あまり気に
したことはなかったです。

～質問～
spine 用の素体やカタログは
ありますか？

G2：
公式が「アセットパック」を販売してますので、素体ならこのあたりが使
えるかと…！
https://ja.esotericsoftware.com/spine-asset-packs
Spineデータを販売している人は、海外ならたまに見かけます。
この方とかいろいろ販売されています！
https://www.gamedevmarket.net/member/rothana/
https://www.artstation.com/daole/store

その他：
配信中の内容に代わりに答えてくださった方がいました。
有益な情報、誠にありがとうございます！
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
3.8では試していないですが、3.7ならJSONエクスポート
することで画像の絶対値のサイズが失われるので、フォ
ルダ内の画像を比率を維持した大きいものに置き換えた
状態でJSONインポートすると解像度を上げることができ
ました

資料は以上になります！
ご覧いただき、誠にありがとうございました。
-------------------------------------------------------------------------------------
Spiners MeetUpのPeatixグループ
https://spinersmeetup.peatix.com/
日本人Spineアニメーター向けのDiscordコミュニティを作りました！以
下の招待URLからご参加ください。
https://discord.gg/ae5aHK9

Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介

Semelhante a Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介 (20)

Spiners MeetUp vol.1 アニメーション制作フロー比較と実例紹介