はじめまして！
アメーバゲーム部門でディベロッパーをしております、なるげと申します。
現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。
ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。
今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。
このガールは、CSS3アニメーションを使用して動かしています。
ガールの動きは、プランナーさんやイラストレーターさんと相談して決めていきます。
場面はチュートリアルなので、複雑な動きはせず、
「息遣いをしつつ、静かに頷く」という動きをつけることになりました。
3年生の先輩ガールなので、落ち着いた印象の、穏やかな動きをイメージです。
このガールをpsdからパーツごとに書き出し、スプライト化したものが以下です。
これらのパーツを<div>タグの背景にして、<div>タグの組み合わせでアニメーションさせます。
チュートリアルガールの構成は以下です。
入り組んでいるように見えますが、図解すると下のようになります。
ここでは、髪（サイドテール）のアニメを例にして、お話したいと思います。
髪の部分のCSSは以下です。
CSSアニメの基本の説明は省いてしまいますが、複雑なことは特にしていません。
アニメ全体の長さは、ゆったりとした動きを出したかったので4秒(4s)にし、infiniteで動きを繰り返すようにしています。
あとはタイムラインを強く意識して、@Keyframesでアニメの進行に合わせた動きをつけていくだけです。
サイドテールはゆらゆらと左右に揺れるだけですので、rotate(回転)だけ設定しました。
ここで重要なのは、
です。
これは回転の原点を決めています。
これを定めないと、中心を原点として回転してしまい、変な動きになってしまいます。
髪自体のゆらゆらする動き＋頭全体の頷く動きが必要です。
この動きを出すにはアニメーションを「入れ子」の構成にする必要があります。
hair部分を見てもらうとわかるのですが、
と、hair_ANIMEの上に、頭全体の動きをつけるhead_FRAME_ANIMEというclassがあるのがわかります。
髪自体には、揺れる動きのみをつけ、
頷く動きは頭全体を動かすdiv（サイドテール、頭、瞑った目を含めたdiv）につけます。
冒頭で少し触れましたが、「フレンダリアと魔法の指輪」というゲームではモンスターが毎月たくさん登場していました。
今年3月にクローズしてしまったので、今は見れないのですが、
ズラリ…と並ぶすべてのモンスターごとにユニークな動きがついていました。
≫フレンダリア モンスターサンプル≪
（とても滑らかなアニメーションなのでスマートフォンでもご覧ください）
これらをイチから手作業でやるとなるととてつもなく大変ですが、実際にゲームで制作する際には、運用を考えて一部ツールで自動化していました。
今回はフローのみに触れる形となってしまいましたが、また機会があればご紹介したいと思います。
アニメーションは本当に奥深く、
実際に動かしてみたら、なーーんか不自然…
流れが"平たん"になってしまって面白みに欠ける…
などなど毎回試行錯誤の連続ですが、イメージ通りに動いた時の嬉しさは格別です！
私自身、今後も日常の些細な動きにも注目しつつ、新たなアウトプットができるよう精進していきます。
最後までお読みいただきありがとうございました。m(_ _)m
ぷちガールちゃんもよろしくね♪ ≫ガールフレンド（仮）≪
アメーバゲーム部門でディベロッパーをしております、なるげと申します。
現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。
ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。
今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。
ガールフレンド（仮）とは
「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲームです。
チュートリアルガールのアニメーション
今回ご紹介するのは、現在チュートリアルで登場しているガールです。このガールは、CSS3アニメーションを使用して動かしています。
百聞は一見に如かず！！ ということで
ガールの動きは、プランナーさんやイラストレーターさんと相談して決めていきます。
場面はチュートリアルなので、複雑な動きはせず、
「息遣いをしつつ、静かに頷く」という動きをつけることになりました。
3年生の先輩ガールなので、落ち着いた印象の、穏やかな動きをイメージです。
このガールをpsdからパーツごとに書き出し、スプライト化したものが以下です。
これらのパーツを<div>タグの背景にして、<div>タグの組み合わせでアニメーションさせます。
チュートリアルガールの構成は以下です。
<div class="naviko play">
<div class="all_FRAME_ANIME"> ←ガール全体を動かすアニメ
<div class="body_ANIME"> ←体を動かすアニメ
<div class="body"></div> ←体パーツ
</div>
<div class="head_FRAME_ANIME"> ←頭全体を動かすアニメ
<div class="hair_ANIME"> ←髪のアニメ
<div class="hair"></div> ←髪パーツ
</div>
<div class="head"></div> ←頭パーツ
<div class="eye_blink_ANIME"> ←瞬きのアニメ
<div class="eye_blink"></div> ←瞑った目のパーツ
</div>
</div>
</div>
</div>
入り組んでいるように見えますが、図解すると下のようになります。
下準備ができたので、いよいよ動きをつけていきます！
パーツに動きをつける
1つのパーツの動き方がわかれば、あとは応用させるだけですのでここでは、髪（サイドテール）のアニメを例にして、お話したいと思います。
髪の部分のCSSは以下です。
/* 髪 */
.naviko .hair{
position: absolute;
top: 40px;
left: 3px;
width: 82px;
height: 141px;
background-image: url("girl/sptite.png");
background-size: 335px 431px;
background-position: -200px -150px;
}
.naviko.play .hair_ANIME{
-webkit-transform-origin: 52px 54px;
-webkit-animation: hair_ANIME 4s ease 0 infinite;
}
@-webkit-keyframes hair_ANIME{
0%{ -webkit-transform:rotate(0deg); }
5%{ -webkit-transform:rotate(0deg); }
30%{ -webkit-transform:rotate(-4deg); }
55%{ -webkit-transform:rotate(2deg); }
100%{ -webkit-transform:rotate(0deg); }
}
CSSアニメの基本の説明は省いてしまいますが、複雑なことは特にしていません。
アニメ全体の長さは、ゆったりとした動きを出したかったので4秒(4s)にし、infiniteで動きを繰り返すようにしています。
あとはタイムラインを強く意識して、@Keyframesでアニメの進行に合わせた動きをつけていくだけです。
サイドテールはゆらゆらと左右に揺れるだけですので、rotate(回転)だけ設定しました。
ここで重要なのは、
-webkit-transform-origin: 52px 54px;です。
これは回転の原点を決めています。
これを定めないと、中心を原点として回転してしまい、変な動きになってしまいます。
今回の場合、ちょうど髪の結び目あたりを原点として揺らしました。
「入れ子」のアニメ
»完成の動き« を一度見てもらうとわかるのですが、サイドテールは髪自体のゆらゆらする動き＋頭全体の頷く動きが必要です。
この動きを出すにはアニメーションを「入れ子」の構成にする必要があります。
hair部分を見てもらうとわかるのですが、
<div class="head_FRAME_ANIME"> ←頭全体を動かすアニメ
<div class="hair_ANIME"> ←髪のアニメ
<div class="hair"></div> ←髪パーツ
</div>
…略…
</div>
と、hair_ANIMEの上に、頭全体の動きをつけるhead_FRAME_ANIMEというclassがあるのがわかります。
髪自体には、揺れる動きのみをつけ、
頷く動きは頭全体を動かすdiv（サイドテール、頭、瞑った目を含めたdiv）につけます。
これで、髪自体が揺れつつ頭も動かすことができました！
この作りは、目の瞬きでも同様です。
この作りは、目の瞬きでも同様です。
このように「頭全体のアニメーションの中に、さらに髪が揺れるアニメを入れ込む」といったような階層構造を持たせる（入れ子にする）と、複雑な動きも表現できます。
さいごに
今回はrotate(回転)のみを使いましたが、translate(移動)やscale(拡縮)、opacity(不透明度)を適宜組み合わせていくことで、さらに複雑な動きもつくれます。
冒頭で少し触れましたが、「フレンダリアと魔法の指輪」というゲームではモンスターが毎月たくさん登場していました。
今年3月にクローズしてしまったので、今は見れないのですが、
ズラリ…と並ぶすべてのモンスターごとにユニークな動きがついていました。
≫フレンダリア モンスターサンプル≪
（とても滑らかなアニメーションなのでスマートフォンでもご覧ください）
これらをイチから手作業でやるとなるととてつもなく大変ですが、実際にゲームで制作する際には、運用を考えて一部ツールで自動化していました。
今回はフローのみに触れる形となってしまいましたが、また機会があればご紹介したいと思います。
アニメーションは本当に奥深く、
実際に動かしてみたら、なーーんか不自然…
流れが"平たん"になってしまって面白みに欠ける…
などなど毎回試行錯誤の連続ですが、イメージ通りに動いた時の嬉しさは格別です！
私自身、今後も日常の些細な動きにも注目しつつ、新たなアウトプットができるよう精進していきます。
最後までお読みいただきありがとうございました。m(_ _)m
ぷちガールちゃんもよろしくね♪ ≫ガールフレンド（仮）≪
