ヘブンバーンズレッド × バトル × アドベンチャー〜WFSのゲーム制作・演出の最大化手法〜

by gree_tech

Slide 1

Slide 1 text

株式会社WFS　クライアントエンジニア　市川ひまわりヘブンバーンズレッド × バトル × アドベンチャー〜WFSのゲーム制作・演出の最大化手法〜株式会社WFS　クライアントエンジニア　伊藤栄治

Slide 2

Slide 2 text

市川ひまわり / Himawari Ichikawa 株式会社WFS Unityクライアントエンジニア 2020年新卒入社主にアドベンチャーパートの開発を担当自己紹介 ©WFS

Slide 3

Slide 3 text

伊藤栄治 / Eiji Ito 株式会社WFS Unityクライアントエンジニア 2016年新卒入社主にバトルパートの開発を担当 ©WFS 自己紹介

Slide 4

Slide 4 text

● 第一部 ○ Luaで最上の演出を！「ヘブンバーンズレッド」におけるアドベンチャー制作エンジンの裏側 ● 第二部 ○ Unity Timelineで作る！「ヘブンバーンズレッド」バトルスキルシステム作成事例構成 ©WFS

Slide 5

Slide 5 text

Luaで最上の演出を！「ヘブンバーンズレッド」におけるアドベンチャー制作エンジンの裏側市川ひまわり ©WFS

Slide 6

Slide 6 text

ヘブンバーンズレッドについて ©WFS

Slide 7

Slide 7 text

大枠の役務分担（シナリオ/ボイス周り）  ©WFS ヘブンバーンズレッドとは

Slide 8

Slide 8 text

©WFS ADV フィールドバトルヘブンバーンズレッドの構成要素

Slide 9

Slide 9 text

©WFS ADV フィールドバトルヘブンバーンズレッドの構成要素

Slide 10

Slide 10 text

ヘブンバーンズレッドにおけるアドベンチャー ©WFS

Slide 11

Slide 11 text

ヘブンバーンズレッドにおけるアドベンチャー ©WFS 大量のセリフとそれに伴う演出

Slide 12

Slide 12 text

ヘブンバーンズレッドにおけるアドベンチャー ©WFS 大量のセリフとそれに伴う演出量産体制を整える必要がある

Slide 13

Slide 13 text

ヘブンバーンズレッドにおけるアドベンチャー ©WFS Luaを使って作っている ● Lua：スクリプト言語の一種 ● WFSでは複数タイトルで使用されている

Slide 14

Slide 14 text

ヘブンバーンズレッドにおけるアドベンチャー ©WFS 演出を組むのは「スクリプター」 ● スクリプティングのレベルは様々 ● スクリプト初心者の人でも書ける仕組みにする必要がある

Slide 15

Slide 15 text

アドベンチャー実装の流れ ©WFS

Slide 16

Slide 16 text

アドベンチャー実装の流れ ©WFS シナリオ納品

Slide 17

Slide 17 text

アドベンチャー実装の流れ ©WFS 　スクリプト　作業シナリオ納品

Slide 18

Slide 18 text

アドベンチャー実装の流れ ©WFS テストと修正　スクリプト　作業シナリオ納品

Slide 19

Slide 19 text

アドベンチャー実装の流れ ©WFS テストと修正　スクリプト　作業シナリオ納品シナリオ変換内製ツール『Tulip』

Slide 20

Slide 20 text

アドベンチャー実装の流れ ©WFS テストと修正　スクリプト　作業シナリオ納品 Layout命令シナリオ変換内製ツール『Tulip』

Slide 21

Slide 21 text

アドベンチャー実装の流れ ©WFS テストと修正　スクリプト　作業シナリオ納品 Unity x Luaのホットリロード Layout命令シナリオ変換内製ツール『Tulip』

Slide 22

Slide 22 text

アドベンチャー実装の流れ ©WFS テストと修正　スクリプト　作業シナリオ納品 Unity x Luaのホットリロード Layout命令シナリオ変換内製ツール『Tulip』

Slide 23

Slide 23 text

納品されたテキストファイルをluaにする納品時の問題 ©WFS テキスト

Slide 24

Slide 24 text

納品されたテキストファイルをluaにする納品時の問題 ©WFS テキストキャラクター指定コメント吹き出しの種類

Slide 25

Slide 25 text

納品されたテキストファイルをluaにする ● 1行ずつ手動でLua構文に直す必要がある納品時の問題 ©WFS テキストキャラクター指定コメント吹き出しの種類

Slide 26

Slide 26 text

納品されたテキストファイルをluaにする ● 1行ずつ手動でLua構文に直す必要がある ● 手作業だと正確性が低い納品時の問題 ©WFS テキストキャラクター指定コメント吹き出しの種類

