エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？...

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

1

エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？

DeNAではこうしてます。

Japanリージョンゲーム事業本部技術・編成部開発基盤グループ

小林潤


2

現状の問題


3

人材不足


4

誰でも簡単に扱える


5

事例１

事務職として入社

ガッツリデータを作って頂いてます！


6

事例２

デザインアシスタントとして入社

ガッツリデータを作って頂いてます！


7

クオリティー ≠ 制作時間


8

費用対効果


9

ツールの紹介


10

Kickmotorとは

社内で開発したWebViewとGLViewを持つハイブリッドアプリ作成のためのフレームワーク


11

Kickmotorの構成ゲームWebView

ネイティブキャッシュ

他SDK

WebView / ネイティブブリッジ

ABランタイム

Cocos2DXハードウェア

iOS Android

Kickmotor


12

画面の構成イメージOpenGLのレイヤーをWebViewの上に重ねる

ネイティブアニメーション

web


13

表示の方法

Java Scriptで行う

WebViewにインターフェースで繋いでコマンドのやりとりをすることで実現

アニメ制御は。。


14

アニメ再生、停止、一時停止、再生速度

アニメ終了や指定フレームでのコールバック

ノードの複製、接続

ノードのタッチイベントのコールバック

MoveTo, ScaleToなどの直接制御

jsからできること表示の方法


15

ツールの紹介


16


16

ImagePacker

SpriteAnimationBuilder

ParticleBuilder

AnimationBuilder


17

ImagePacker


17

ImagePacker

画像を、２５６x２５６、５１２x５１２等のサイズにパックして、ＵＶ値をjsonとして書き出すツール



18



18

スプライトアニメーションを、作成するツールレイヤーを使うことで、使用する画像を減らすことが可能（AnimationBuilderとデータ連携をしている）


19

ParticleBuilder


19

エフェクトのデータを作成するツール（AnimationBuilderとデータ連携をしている）データはjsonで書き出している

ParticleBuilder


20

AnimationBuilder


20

UI、演出、ゲームステージの構造等を作成するツールプレビューしながら、構造的にデータを作ることができるデータはjsonで書き出している

AnimationBuilder


21

Texture

ImagePacker SpriteAnimationBuilder

AnimationBuilder

ParticleBuilder

Data flow


22

データの基本


23

データの変更・追加を簡単に何度も試行錯誤できる


24

デザイナーだけでクォリティアップ可能


25

マスター AnimationBuilderデータ


26

マスタースプレッドシートで管理している情報


26


データのパス動きの指定表示する場所 etc…


26


データのパス動きの指定表示する場所 etc…

見た目や、動きに関係する設定を記載している


27

AnimationBuilderデータ作成している量産データ

種類内訳

ファイナルファンタジーレコードキーパー 7

キャラクター、敵キャラ、ボス、アビリティ、必殺技、召喚獣、背景

三国志ロワイヤル 14（リリース時は６）

バトルキャラクター、バトルコマンダー、スキル、バトル背景、戦場マップ、開始デモ、カットインキャラクター、戦場オブジェクト、計略エフェクト、計略カットイン、GvG戦地背景、GvG戦地オブジェクト、GvG兵器エフェクト、GvG兵器カットイン

D.O.T. 3 キャラクター、スキル、ミッション背景


28

データの仕様


29

2012.12 ~


30

キャラクターについて

D.O.T.


31

ドット絵のパラパラアニメをやりたい

キャラクターについてD.O.T.


32

ABデータにSABデータを表示するnodeを置いて、中身を差し替えることで実現している

D.O.T.キャラクターについて

SABデータ

キャラの大きさに合わせて、影の大きさや位置を調整しているダメージエフェクトの表示する場所の調整をしている

100202.json


33

SABで【ACTION】を定義している全てのキャラで【ACTION】名は固定、長さ（尺）はそれぞれのキャラ毎に調整可能

D.O.T.キャラクターについて


34

キャラクターによって【ACTION】で定義しているアニメーションの長さを調整可能にしている（コマ数の違い）

キャラクター毎に、影の大きさ、位置、ダメージエフェクトの出る場所を調整可能にしている

