SpriteStudioを使って手書きアニメを作る -MusicCh背景動画編-
echigoya cyberと申します。普段はココナラを中心にLINEアニメーションスタンプを受託しています。仕事のご相談は↓まで。何かお仕事ください。
今回は、youtube music ch用の背景動画を作成した際にSpriteStudioを活用した事例を紹介します。完成動画は下記になります(ココナラでご発注いただきました。ありがとうございました)。
今回は、人物アニメは最初から完全に手書きし、それ以外の背景・小物をすべてSpriteSdutioのキャラクターアニメで制作、また、人物との合成もSpriteStudio上で行いました。
実は前回のMVのひとつ前に受注したもので、アニメーションの品質については、記事の順番に逆行してどんどん低下しております…。
1枚絵を元にパーツ分け
当初提示されたリクエスト内容は、下記の参考イラスト1枚と、この人物がくつろいでいる動き・適当な背景の動きを加えて、概ね2分程度の尺でループアニメーションしてほしいというものでした。
これを元に、大まかに下記の要素でイラストを分割することにしました。
人物+人物周辺(椅子/机/コーヒーカップ/音楽プレイヤー)
室内壁面
窓の外
人物周辺がかなり混みあっていますが、人物以外は基本的にコピペとします。ただ、動きによって隠れる部分が変化していく上に前後関係も複雑になるので、あえて別パーツにせずまとめることにしました。
実際に分割したものが下記になります。
人物アニメーションの作画
ここはSpriteStudioがほぼ無関係なので、あまり深く解説する必要はないかもしれませんが、折角なので自分なりの手書きアニメ制作に関する概要を解説します。
まずは人物の動きのバリエーションを考えました。長尺のためバリエーションが少ないと違和感が出ますが、作画コスト上あまり大量に準備は難しいので、とりあえず下記の種類があれば間が持つかと考えました。
頬杖～正面
正面で待つ
コーヒーを飲む
髪をかき上げる
正面向きで少し違う姿勢
これに対して、まずは各動作の一番キモとなる瞬間を考えてキーフレーム(イラスト)とすることにしました。
後はこのキーフレームに対して、更に中割のキーフレームを設定し、更に最終的な個別のフレームに割っていくというのが大まかな流れになります。
フレームレートの決定
前回・前々回では、実際のアニメ作成の前に、音楽と同期して基本のフレームレートを確認・設定していましたが、今回は音楽との同期は不要なので、人物の動きと作画コストからフレームレートを決めました。ただし、当時は最終的に色々フレームレート調整しそうな気配があり、一旦設定上は30fpsと細かめに設定しました。これに対して、例えば人物は7~8fps(30fpsで約4フレームに1回動く)としています。
これに関しては、人物とそれ以外の要素(背景など)を別アニメとして作っていくため、可能な限り各アニメの再生時間の公倍数(公約数?)が一致しやすいように考える必要があります。
特に、今回は音楽プレイヤーの動きが最も規則的且つ常時行うアニメとなるので、このアニメとの尺を合わせやすいように調整すると、最後の合わせこみが楽になります。
正面<->頬杖のアニメ
参考イラストの状態から正面に向く動き、及びその逆を作成します。
作画時にはCLIP STUDIOのアニメーション関連機能を活用しました。前フレームとの差分はオニオンスキンを使い、アニメーションもCLIP STUDIO上のアニメーション機能で確認しています。
ラフの動きは以下のような物です。特に顔がかなり大きく変化するので、あまり様々な角度の顔の作画に慣れていない自分にとっては結構な鬼門でした(中間の絵も微妙なものが混じっている)。
特に開始・終了にフレームを追加している
紹介用に連続で動かしているのでせわしなく感じるが、本番では静止時間が入るため問題ない。
動きのポイントとしては、開始～終了付近のフレームを多めにして速度を緩めるようにしています。例えば普通に等速で手を下すと「バタン!」と机を叩く感じになってしまいます。本来は、最初に手首付近が着地→その後ゆっくり掌が着地というプロセスにすると綺麗ですが、ちょっと作画コストの関係から、同じ姿勢をベースにフレームを増やす手抜きをしています。
このポイントは、コーヒーを飲む等他の動きでも同様に重要となります。
また、省コストで動きにバリエーションをつけるため、頬杖の状態は微妙に角度を変えた2パターンを準備して、その中割1枚も含めて+2枚の作画で頬杖を2パターンに増やしました。
(画質が荒いのはあまりにファイルが巨大なため調整の結果)
正面向きのアニメ
この状態では、退屈そうに待つ表現として、瞬き・手の動きを加えることにしました。動かす箇所をなるべく限定することで作画コストも削減できます。
「正面向き(静止)」「瞬き」「指を動かす」の3種類で個別にアニメを作り、時系列でランダムに並べて待つ感じを出すようにしました。
…とここまで説明してきて、リズムの動きが実際に使われていない!?となったんですが、当時の取引をよくよく見直してみると、BGMが移り変わるのでリズムが合わなくなるから入れないようにというリクエストでした(制作ミスで無く一安心)
また、頬杖と同じく正面の姿勢も角度が異なる2パターンを準備してバリエーションを増やしました。この時の体を傾けた方の動きは、更に髪をかき上げる動作につなげることにしました。
コーヒーを飲むアニメ
この動作は、更にキーフレームとして「コーヒーカップを持つ」「カップを口に持って行って当てる」「飲む」という動きに分割するように考えました。
この辺、実際に自分で動きを真似してみて、いわゆるタメが入る瞬間を確認することで、適切なキーフレームが分かります。
先ほどの動きのポイントで触れたように、動作を単純に等速で割ってしまうと、カップを運ぶ動作で初速から勢いがつきすぎて以下にもコーヒーをこぼしそうに見えてしまうなどの問題があるので、開始・終了はゆっくりにしたり、全体の尺として違和感がない早さ(フレーム数)を作るようにしました。
また、往路・復路も使いまわすと違和感が出る瞬間があるので、アニメーションを再生しながら流用できるフレームと新規作画フレームを切り分けていきました。
飲むときはカップと口の接地点を軸にする
飲む動きは、動作の支点がカップと口の接地点になるので、そこを軸にコップを傾けるようにします。カップの傾きも、あまり深くするとグイ飲みしている感が出るので、あくまで一口飲む程度に抑えます。
その他、表現のポイントとしては女性らしさを強調するため、カップを両手で持たせたり手指の形を整えるといったことを意識しています。
カップの中身については、隠しても違和感が出ないので作画コスト削減のために見えない角度で作画しました。中身を描くとなると液体の表現まで必要になってしまうので、ちょっと大変になります。
髪をかき上げるアニメ
この動作は、コーヒーと同じく「髪に手をかける」→「かき上げる」というキーフレームに割るようにしました。また、その前の動きとして「髪が顔にかかる」という動きも作成します。この動きは、正面向きで作成した「体を傾ける」→「その余波で髪の房が耳から外れる」という流れとすることにします。
髪の毛の表現・動きが非常に難しい…
髪をかき上げる動きは、コーヒーと比べるとある程度動きは速めでラフに行っても違和感がないので、その方向で作成しました。
髪が顔にかかる動きですが、どうしても自然な感じにならずに結構苦慮しましたイラストの画風がアニメ調ではなくもうちょっと描きこんだものなので、そこにアニメ調な髪の描写を混ぜると違和感が出そうなのと、髪の動き自体も「耳から外れて垂れてくる」という複雑なものでイメージもしにくかったので、何とか書きましたがかなり微妙なものになっています。
以上で人物の作画はすべて完了です。作成した人物の各フレームは、個別に静止画として出力し、SpriteStudio側に取り込みます。
PSDで取り込んでもよかったかもしれない
人物以外のアニメーション
人物のアニメが出来上がったので、それ以外に動かす部分を準備していきます。今回は人物以外に動かす要素として、下記3点を作成することにしました。
音楽プレイヤーの画面
コーヒーの湯気
室外の木のざわめき
音楽プレイヤーの画面
音楽プレイヤーのアニメは、画面上の音符アイコンが一定のリズムではねる動作の繰り返しを考えました。ここはフレームレート高めで、動きにも規則性を出し、機械的・無機質といった印象が出るようにしています。
実際の画面では三次元的な回転(というかパース?)がかかっているので、実際に表示する音符パーツでアニメを作った後、その親パーツとなる空のパーツに音符を子パーツとして組み込み、それをパーツ回転(X軸回転)させて、背景側のプレイヤーの位置にはめ込みました。
この手法は、他にも斜めアングルで走る車のホイール回転をする場合などで、真円で書いたタイヤのアニメを親パーツでパースをかけてゆがませるといった用途に使用できます。
プレイヤーのアニメはこの1パターンだけとします。
コーヒーの湯気
これは、湯気を示す1本筋のパーツを用意して、それをシェーダの「波」で揺らめく方法で作成しました。
揺らめきに多少緩急をつける
ポイントとしては、音楽プレイヤーと異なり揺らぎが規則的過ぎると違和感が出るので、適度な緩急を入れるようにします。
フレームレートは比較的高めにしますが、動きはかなりゆっくりにします。
ちなみに、シェーダの「波」を使うときの注意ですが、フリー公開されているシェーダでは、波の幅が大きくなるとパーツが見切れたり、元画像で隣接する別パーツの一部が入ってしまう不都合があるので、パーツ単体だけで別のPSDとするか、元画像の周辺に余白を作ったりすることをお勧めします。
木のざわめき
こちらは、かなりラフに描いた木のパーツをメッシュ化し、幹と枝にボーンを入れていきます。
動きとしては、風に揺らぐ感じで、適当に緩急を付けて揺らしていきます。こちらも、常に揺れていると不自然さが出るので、適度に無風状態も挟みます。
アニメーションの統合
ここまで作成した各要素のアニメを一つのアニメーションデータに統合します(mix.ssae)。SpriteStudioのUIの都合で、一度に長尺を作ると操作しづらいので、作成したアニメーションを適当に再生するものを数パターン作成し、最後にそれをシーケンス機能で順番につなげて出力することにしました。
人物側の動作の並び・順番等は、なるべくランダム感が出るように、この時はexcelを使って適当に出力させて考えました。
かなり長尺かつ変化の少ない(背景動画として違和感が出ない)ものにするため、人物は動作間にかなり長い静止フレームを入れています。その間も周辺・背景には適度な動きが入るようにします。
注意として、冒頭のフレームレート合わせの時に触れたように、各アニメーションの最初と最後のフレームが、前後のアニメーションと同じになるようにする必要があります(こうしないとアニメが切り替わった際に前後の動きがつながらない)。
また、コーヒーを飲む動作については、「湯気の追従(ただしカップを持ち上げている間は基本フェードアウト)」「背景側のカップの非表示調整」等も必要です。
最後に、作成したシーケンスを動画でレンダリングして完成です。
本案件では、人物がアニメ塗りで無い点が、制作上のネックとなった感はあります。参考イラストをベースにうまくそれに近い絵柄に落とし込むか、最初に多少の絵柄変更をクライアントに相談した方がよかったかもしれません(ただ、主に服の陰影を除くとほぼアニメ塗りのため、前者のアプローチが含まれているかと思われる)。
次回予告
長く続いた手書きアニメシリーズですが、自分の作例としては、一旦めぼしいものは以上になります。もう1件小さいワンショットのアニメをこれ以前に作成しているので、そちらを紹介するかもしれません(SpriteStudioは未使用)。
とりあえず、これからは本筋として考えていた、SpriteStudioによるアニメーションスタンプ作成のフローを詳しく説明していこうと思います。ただ、サンプルデータなどの準備に若干時間がかかるかもしれません(1か月くらい?)
プロジェクトデータ
今回のSpriteSdutio用データを配布しようとしたら、大きすぎて?(87MB)うまくいかないような感じだったので、追々公開できそうなときに出すことにします。