CSS3でつくるキャラアニメーション

はじめまして！
アメーバゲーム部門でディベロッパーをしております、なるげと申します。

現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジー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



ぷちガールちゃんもよろしくね♪　≫ガールフレンド（仮）≪