1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


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

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



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


いいね!した人  |  リブログ(0)

1pixelさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事  もっと見る >>
ページトップへ戻る