こんにちは。意匠部のちゃんあさです！
キン肉マンマッスルショットというソーシャルゲームのデザイナーをしております。
今回はキャンペーンの一環で、静止画のバナーではなく動画を制作したので、その制作についてお話しさせていただきますね。
ソフトはAfter Effects（以下AE）を使用しました。
エイプリルフール企画は「（現代のゲームである）マッスルショットがレトロゲーム風のドット絵になっちゃった！」という主旨のものだったので、動きはレトロゲーム風に非常にシンプルなものにしました。
まずは、動かすためのキャラクターのイラストや、背景画像、セリフなどのパーツをPhotoshopで制作します。
どんな動きにしたいか、そのためにはどんなパーツが必要かを考えながら作っていきます。
キャラクターイラストは動かしたいパーツに分けて、さらに下のレイヤーになるものは描き足しなどが必要です。
今回はシンプルな動きだったので、ボディと通常頭部、まばたきのための目を瞑った頭部、を用意しました。
まばたきを入れると、いきいきしてくるので、キャラクターアニメーションを作るときは是非やってみてください！
パチ、パチと一定間隔のまばたきと、パチパチと連続で繰り返すもの、長めにまぶたを閉じるものなどを混ぜると、感情表現が豊かになります。
さて、今回は「プリコンポーズ」というタイムラインを入れ子にする機能を使用しました。 Photoshopでいうスマートオブジェクトのような機能です。
テキスト部分は、マスクの動きとテキストが上がっていく動きをつけてプリコンポーズし、マスクをかけています。
キャラクターは、まばたきをするアニメーションをプリコンして、さらに頭が上下するアニメーションを付けるという二重の入れ子構造です。
シンプルな動きであればプリコンしなくても作れる場合もありますが、キーフレームが複雑になったり、後から修正する場合に手間がかかったりしますので、その辺りを考えながらレイヤー構造を作っていきましょう！
小さな動きを入れ子(プリコン)にして、大きな動きはメインのレイヤーでつけると、動きの破綻やレイヤーの修正が少なくなります！
AEは音のファイルを乗せることもできるので、仕上げにピコピコ音の新曲を合わせます。 音量を調整し、動画に書き出して完成です！
動画は音の効果も重要ですね。音楽がシンプルな動きをキュートに見せてくれます。
完成した動画はこちらから見られます！（再生する際は音量にご注意くださいね）
マッスルショット エイプリルフールバナー
最後まで読んでくださってありがとうございました！
8周年を迎えたマッスルショットをぜひ遊んでみてくださいね～！