Slide 27

Slide 27 text

納品されたテキストファイルをluaにする納品時の問題 ©WFS テキスト ⇒変換ツールを作って自動化！

Slide 28

Slide 28 text

シナリオ変換内製ツール『Tulip』とは ©WFS ● 納品されたシナリオ(.txt)をLuaに変換するためのパーサー

Slide 29

Slide 29 text

シナリオ変換内製ツール『Tulip』とは ©WFS ● 納品されたシナリオ(.txt)をLuaに変換するためのパーサー ● 使用言語はPythonとC# ● Unityのツールとして作成

Slide 30

Slide 30 text

シナリオ変換内製ツール『Tulip』とは ©WFS ● 納品されたシナリオ(.txt)をLuaに変換するためのパーサー ● 使用言語はPythonとC# ● Unityのツールとして作成 ● シナリオの量産をしやすくする

Slide 31

Slide 31 text

簡単なサンプル ©WFS 【茅森】「サンプル」【和泉】「サンプル２」納品txtファイル

Slide 32

Slide 32 text

簡単なサンプル ©WFS 【茅森】「サンプル」【和泉】「サンプル２」納品txtファイル Tulip

Slide 33

Slide 33 text

簡単なサンプル ©WFS Adv.talk(“茅森”, [[サンプル]]) Adv.talk(“和泉”, [[サンプル２]]) 出力luaファイル【茅森】「サンプル」【和泉】「サンプル２」納品txtファイル Tulip

Slide 34

Slide 34 text

実装 ©WFS ● テキストファイルを上から順に読んでいく ● 特定の文字列を探して変換する ● キャラ一覧は事前に読み込んでいる

Slide 35

Slide 35 text

シナリオ変換内製ツール『Tulip』とは ©WFS 選択肢 3x3選択肢

Slide 36

Slide 36 text

3 x 3 選択肢 ©WFS

Slide 37

Slide 37 text

3 x 3 選択肢 ©WFS ＠選択１=SELBTN( 選択肢１-１, 選択肢１-２, 選択肢１-３ ) ＠選択２=SELBTN( 選択肢２-１, 選択肢２-２, 選択肢２-３ ) ＠選択合算=(＠選択１*10) + ＠選択２ switch(＠選択合算){ … } 納品txtファイル

Slide 38

Slide 38 text

3 x 3 選択肢 ©WFS ＠選択１=SELBTN( 選択肢１-１, 選択肢１-２, 選択肢１-３ ) ＠選択２=SELBTN( 選択肢２-１, 選択肢２-２, 選択肢２-３ ) ＠選択合算=(＠選択１*10) + ＠選択２ switch(＠選択合算){ … } 納品txtファイル local s1, s2 = Adv.doubleQuestion([[]], [[選択肢１-１|選択肢１-２|選択肢１-３]], [[選択肢２-１|選択肢２-２|選択肢２- ３]]) local s = s1 * 10 + s2 if s == 0 then … 出力luaファイル Tulip

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

3 x 3 選択肢＠選択１=SELBTN( 選択肢１-１, 選択肢１-２, 選択肢１-３ ) ＠選択２=SELBTN( 選択肢２-１, 選択肢２-２, 選択肢２-３ ) ＠選択合算=(＠選択１*10) + ＠選択２ switch(＠選択合算){ … } 納品txtファイル local s1, s2 = Adv.doubleQuestion([[]], [[選択肢１-１|選択肢１-２|選択肢１-３]], [[選択肢２-１|選択肢２-２|選択肢２- ３]]) local s = s1 * 10 + s2 if s == 0 then … 出力luaファイル Tulip

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

3 x 3 選択肢の実装 ©WFS ● txtファイルを上から順に読み特定文字列を探して変換 ● switch文をif文に書き換える＠選択１=SELBTN( 選択肢１-１, 選択肢１-２, 選択肢１-３ ) ＠選択２=SELBTN( 選択肢２-１, 選択肢２-２, 選択肢２-３ ) ＠選択合算=(＠選択１*10) + ＠選択２ switch(＠選択合算){ … } 納品txtファイル

Slide 47

Slide 47 text

アドベンチャー実装の流れ ©WFS テストと修正　スクリプト　作業シナリオ納品 Unity x Luaのホットリロード Layout命令シナリオ変換内製ツール『Tulip』

Slide 48

Slide 48 text

アドベンチャーの抱える問題 ©WFS ● 基本構造はアドベンチャー内で共通 ⇒ 同じ命令をたくさん書く必要がある

Slide 49

Slide 49 text

アドベンチャーの抱える問題 ©WFS ● 基本構造はアドベンチャー内で共通 ⇒ 同じ命令をたくさん書く必要があるテンプレート化して自動で作れるようにしたい

