「FINAL FANTASY Record Keeper」を支えるDeNA内製Toolとデータの作り方

こんにちは、Japanリージョンゲーム事業本部開発基盤部第二グループ  小林潤です。

私は、忍者ロワイヤルで捕獲イベントのオーナー企画担当としてDeNAの初仕事をしました。
同時並行で、AnimationBuilderという内製ツールを開発し、忍者ロワイヤル以降のD.O.T.、三国志ロワイヤルFINAL FANTASY Record Keeper(以下、FFRK)、キングダムのアニメーション、エフェクト周りのベース作りをやってきました。

河瀬とは、FFRKの開発初期にエフェクト、アニメーション周りを相談されて、内製ツールや現在のベースとなるデータ構造等を紹介したのがきっかけで一緒に仕事をしていました。

現在は、別のものがアニメーションリーダーとして、河瀬と連携して開発をおこなっています。

今回は、私の方から、FFRKチームのデータにまつわる以下の2つの技術をご紹介したいと思います。

 ・ FFRKを支えている内製Tool
 ・ 内製Toolを使用したデータの作り方

まず、ひとつめの「FFRKを支えている内製Tool」をご紹介します!
FFRKでは、以下の4つの内製ツールを組み合わせてデータを作っています。

  1. ImagePacker

  2. SpriteAnimationBuilder

  3. ParticleBuilder

  4. AnimationBuilder

1. 【ImagePacker】
これは、テクスチャーをパックするツールです。
まずこのツールでテクスチャーを矩形サイズにパックするところから始めます。

2. 【SpriteAnimationBuilder】
パックしたテクスチャーを使用して、スプライトアニメーションを作成するツールです。

キーフレームでコントロールするのではなく、パラパラアニメを作る要領でデータを作成します。
下の画像では、ボスの一部パーツをパラパラアニメで表現しています。
これは、痛そうな車輪がまわっている表現ですね。
この表現は、キーフレームの回転アニメでは難しいので、SpriteAnimationBuilderを使用しています。
その他にも、パーティクルの粒子に使用したりしています。

3. 【ParticleBuilder】
パーティクルシステムのツールです。
パックしたテクスチャーを使用して、主にエフェクトを作成します。
SpriteAnimationBuilderのデータも粒子として使用する事ができます。
FFRKでは、エフェクト全般をこのツールで作成しています。

4. 【AnimationBuilder】
パックしたテクスチャーを使用してキーフレームアニメーションを付けたり、スプライトアニメーションのデータ、パーティクルのデータを連携してデータを作成するツールです。

特徴としては、内製ツールのデータを連携してプレビューできる事です。
別のツールで保存すると、すぐにAnimationBuilderでプレビューして確認する事ができます。
FFRKでは、全てのアニメーションデータをこのツールで統括して作っています。

キャラクター、必殺技、アビリティだけではなく、UIのデータ、演出にも使用しています。

*ParticleBuilderとAnimationBuilderは1つのアプリケーションになっています
©SQEX ©DeNA

このツール群は、僕が入社した2011年に開発し、忍者ロワイヤル、D.O.T.、三国志ロワイヤル、ブラッドバタリオン、キングダム、FFRKと使用しています。

コンセプトは、「誰でも簡単にそれなりのモノが作れるツール」ですw

機能的には簡素で単純なものしか用意していません。
その代わり、それなりのモノが素早く作れるようにしています。
全てのタイトルにおいて、開発している方にエフェクト専門の方はいません。

Flashでアニメーション作っている方、AfterEffectでムービー編集していた方など、パーティクルシステムが初めての方ばかりです。
そういった方でも、少し触ればそれなりのモノが作れる事を目指して、当時開発していました。

FFRKでも、開発当初よりいろいろな場所で使用されるようになっています。

WebViewだと、どうしてもアニメーションに限界が出てしまいます。
せっかくのアプリなのでいっぱい動かしたいですし、気持ちのいい演出にしたいですよね。そんな開発陣の思いで新規実装される画面にも積極的に使われるようになりました。

今後も、演出が強化され使いやすく、気持ちのいいUIが実装されていくと思います。ご期待ください!!

次に、FFRKの「内製Toolを使用したデータの作り方」をご紹介します。
今回は、ボスのデータについてご説明します。

