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

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

DeNAではこうしてます。

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

小林潤

現状の問題

人材不足

誰でも簡単に扱える

事例１

事務職として入社

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

事例１

事務職として入社

事例２

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

事例２

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

クオリティー ≠ 制作時間

費用対効果

ツールの紹介

Kickmotorとは

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

Kickmotorの構成ゲームWebView

ネイティブキャッシュ

他SDK

WebView / ネイティブブリッジ

ABランタイム

Cocos2DXハードウェア

iOS Android

Kickmotor

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

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

表示の方法

Java Scriptで行う

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

アニメ制御は。。

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

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

ノードの複製、接続

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

MoveTo, ScaleToなどの直接制御

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

ツールの紹介

ImagePacker

SpriteAnimationBuilder

ParticleBuilder

AnimationBuilder

ImagePacker

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

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

ParticleBuilder

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

ParticleBuilder

AnimationBuilder

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

AnimationBuilder

Texture

ImagePacker SpriteAnimationBuilder

AnimationBuilder

ParticleBuilder

Data flow

Texture

ImagePacker SpriteAnimationBuilder

AnimationBuilder

ParticleBuilder

Data flow

データの基本

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

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

マスター AnimationBuilderデータ

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

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

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

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

種類内訳

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

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

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

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

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

データの仕様

2012.12 ~

キャラクターについて

D.O.T.

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

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

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

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

SABデータ

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

100202.json

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

SABデータ

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

100202.json

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

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

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

キャラクターについて

アニメ短い

D.O.T.

アニメ長い

2013.11 ~

戦場マップについて

三国志ロワイヤル

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

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

赤い部分はweb

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

マスターに設定…

しんどい。。。

web ツール化！

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

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

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

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

アビリティについて

FINAL FANTASYRecord Keeper

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

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

プレゼン資料

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

プレゼン資料

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

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

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

launch

アビリティ再生手順

shot hit発動準備発動着弾

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

launch

アビリティ再生手順

shot hit発動準備発動着弾

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

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

それぞれ重みが違う。。

演出の長さが違う。。

どうする…

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

launch

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

shot発動準備 next : 249f

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

launch

ファイア

next : 20f

メテオ

shot hitnext : 0f next : 68f

launchnext : 20f

shot hitnext : 120f next : 0f

damage

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

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

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

アビリティのマスター

名前 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

ダミーデータを指定

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

背景について

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

背景について

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

背景について

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

背景について

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

背景について

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

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

ボスについて

動かしたい！

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

ボスについて

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

ボスについて

プレゼン資料

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

ボスについて

プレゼン資料

ボスについて

頂いている画像分解

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

ボスについて

頂いている画像分解

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

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

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

ボスについて

ツールの機能紹介

法線マップとライト

illustration Masafumi Takagi assistant Nobutaka Hanya

ライトの調整

法線マップイメージ

パーティクル

76illustration MIZUNO / OKAZAKI

炎部分のエフェクト

illustration MIZUNO / OKAZAKI

炎部分のエフェクト

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

おわり

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

Design

コンピュータグラフィックス特論Ⅱキャラクタ・アニメーションの実現方法 • オフライン・アニメーション制作 – 通常は市販のアニメーション制作ソフトウェアを利用

潜空のレコンキスタエフェクト制作テクニック

日本語教育におけるアニメーション研究のこれまで …repository.tufs.ac.jp/bitstream/10108/89725/1/isre021007...日本語教育におけるアニメーション研究のこれまでとこれから

Adobe edge入門 htmlでアニメーションを作ろう-

Microsoft PowerPoint 2013 －アニメーション実践編－ · PowerPoint2013 アニメーション実践編 2 1. はじめに PowerPoint のアニメーションは多くの機能を有しており、さまざまな工夫を凝らすことで効果的な

「OpenGLで作る力学アニメーション入門」サンプルページ · 「OpenGLで作る力学アニメーション入門」サンプルページこの本の定価・判型などは，以下のURLからご覧いただけます．

2008年3月期決算説明会資料...アニメーションアニメーション 2.1% 4.8% 差異計 15,592 14,970 622 102 アミューズメント 4,812 4,709 519 アニメーション

次ページボタンではなく、画面をクリックする「 PPT アニメーション機能」でご覧下さい。

CSS3 filterとtransformをtransition, animationでアニメーション

次ページボタンではなく、画面をクリックする「 PPT アニメーション機能」でご覧下さい。

Dtm講習会 '15 前期 #5 エフェクト編

エフェクトタイプとパラメーター(Ver.2) 3 エフェクトタイプとパラメーター DuoPhase 2つのフェイザーを組み合わせたエフェクトです。Knob1

【Unite 2017 Tokyo】Anima2Dについて語るで！2Dアニメーションの未来

エフェクト用 Shader 機能紹介

実践ガイドレベルE『アニメーションとわたし』読むまえに · 2019. 11. 15. · アニメーションをることは大なのに、どうし楽しいのでしう

Synfig Studioでつくるvectorアニメーション(iphone dev sap勉強会 20120512)

次ページボタンではなく、画面をクリックする「 PPT アニメーション機能」でご覧下さい。

高橋裕樹アニメーション乱数の利用 Java 演習 (7) …img2.hc.uec.ac.jp/~rocky/lecture/java/slides/lec07.pdfJava 演習(7) { アニメーション {高橋裕樹アニメーション

NHN HTML5勉強会 CSS3アニメーション