Slide 50

Slide 50 text

シンプルな演出例 ©WFS 茅森月歌和泉ユキ

Slide 51

Slide 51 text

シンプルな演出例 ©WFS

Slide 52

Slide 52 text

3つに分けて考える ©WFS レイアウト１レイアウト２レイアウト３キャラクター１人表示キャラクター２人表示キャラクター１人表示

Slide 53

Slide 53 text

シンプルな演出例：レイアウト１ ©WFS

Slide 54

Slide 54 text

シンプルな演出例：レイアウト１ ©WFS 茅森月歌がフェードイン

Slide 55

Slide 55 text

シンプルな演出例：レイアウト２ ©WFS

Slide 56

Slide 56 text

シンプルな演出例：レイアウト２ ©WFS 茅森月歌が左へスライド

Slide 57

Slide 57 text

シンプルな演出例：レイアウト２ ©WFS 和泉ユキがフェードイン + 左へスライド

Slide 58

Slide 58 text

シンプルな演出例：レイアウト２ ©WFS 背景が少しスライド

Slide 59

Slide 59 text

シンプルな演出例：レイアウト３ ©WFS

Slide 60

Slide 60 text

シンプルな演出例：レイアウト３ ©WFS 茅森月歌が右へスライド

Slide 61

Slide 61 text

シンプルな演出例：レイアウト３ ©WFS 和泉ユキがフェードアウト + 右へスライド

Slide 62

Slide 62 text

シンプルな演出例：レイアウト３ ©WFS 背景が少しスライド

Slide 63

Slide 63 text

シンプルな演出例から分かること ©WFS 演出にはパターンがある ● 表示切り替えはフェード ● 立ち位置の変更はスライド

Slide 64

Slide 64 text

シンプルな演出例から分かること ©WFS 演出にはパターンがある ● 表示切り替えはフェード ● 立ち位置の変更はスライドキャラクターの表示の演出を自動化することができそう

Slide 65

Slide 65 text

Layout命令(内製) ©WFS ● 演出を直感的に作ることができる仕組み ● 立ち位置の変化から途中経過を補完

Slide 66

Slide 66 text

Layout命令(内製) ©WFS ● 背景をもとにステージを作る Layout.createStage(背景インスタンス)

Slide 67

Slide 67 text

Layout命令(内製) ©WFS ● 背景をもとにステージを作る ● ADV立ち絵を表示する Layout.createStage(背景インスタンス) Layout.show(キャラクターインスタンス, ...)

Slide 68

Slide 68 text

Layout命令で考えてみる ©WFS Layout.show("茅森", "和泉") Layout.show("茅森") Layout.show("茅森") レイアウト１レイアウト２レイアウト３

Slide 69

Slide 69 text

Layout命令で考えてみる ©WFS Layout.show("茅森", "和泉") Layout.show("茅森") Layout.show("茅森") レイアウト１レイアウト２レイアウト３同じ命令でも呼び出しタイミングによって表示演出が変わる！

Slide 70

Slide 70 text

Layout命令で考えてみる ©WFS -- bgからステージを作る Layout.createStage(bg) -- 茅森表示 Layout.show(RKayamori) Adv.talk(RKayamori, [[1人レイアウト]]) -- 茅森、和泉表示 Layout.show(RKayamori, YIzumi) Adv.talk(YIzumi, [[2人レイアウト]]) -- 和泉表示 Layout.show(RKayamori) Adv.talk(RKayamori, [[1人レイアウト]])

Slide 71

Slide 71 text

-- bgからステージを作る Layout.createStage(bg) -- 茅森表示 Layout.show(RKayamori) Adv.talk(RKayamori, [[1人レイアウト]]) -- 茅森、和泉表示 Layout.show(RKayamori, YIzumi) Adv.talk(YIzumi, [[2人レイアウト]]) -- 和泉表示 Layout.show(RKayamori) Adv.talk(RKayamori, [[1人レイアウト]]) Layout命令で考えてみる ©WFS

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

シンプルな演出例 ©WFS -- bgからステージを作る Layout.createStage(bg) -- 茅森表示 Layout.show(RKayamori) Adv.talk(RKayamori, [[1人レイアウト]]) -- 茅森、和泉表示 Layout.show(RKayamori, YIzumi) Adv.talk(YIzumi, [[2人レイアウト]]) -- 和泉表示 Layout.show(RKayamori) Adv.talk(RKayamori, [[1人レイアウト]]) 茅森フェードイン茅森スライド和泉フェードイン + スライド背景　スライド茅森スライド和泉フェードアウト + スライド背景　スライド

Slide 77

Slide 77 text

他にもさまざまなLua命令がある ©WFS ● ADV ● Field ● Battle ● etc…

Slide 78