キャラクターについて

アニメ短い

D.O.T.

アニメ長い


35

2013.11 ~


36

戦場マップについて

三国志ロワイヤル


37

拠点の位置や、つながっている道等を企画が制御したい

戦場マップについて三国志ロワイヤル


38


赤い部分はweb


39


拠点位置は、ABデータにある【nul】の場所をマスターに記載していく

A1 A2


40


マスターに設定…


40


マスターに設定…

しんどい。。。


41


web ツール化！


42


csvをアウトプットしてマスターにコピペ！


43


拠点は、SABでつくり、【ACTION】で状態を管理している


44


拠点は、アニメーションもできます今後増えていく予定…


45

つらいところはツール化！



46

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


47

アビリティについて

FINAL FANTASYRecord Keeper


48

企画段階ではスーファミのＦＦ準拠の演出ドットのパラパラエフェクト


ツールでデモを作成してプレゼン今の形となる

プレゼン資料



49

アビリティには３種類ある

通常アビリティ、召喚獣、必殺技

この３つを同じ再生ロジックで表示したい。。




50


launch

アビリティ再生手順

shot hit発動準備発動着弾

damageダメージモーションダメージ数の表示



51

通常アビリティ、召喚獣、必殺技

それぞれ重みが違う。。

演出の長さが違う。。




52

どうする…




53

データに次の受け渡しタイミングを仕込む




54

launch

受け渡しタイミングの制御

shot発動準備 next : 249f

Actionの機能を利用し、ゲーム側へ情報を送る事で次のアニメーション開始タイミングをデータ内で取り回せるようにした




55

launch

ファイア

next : 20f

メテオ

shot hitnext : 0f next : 68f

launchnext : 20f

shot hitnext : 120f next : 0f

damage

damage

shotはダミーデータにして、再生されないようにしている

hitはダミーデータにして、再生されないようにしている

ダミーデータは共通化して、マスター上で指定している




56

アビリティのマスター

名前 id akt_motion 攻撃モーション

launch 発動

shot 途中

hit 着弾

miss_hit ミスした時のhit

default指定の場合は空欄

ジャンプ 10003 chant_end common/launch_empty.json common/shot_empty.json 10003/10003_hit.json 10003/hit_miss.json

おうえん 10006 ready common/launch_empty.json 10006/10006_shot.json 10006/10006_hit.json

涙 10024 damage common/launch_empty.json 10024/10024_shot.json 10024/10024_hit.json

ダミーデータを指定




57

データの作り方を統一する事で学習コストを抑え量産化しやすくした




58

背景について



59

同じ背景でもバリエーション持たせたい

背景について



60

同じ背景でも天候や、演出を簡単に追加出来るようにした企画だけで追加出来るように、マスターで合成できるようにしたデータの設計は共通化している

背景について



61

背景データの、特定箇所にエフェクト演出データを設置出来るようにした

背景について



62

背景について

背景の前でキャラの後ろに出るエフェクト設置箇所

遠景エフェクトの設置箇所



63

ボスについて



64

動かしたい！

遊び方に合わせた変化をさせたい

ボスについて



65

企画段階ではスーファミのＦＦ準拠の演出動かない！（揺れ、色変化のみ）

ボスについて

ツールでデモを作成してプレゼン今の形となる


プレゼン資料


66

ボスについて

頂いている画像分解

頂いたドット絵のイメージを崩さずアニメーションさせる



67

全てのボスが専用ＡＩのため、データをカスタマイズしやすいようにしている

ダメージ、死亡時の制御、ステイタス変更表示等は、共通の仕様としている

ボスについて



68

ツールの機能紹介


69

法線マップとライト


70

illustration Masafumi Takagi assistant Nobutaka Hanya


71



72


ライトの調整


73


法線マップイメージ


74



75

パーティクル


76illustration MIZUNO / OKAZAKI


79

炎部分のエフェクト

illustration MIZUNO / OKAZAKI


80

複数エミッターのパーツエフェクト

illustration MIZUNO / OKAZAKI


81

おわり

エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？...

Design