Game Graphic Design Advent Calendar 2019の12月18日分の記事です。
※自由研究を眺める感覚で読んでもらえると幸いです。
前置き
Spineを使ってアニメーションが作れるようになれば動きのあるUIの制作にも
役立つのではないかと私は思ったので、今回『動くイケメンバナー』にチャレンジしました。
学んだことを、かいつまんでまとめています。作り方の解説ではありません。
こういうのつくりたい！を描いたラフ
【Spine】
Spineで2Dイラストのアニメーションを作る手順は過去記事に書いているので
記事 ① イラストのパーツ分け/Spine上でデータを配置する
記事 ② シンプルなアニメーションを作る
興味のある方はご確認ください。今回は5つのアニメーションを作成しました。
今回はアニメーション作成後、動画データとして書き出す方法をご紹介します。
アニメーションデータの書き出し
メニュー>エクスポート>今回は以下の設定で書き出しました。
なぜビデオの形式をMOVにしたのか
→エンコーディング：背景『透明』にして書き出せるため。
【After Effects】
After Effectsをちゃんと使ったのは今回初めてだったので、
初期設定のままだと自動保存の期間が20分に１回(私の場合)になっていて何度か絶望
編集>環境設定>自動保存>保存の間隔（５分）とかにして、自動保存の場所を
ユーザー定義の場所に設定する→自動保存されるデータの場所を1本化。
(プロジェクトフォルダがごちゃつかなくて済む)
カメラの設定
キャラクターの顔アップ～<引きの部分を作りました。
上記のヌルを3Dレイヤーに変更する際3Dレイヤーのボタンが見つからずに困ったので、
レイヤーの左下に3つアイコンがあるので、一番左端にあるものを押すと、隠れている項目がずらっと表示されます。
AEはこういった隠しコマンドみたいなのが多いなぁ・・・と個人的に思いました。
使ったエフェクト（名称のみ）
・キラキラ: CC Star Burst+グロー
動画を書き出す
私のやりたかったこと：After Effectsで、MP4の書き出し
ググって、ファイル>書き出し>レンダーキューに追加...の手順だと、
形式:MP4ありませんでした。
プリセットブラウザで、Youtube～Twitterなど、動画をUPしたい媒体を選択>右上にある再生ボタンを押す
完成したバナー動画
個人的にこだわった部分
・キャラの髪の毛フワフワ
・呼吸している動きを前よりも違和感なく作れた点
・中央から画面右側に移動するときに目元が赤く光っているようなエフェクトをつけた
・「鉱石男子ポストカード」テキストが表示した際に出るキラキラエフェクト
・腕の上げ/下げの動作をなるべく自然に見えるように努力
感想
イラスト作成からバナーデザイン、アニメーション作成、動画作成まで一人でやってみて、
大変でした。大変だったけど、ひと段落着いたときの達成感半端なかったです。
初見のAfter Effectsでは、エフェクトの項目が多すぎて思わず
目をそっと閉じたことが何度かありました。それでも成果物70点くらいのものはできたと
自分では思っているので、これからも地道に勉強続けます。
