みなさま、初めまして。
アメーバ事業本部ピグディビジョン所属、Flashディベロッパーの矢澤(@Akichi )です。

ピグの広告や、アライアンスの担当をしています。
広告やアライアンスの案件でピグのアクションを制作することが多いです。
(もちろんコードを書くこともあります!)

今回は、ピグのアクションがどのようにできているのかを、
少しでもお伝えできればと思います。

ピグのアクションってどんなの?

ピグのアクションは大きく2つに分けられます。

・通常アクション
使用回数の制限がなく、使ってもなくならないアクション
(基本的にピグの動きだけで表現できるもの)

・消費アクション
ポケットウィンドウから利用でき、使用回数の制限があるアクション
(広告商品アイテムなどに使われます。)

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

今回は通常アクションに関して説明します。


ピグの身体の仕組み

まずはベースとなるピグがあります。
身体のパーツはざっくりですと「頭、体、上腕、前腕、手、足」の5つが基本です。
細かく分けたものを図で用意しましたのでこちらをご覧ください。

表面
1 pixel|サイバーエージェント公式クリエイターズブログ-ピグパーツ表

背面
1 pixel|サイバーエージェント公式クリエイターズブログ-ピグパーツ裏
ピグの身体は膝がなかったり、つま先が曲がらないようになってます。


制作時に気をつけること

下記の3つのことを考えながら制作します。

1「ピグで可能な動きか」
2「動きとして自然であるか」
3「ピグの世界感にあっているか」

1ピグの動きはFlashで制作していますので、Flash上での深度が重要となってきます。
レイヤーの順序は下図のようになっています。

表面レイヤー
1 pixel|サイバーエージェント公式クリエイターズブログ-タイムライン表

背面レイヤー
1 pixel|サイバーエージェント公式クリエイターズブログ-タイムライン背面

ピグが表面の時は、右手は体よりも前には出せない仕様になっていますので、
作ってから表現不可能にならないよう気をつけています。

背面の時は、右手は髪と顔の間の深度になりますので、
基本的には右手を大きく振るなどはできません。

ただ、右手をあたまの後ろにもってくる場合、表面は特に問題なく作成できてしまうので、
事前に背面でも制作可能であるかの判断をしなくてはなりません。


2ピグだけではなくアニメーションを作る上で意識している部分ですが、身体の動きが自然に動いているか、ピグの身体はパーツごとに動いているので、途中で崩れていないかどうかも重要です。

3現実にある動きを作る際に気をつけているのですが、現実では動きが速かったりするものも、ピグ上ではある程度デフォルメしたり、大げさに表現することで、「ピグがこの動きをしたらかわいい、かっこいい」といった感じに突き詰めていきます。


アクション制作

今回は、すでにリリースされている通常アクションの中から、
プロレス技の「飯伏乱舞」を参考に説明させて頂きます。

参考動画(8:24~)

http://www.youtube.com/watch?v=8_1egHilZ-Q#t=504s


まず、参考動画を見て、動きの中で重要となるポイントをいくつか決めます。
ポイントごとにキーフレームを作っていきます。

今回はこんな感じでしょうか。

「ファイティングポーズ」→「右手で殴る」→「左手で殴る」→「右足で蹴る」→「回し蹴り」→「ファイティングポーズ」

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


キーフレームごとのピグの動き
1 pixel|サイバーエージェント公式クリエイターズブログ-ピグ表アクションコマ

人それぞれ作り方は違うと思いますが、私は大枠を作ってしまい、動きの流れをつかんでから細かい部分を補完していくタイプなので、先に重要となる大枠を作ります。
大枠ができたら、キーフレームの間を補完&調整していきます。

調整が完了したらピグに表情をつけていきます。
ピグには最初から用意された表情などがあり、インスタンスを追加するだけで表情を変えることができます。

フラグ一覧
1 pixel|サイバーエージェント公式クリエイターズブログ-表情フラグ

目:上げ閉じ・・・・・目を上中心に閉じる
目:下げ閉じ・・・・・目を下中心に閉じる
まゆげ:怒・・・・・まゆげをつり上げる
まゆげ:哀・・・・・まゆげを八の字にする
くち:スマイル・・・・・口を笑顔にする
くち:へ・・・・・口をへの字にする
くち:あける・・・・・口をあける
座るモード・・・・・ピグを座らせる
まばたき用・・・・・目がまばたきする
右に90度回転・・・・・ピグを90度右回転させる
左に90度回転・・・・・ピグを90度左回転させる
180度回転・・・・・ピグを180度右回転させる

今回はプロレス技ということで、気合いが入っている感じを出したいので、
「まゆげ:怒」「くち:へ」「くち:あける」を使い、
回し蹴りに勢いをつけるので「右に90度回転」を使います。

調整&表情をを追加したものがこちら。
1 pixel|サイバーエージェント公式クリエイターズブログ-調整&フラグ

こちらを実際に動かすとこんな感じになります。
1 pixel|サイバーエージェント公式クリエイターズブログ-飯伏表

ここで、一旦テスト環境で実際のピグの動きを確認します。
実際のピグ上での確認は、ピグに服を着せて動きの確認をします。
そのあとにピグのディベロッパーにチェックを受けて、問題なければ背面の制作に入ります。

アクション制作(背面)

背面も表面と同じように大枠を制作し、表情などを追加していきます。
背面の場合、表情は見えないのでインスタンスの追加はしませんが、今回は90度回転を使っているので追加します。

できあがった背面
1 pixel|サイバーエージェント公式クリエイターズブログ-飯伏裏

背面もディベロッパーに確認してもらい、問題がなければ本番リリースとなります。

まとめ

ここまで読んでいただきありがとうございます。
ピグの世界には通常アクション、消費アクションが数多くあり、ユニークなものもたくさんあるので、ぜひユーザーとの交流に使っていただければと思います。


アメーバピグはこちら
http://pigg.ameba.jp/