final fantasy record keeper アニメーション制作の濃ゆい話

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

1

FINAL FANTASY Record Keeper

!

アニメーション制作の濃ゆい話

株式会社ディー・エヌ・エー

デザイン戦略室

UXデザイングループ

白井俊治

[email protected]

©2014 SQUARE ENIX CO.,LTD / DeNA Co.,Ltd. All Rights Reserved.

mailto:[email protected]


自己紹介

2

白井俊治

FINAL FANTASY Record Keeper (FFRK)

アニメーション制作チームのリーダー

!

2012年9月 DeNAに入社

!

FFRKの開発に参加する前は・・・

三国志ロワイヤルの開発メンバー

内製ブラウザタイトルのFlashの設計、演出制作


本日の内容

3

• アーキテクチャ

• 内製ツールを使ったアニメーションデータ作成

• バトルデータの紹介

• ボスデータ設計の話

• スクリプトで修正してなんとかした話

• 人材育成の話


さらっとアーキテクチャ

4

社内で開発されたWebViewとGLViewを持つ

ハイブリッドアプリ作成のためのフレームワークを使用

ハイブリットアプリの画面構成

WebView

GLView

ネイティブアニメーション本日はこの部分の制作について


データ作成は内製ツール

5

AnimationBuilderという内製のツール群でデータ作成

!

主な出来ること

• UI、ゲーム画面のデータ構造作成

• タイムラインのモーションアニメ

• スプライトアニメ

• パーティクルエフェクト

• テクスチャのパック

!

データはすべてJSON形式で書き出し


バトルを構成するデータ

6

背景

敵キャラ

エフェクト

キャラ

ゲージ

UI

ザコボス

アビリティ必殺技召喚獣


敵キャラ　データ設計

7

FFの大量にある敵データを個別に全部作るのは工数的に無理

簡略化して運用工数に耐えられる設計をする必要があり

ザコのデータは共通化することに・・・

!

変更したい部分は大きさに合わせて配置位置を変える部分だけ

マスタで設定

アニメーションマスタを定義してオフセットを設定


ボス　データ設計

8

ザコをベースにボスはフルカスタマイズ出来るデータ構造を設計

!

開発当初からの要件として

FFバトルの追体験、ゲームのコンセプトとして

原作にあるボスバトルの仕様を表現する必要がありました

変化


9

さらにクリエイティブとしてのこだわりポイント

原作をそのまま再現するだけでは物足りない

モーションアニメ、変化するアニメ、いろんな演出を入れたい



10

結果としてデータはかなり複雑に・・・

リリース少し後くらいまでは

このボスデータを仕上げられるのは

自分しかいませんでした



11

!

!

ボスはたくさん必要、量産しないと・・・

!

!

内製ツールなので外から人を増やしても

すぐにはキャッチアップしてもらえない

!

!

ボスデータの作成を外部に委託していたり

社内で新しくジョインした人に作ってもらったりしたが・・・



12

!

!

結果は・・・ほぼ全データ手直しする必要あり

!

確認も修正もかなり時間かかるし

まったくクリエイティビティの関係ない作業

!

!

作業者をアサインしても、最終的には自分の確認が必要・・・

人間がやるのは無理なのでは？？・・・



ここで登場のスクリプト

13

データ仕様を決めて量産されたデータではあるが

人の手によって作られたものなので、大体がミスっている

データ仕様に基づいた意図した理想の状態に自動でする

データは全部JSONなので解読は容易

修正スクリプトのコードは自分で書いた

このスクリプトで全データを一括修正して解決

!

!

100件以上の

量産されたボスデータ

!

!

!

!

リリースまでに何度かデータ仕様の変更をしたが

スクリプトの改修で前提で吸収して手動での修正は避けられた


14

スクリプトで修正


人材育成

15

こうして、それなりに複雑になったデータ仕様

それを支える制作方法

今これを理解して制作出来る人は限られている・・・

教育せねば・・・


16

人材育成

前提として：人はミスをする

　　　　　　手順を整理して明確にして、いつも同じ手順でやる

　　　　　　これで誰がやっても同じ作業結果

!

やったこと

•制作手順を社内wiki化

•自動化できるところはシステムでやる　作業効率化とミス抑制

•出来ない人には作業環境の統一を半強制

•ITスキルの強化

•それでも出来ない人にはやらせない


17

社内wiki化

制作手順をまとめていて

作業者がいつでも更新出来るようになっている

!

ハマりポイントなどを追記することによって

新たにジョインした人が先人の知恵を貰うことが出来る


18

自動化効率化

スクリプトで作業を効率化

大量のデータがあるので人の手では限界がある

!

作ったスクリプト

•指定したフォルダをIDで整理

大量にデータがあるので、作業ミスをなくす

•キャラの量産データを作成

画像を指定フォーマットで置いておき

自動で必要なテクスチャやJSONデータを作成する

•ザコの量産データ作成

必要なデータを作成

人がやるのはオフセットを入力するだけ


19

作業環境

出来ない人、ミスを頻発する人には作業環境を統一

!

便利ツールの導入

!

XtraFinder

https://www.trankynam.com/xtrafinder/

https://www.trankynam.com/xtrafinder/


20

ITスキル強化

IT系の会社ですが

エンジニア以外のITスキルの理解度はいまいち・・・

!

!

問題点としては

•入社後に教わる機会が無い

•業務が忙しくて時間も無い

•学ぶ意欲がない。学んだことによる効果を知らない。

•そもそも知らない

!

なので自分が教えました


21

ITスキル強化

バージョン管理

gitの知識

!

コマンドライン

知っていれば便利

GUIでやるより効率的な場合もある

!

テキストエディタでデータを直接編集

意外だけど知らない人もいる

!

チケット駆動開発

JIRAで管理されているがそもそも使い方を知らない


22

ITスキル強化

バージョン管理

SourceTreeを使っています。

コマンド知らなくても出来る。


23

ITスキル強化

コマンドライン

!

cp

scp

finderからGUIで

操作するより早い

!

シェルスクリプト

処理を自動化


24

ITスキル強化

テキストエディタでデータを直接編集

苦手な人はコードへの苦手感を無くす


25

ITスキル強化

チケット駆動開発

DeNAではJIRA


本日のまとめ

26

• 仕様を盛るとデータは複雑になるので、データの理解力は必要

!

• デザイナー職でも基本的なITスキルは身につけておきたい

　何を基本とするかはプロジェクトしだいですが・・・


27

ご清聴ありがとうございました

final fantasy record keeper アニメーション制作の濃ゆい話

Design