エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？ DeNAではこうしてます。

1
エフェクト、アニメーション、演出の
データ作るの大変じゃないですか？
DeNAではこうしてます。
Japanリージョンゲーム事業本部
技術・編成部開発基盤グループ
小林潤
Copyright (C) 2014 DeNA Co.,Ltd. All Rights Reserved.

2
現状の問題

3
人材不足

4
誰でも簡単に扱える

5
事例１
事務職として入社
ガッツリデータを作って頂いてます！

6
事例２
デザインアシスタントとして入社
ガッツリデータを作って頂いてます！

7
クオリティー ≠ 制作時間

8
費用対効果

9
ツールの紹介

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

11
Kickmotorの構成
WebView / ネイティブブリッジ
ゲーム
WebView
ネイティブ
キャッシュ他SDK
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
ImagePacker SpriteAnimationBuilder
Texture
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
D.O.T.
ABデータにSABデータを表示するnodeを置いて、中身を差し替え
ることで実現している
SABデータ
100202.json
キャラの大きさに合わせて、影の大きさや位置を調整している
ダメージエフェクトの表示する場所の調整をしている

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

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 FANTASY
Record Keeper
アビリティについて

48
FINAL FANTASY
Record Keeper
企画段階では
スーファミのＦＦ準拠の演出
ドットのパラパラエフェクト
ツールでデモを作成してプレゼン
今の形となる
プレゼン資料

49
アビリティには３種類ある
通常アビリティ、召喚獣、必殺技
この３つを同じ再生ロジックで表示したい。。
FINAL FANTASY
Record Keeper

50
FINAL FANTASY
Record Keeper
アビリティ再生手順
launch
shot hit
発動準備発動着弾
damage
ダメージモーション
ダメージ数の表示

51
通常アビリティ、召喚獣、必殺技
それぞれ重みが違う。。
演出の長さが違う。。
FINAL FANTASY
Record Keeper

52
どうする…
FINAL FANTASY
Record Keeper

53
FINAL FANTASY
Record Keeper
データに次の
受け渡しタイミングを仕込む

54
FINAL FANTASY
Record Keeper
受け渡しタイミングの制御
launch
shot
発動準備next : 249f
Actionの機能を利用し、ゲーム側へ
情報を送る事で次のアニメーション
開始タイミングをデータ内で取り回
せるようにした

55
FINAL FANTASY
Record Keeper
damage
ファイア
launch
next : 20f
メテオ
shot hit
next : 0f next : 68f
launch
next : 20f
shot hit
next : 120f next : 0f
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
ダミーデータを指定
FINAL FANTASY
Record Keeper

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

58
背景について
FINAL FANTASY
Record Keeper

59
同じ背景でもバリエーション持たせたい
背景について
FINAL FANTASY
Record Keeper

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

61
背景データの、特定箇所にエフェクト演出データを
設置出来るようにした
背景について
FINAL FANTASY
Record Keeper

62
FINAL FANTASY
Record Keeper
遠景エフェクトの設置箇所
背景について
背景の前でキャラの後ろに出る
エフェクト設置箇所

63
ボスについて
FINAL FANTASY
Record Keeper

64
ボスについて
動かしたい！
遊び方に合わせた変化をさせたい
FINAL FANTASY
Record Keeper

65
ボスについて
企画段階では
スーファミのＦＦ準拠の演出
動かない！（揺れ、色変化のみ）
ツールでデモを作成してプレゼン
今の形となる
FINAL FANTASY
Record Keeper
プレゼン資料

66
FINAL FANTASY
Record Keeper
ボスについて
頂いている画像分解
頂いたドット絵のイメージを
崩さずアニメーションさせる

67
全てのボスが専用ＡＩのため、データを
カスタマイズしやすいようにしている
ダメージ、死亡時の制御、ステイタス変更表示等
は、共通の仕様としている
ボスについて
FINAL FANTASY
Record Keeper

68
ツールの機能紹介

69
法線マップとライト

70
illustration Masafumi Takagi
assistant Nobutaka Hanya

71

72
ライトの調整

73
イメージ法線マップ

74

75
パーティクル

76
illustration MIZUNO / OKAZAKI

77

78

79
炎部分のエフェクト

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

81
おわり

エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？ DeNAではこうしてます。

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (18)

Semelhante a エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？ DeNAではこうしてます。

Semelhante a エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？ DeNAではこうしてます。 (20)

エフェクト、アニメーション、演出のデータ作るの大変じゃないですか？ DeNAではこうしてます。