これから始めるSpine制作フロー
どうもみなさん、こんにちは。
今回はSpineを使用したアニメーション制作のワークフローを簡単に解説していきます。
※Spineとは何か、といった話については前回記事をご確認いただければと思います。
では早速、Spineでのワークフローについてですが、基本的に他のアニメーションソフトと同様に、
①デザインや仕様の決定
②素材の準備※Phoshopなどの外部ソフト
③素材の読み込み/セットアップ
④アニメーション付け
⑤データの書き出し
という流れになります。
それぞれがどういった工程なのかについてはこれから順に解説していきたいと思います。
※厳密には①②はSpine外での作業になりますが、今回は含めて解説していきます。
①デザインや仕様の決定
まずは仕様の決定をする必要があります。
仕様というと少々固く感じますが、やることは基本的に３つです。
・キャラクターのデザイン
・絵コンテの作成
・制作時の約束事
この３つです。
キャラクターのデザインは当然ですが必要です。
もっともすでにデザインが用意されていて、それを活用していくなどであれば話は別になります。
絵コンテの作成はアニメーションを作るうえで作っておいて損はありません。
共同での制作ならば作りたいアニメーションのイメージを共有するために必要になるでしょう。
また、個人制作であっても、イメージを形にしておくことでスムーズに制作を進めていきやすくなります。
また、絵が苦手であるなら字コンテ(文章でのコンテ)でもいいです。
要は頭の中だけでなく、どんな形でもいいので、一度形にしておくことが重要というわけです。
最後の制作時の約束事に関しては、制作する際にこういうことをしてください、あるいはこういうことはしないでください、といったものです。
お仕事で制作するとなると、ゲームに実装するためにボーンやパーツに制限があったりしますので、そういうことをまとめて決めておく必要があります。
逆に個人制作の場合、後々流用したい、汎用的にデータを扱いたいなどの事情が特にないのなら、あまり気にする必要はないでしょう。
②素材の準備
仕様が定まったなら、次は素材の準備です。
Spineを含むスプライトアニメーションは、手書きのアニメーションとは違い、元となる素材があってはじめて成立するものです。
ここではイラスト自体の用意については割愛し、パーツ分けという工程とパーツの書き出しについて軽く話していきます。
パーツ分けについて
例えば前回記事に載せたこちらのスライムもどきですが、
こちら本体部分と周囲を浮遊している球体が別のパーツに分かれていそうだな、というのは何となくわかるかと思われます。
では、実際にどのように分けられているのか。
これは、
↑画像左から、
・ベースとなる円形パーツ
・べースに乗算で重ねる影パーツ
・ベースにスクリーンで重ねるハイライトパーツ
・両目パーツ
・輪郭線パーツ
というパーツに分けられています。
これらを順に重ねて表示したものが本体部分になります。
ではなぜ、このように分ける必要があったのかを考えていきましょう。
まず両目を別パーツとして分けた理由。
これは両目を除くことで、球体部分を浮遊パーツに流用できるようにするためです。
そう、周囲の浮遊している大中小の球体は、本体から両目を除いたものをSpine上で複製した上で大きさだけ変えたものなのです。
そうすることで、素材データは本体分のみでまかなうことができ、データ容量の削減を行うことができるのです。
では本体の球体部分をさらに四つに分けた理由は何なのか。
これは変形させることになった場合の手間を削減するためです。
ハイライトと影、輪郭線を分けるとどのような楽ができるようになるのか。
それは、ハイライトと影の位置や形状を変えるのがとても楽になるのです。
もし、ベースの円形パーツにすべてまとめて１つのパーツにしてしまえば、ハイライトの位置や影の位置をアニメーションさせたい、となった際に手間がかかってしまいます。
今回はスライムを例にしましたが、これがヒトのキャラクターであったなら、腕は手首やひじ、肩といった部分で分けると動かしやすくなりますし、また髪の毛も別パーツに分けておけば、大きくきれいになびかせることができるようになるでしょう。
つまり、パーツ分けがなぜ必要なのかというと、
そのイラストを動かしやすくするために分ける、これに尽きるでしょう。
実際に分ける際の方法やコツなどは今回は割愛します。
それについてはまた別の記事でご紹介することになるかと思います。
パーツ書き出しについて
パーツの書き出しについては大まかに分けると２種類あります。
それは、
スクリプトを使用した自動書き出し と １つ１つのパーツを手動で書き出していく というものです。
前者のメリットは書き出しからSpineへの読み込みまでがとにかく楽であることです。
スクリプトを使用すると指定したパーツをすべて自動で書き出してくれる他、JSONファイルと呼ばれるパーツの描画順序と各パーツの配置位置などといった情報が記録されたデータを書き出すことで可能です。
JSONファイルがあるとSpineにパーツを読み込んだ際にすべて自動で配置してくれるので、とても楽ができるのです。
では後者の方法はどうなのかというと、
正直なところメリットよりも圧倒的にデメリットが多いです。
まず手動でパーツを書き出していく都合上やはり手間はかかってしまう上、JSONファイルがないので、Spineにパーツを読み込んだあと、すべて手作業で描画順序を設定していき、各パーツの配置も調整していく必要があるのです。
ただメリットもあり、書き出す際に発生する縮小やトリミングといった内容が、手動の方がきれいにできあがります。
なので、使用できるのならまずスクリプトを使用し、もし一部パーツで不良なものが見つかれば個別にその部分だけ手動で書き出していく...というのがよいと思います。
③素材の読み込み/セットアップ
素材の読み込み(データインポート)
②で素材を用意できたらついにSpineでの作業が始まります。
まずは、Spineを起動し、②で用意したJSONファイルをSpineのビューにドラッグ＆ドロップします。
すると、データインポートのウィンドウが表示され、あとは各項目をチェックしてインポートができます。
セットアップ
インポートが終わったら次はセットアップ工程に入っていきます。
この工程をこと細かに説明していくと非常に長くなってしまうので、それについてはこの記事では割愛します。
おおよその工程のみ挙げていくと、
1.ボーンの組み上げ
2.メッシュとウェイトの設定
3.コンストレイントの設定
になります。
1.ボーンの組み上げ
ボーンを作成して組み上げていく工程です。
インポートしたばかりの段階では大本となるrootボーン直下に全パーツがある状態です。
当然それではアニメーションを制作するのはとても困難です。
そのため、ボーンを作成し動かしやすい形を作り上げるのがこの工程になります。
2.メッシュとウェイトの設定
この工程はクオリティを上げるのにとても重要な工程になります。
パーツはボーンだけでは移動や回転、スケールといった基本的なアニメーションしかできません。
しかしこの工程を経ることでパーツの形状を変形させることが可能となります。
端的に言うなら、髪の毛のようなパーツを曲げたりして揺らせるようになると思っていただければよいです。
3.コンストレイントの設定
これは簡単に言うとアニメーションさせやすくするオプションを作る工程です。
そのため、この工程はクオリティには直結せず、後の手間を減らすための作業というものです。
３つ、４つのボーンを１つ１つ動かしてアニメーションさせるよりも、それらを１つのボーンで一気に制御できたらとても楽だと思いませんでしょうか？
この工程はそれを実現するためのものになります。
簡単にまとめると、セットアップとは上記３つの工程をまとめたものをいいます。
このセットアップを行うことで、キャラクターをアニメーションさせることができるようになります。
④アニメーション付け
セットアップが終わったら、ついにアニメーションを付けていきます。
セットアップ同様に、この工程をこと細かに説明していくと非常に長くなってしまうので、それについてはこの記事では割愛します。
おおよその工程のみ挙げていくと、
1.キーポーズ作成
2.グラフ設定
3.揺れもの作成
4.エフェクトの作成
になります。
1.キーポーズ作成
キーポーズといってもよくわからない方もいるかもしれませんので、そういった方向けに説明しますと、アニメーション…その動きにおいて重要なポーズのことを指します。
屈伸運動を思い浮かべてください。
屈伸運動はかがんだ状態と伸びをした状態を交互に繰りかえす動きのことをいいますが、このかがんだポーズと伸びをしたポーズがキーポーズと呼ばれるものになります。
別の言い方をすると、動きを説明するうえで最低限必要なポーズとも言えます。
他の例でいうと手を振る動きがあったとすると、その動きは手を右に振り切った状態から左に振り切った状態に移るという動きです。
この場合はそれぞれ太字にしたポーズがキーポーズとなります。
アニメーション付けは、まずこのキーポーズを作成します。
2.グラフ設定
キーポーズができたらグラフを設定します。
Spineにはキーポーズとキーポーズの間にはグラフ(補間曲線)というものがあり、キーとキーの間を自動で補間してくれます。
しかし、初期状態ではすべてがリニアと呼ばれる、一定の速度で動く補間になっており、この状態では動きが機械的に見えてしまいます。
それを解決するための術の１つがグラフ設定になります。
グラフの形状を変えることで、動きに抑揚をつけて、より生き生きとした動きに見せるのです。
3.揺れもの作成
キーポーズ、グラフと来て、最後に髪やスカートなどといった揺れものになります。
こちらはキーポーズと並行してつけていってもよいのですが、揺れものは胴体の動きに追従して動くものであるため、先にキーポーズを作成しておいたほうが設定しやすいでしょう。
他にもデザインなどによってはエフェクトのアニメーションなども存在するのですが、基本となる工程としては上記３つになるでしょう。
アニメーションが作成できれば、あとはそれを書き出すだけです。
⑤データの書き出し
制作したアニメーションを書き出します。
書き出し方法は大きく分けて３つです。
1.画像書き出し
2.データ書き出し
3.動画書き出し
になります。
画像書き出しは特定の１フレーム、つまりポーズを１枚画像として書き出したり、あるいは連番画像というすべてのフレームを１枚１枚書き出していくかの２通りになります。
データ書き出しは、主にゲームなどに実装する際に使用される形式になります。
JSONやバイナリといったファイル形式で書き出します。
動画書き出しは、制作したアニメーションを１つの動画として書き出す方法になります。
これらから書き出し方法を選択して書き出します。
例外もありますが基本的には、
以上の①から⑤までの工程を経て、Spineアニメーションは制作されていきます。
初めてSpineでアニメーションを制作していく人はこのフローに沿って、まずは少しずつ進めていくのをおススメします。
今回の記事はここまでになります！
─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
オンライン学習ツール「Udemy」でSpine初心者卒業カリキュラムが販売中です。
Spine未経験の人でも分かりやすく、基本操作からアニメーション制作方法まで学べます。
SDキャラクターの素材を練習用に用意しておりますので、手を動かして実践しながら
学んでいくことができます！
もっと詳しく、動画でよりわかりやすいSpine講座を見たい方はコチラ
─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─━─
この記事が気に入ったらサポートをしてみませんか？