以下の行程を経てデータが作られます。

  1. アニメーションを考える

  2. ボスの画像を分解する

  3. 分解した画像をパックして、AnimationBuilderで再構築する

  4. アニメーション作成

  5. マスターに登録して実機確認とチェック

  6. 調整〜チェック

  7. スクウェア・エニックス様チェック

  8. 完了

注)
今回は、オーソドックスなボスのパターンで解説します。

複雑なものはエンジニアとの相談もあるので行程が増えます。

1. 【アニメーションを考える】

スクウェア・エニックス様から頂く画像を見て、ボスの動きを考えます。
これは、次の作業を円滑に進めるために必要です。

2. 【ボスの画像を分解する】

アニメーションを考えたら、画像を分解します。

分解が細かくなると、アニメーション制作時に制御しにくくなるので、考えたアニメーションの制御がしやすいように、画像を分解します。

動かした時に、見えてしまう部分は画像にドットを付け足していきます。

ただし、元の画像のシルエットが変わって見えてしまわないように細心の注意を払います。

3. 【分解した画像をパックして、AnimationBuilderで再構築する】

AnimationBuilderに読み込みます。

アニメーションがやりやすいような構造で再構築します。

この際、ボスの制作ルールにそうことも重要です。
プログラムで決められたものは、その通りにしなくてはいけません。
いくつかのnode名と構造、animationタグ名、action名はルールに沿う必要があります。

*node名と構造、animationタグ、actionについては後で説明します

4. 【アニメーション作成】

キーフレームを打ちながら、アニメーションを仕上げていきます。
エフェクトが必要な場合は、ParticleBuilderで素材を作り、AnimationBuilder上でタイミングを調整しながら作っていきます。
このとき、ParticleBuilderと、AnimationBuilderを頻繁に切り換えながら調整していきます。

5. 【マスターに登録して実機確認とチェック】

完成したら、マスターに登録して、実機(端末)で見れる状態にします。

マスターとは、データを管理するエクセルデータです。
アニメーションチェック用のデバックモードから呼び出せるように登録します。

実機での確認ができない場合、データが間違っているか、マスターへの登録方法が間違っているかなので、確認できるまで修正します。

見れるようになったら、リーダーにチェックしてもらいます。

このとき、6. 【調整】が必要なら、アニメーションの修正をして、リーダーのOKをもらうまで繰り返します。

7. 【スクウェア・エニックス様チェック】

最後に、スクウェア・エニックス様にチェックして頂き、問題なければ 8.【完了】 です。最終確認後にリリースされます。

ワークフローはこんな感じです。

それでは、実際のデータを見ていきましょう。

【node名と構造】

こちらが、ボスの構造になります。
複雑ですねw

ですが、見るところだけ見ればいいようにしてあるので、少しレクチャーを受ければ以外と簡単に作れます。
基本は、idleのモーションを作ればOKです。(専用の登場や、変形など複雑なのもあります)

なぜこんなに複雑なのか。。。

FFでは、攻撃の種類によって、ダメージの色が変わります。
さらに状態異常での色変化など、アニメーションしながら動的な変化に対応する必要があるのです。

idleのアニメーションに干渉しないように別のアニメを流すために、nodeの構造が複雑になっています。

【アニメーションタグ】

アニメーションタグとは、アニメーションを定義するものです。
このアニメーションタグが、プログラムで呼び出されることで動いています。

先ほど紹介した、ダメージの種類による違いが、アニメーションタグを見て頂くとわかると思います。

【アクション】

アクションとは、アニメーションタグで定義されているフレーム数で起きるイベントを定義するものです。

この画像では、9785フレームで音を鳴らしています。

AnimationBuilderでは、SEなどもアニメーションに合わせて設定しています。
もちろん、プレビューで音を確認しながら調整できます。

他にも、様々な設定をすることで、ゲーム独自のイベントを組み込むことができます。

最後に、マスターを紹介します。

ここで、BossのIDとアニメーションファイルを紐づけています。
その他、アニメーションで必要な情報もここで定義しています。
ちなみに、AIは別のマスターで管理して、Boss_IDと紐づけています。

どうでしょうか、駆け足でしたがツール使用したデータ作りをご説明させて頂きました。参考になれば幸いです。

これからも末長くFFRKを楽しんでいただけるようにアニメーション、エフェクト、演出を強化していきたいと思うので、どうぞご期待ください!

 

最後まで読んでいただきありがとうございました!