講演者：奥村 典史(グリー株式会社) こんな人におすすめ ・UnityでAIが必要なゲームを開発している人 ・Unityで複雑な画面遷移のあるゲームを開発している人 受講者が得られる知見 ・ゲーム開発におけるビジュアルプログラミングの使い所 講演動画：https://youtu.be/leweFrRHrrw

2. Unityで出来る『見える開発』の
ススメ
〜ららマジ開発事例〜
奥村 典史

4. プログラムを見える様にしましょう

5. ららマジで使われている３つの
ビジュアルプログラミング
①AI（攻撃パターンの選択）
②画面遷移
③キャラクターステートマシンのコード生成

6. ①AI

7. AIが何を考えているのかわからない

8. 目で見えるととっつきやすい

9. ゴーレム作ってよ
このゴーレムは攻撃Aを連続で使用しているときは全然歯がたたないんだけど攻撃Bを打った後は攻撃が当たるようにしたい
歯がたたないとはどういう意味ですか？連続で使用するという話ですけど攻撃Aは何秒間隔で使用する
のでしょう？攻撃Bを打った後は攻撃が当たるようにしたいって言うことは攻撃の後の隙がでかいという話だ
と思うのですが、何秒間待つのでしょう？
わからないからとりあえずやってみて
AIを実装しようとしています・・・

10. やっぱり0.5秒は長すぎた。
0.7秒にしたらどうなる？
攻撃Cってどこから出てきてん
攻撃Bの後で隙が出来るのは弱すぎるから
2発くらい喰らったら攻撃Cで反撃をしよう
AIを実装しようとしています・・・

11. コミュニケーションコスト大！
AIを実装しようとしています・・・

12. 考える人≠作る人

13. 考える人≠作る人
考える人＝作る人！

14. そこでVisual Programming

15. 何をしているのかわかれば怖くない

16. ステートマシン(状態遷移)
現在の状態と
入力条件(何が起こったか)
によって次の状態が決まる
ゲームでは良く使われる
攻撃A
攻撃B
5回攻撃した
攻撃Bが終った

17. ステートマシンを実装するために
ステートマシンを
Unity上で図として
作れます

18. 例えば
アクション 説明
ぐるぐるパンチ 手をぐるぐるさせて一撃
ワン・ツー・頭突
き
右パンチ、左パンチ頭突き
のコンビネーション

19. 動きの企画

20. 実際の実装
考えたことをそのまま書いてもらう！

21. Demo：AIの開発環境

22. プログラマーは最低限のコードを書く
部品（コンポーネント）の提供
小さく
単機能で！

23. AIコンポーネント：ジャンプ
引数 説明
初速 敵キャラクターが
ジャンプするときの初速
着地時に遷移
Y軸方向に飛び上がります

24. AIコンポーネント：攻撃
引数 説明
種類 攻撃の種類を選択します
１：ぐるぐるパンチ
２：ワン・ツー・頭突き
攻撃終了時に遷移
対応する攻撃を出す

25. AIコンポーネント：待機
引数 説明
なし
動きを止めて待機モーションになります

26. AIコンポーネント：ランダム
引数 説明
Weight ランダムで抽選するときの
確率。
ランダムに遷移します

27. 組み合わせで増える要望
ジャンプしながら0.5秒で遷移したい
ジャンプしながらプレイヤーの方向に近づきたい
ジャンプしながら30％の確率で攻撃を出したい
→組み合わせ爆発！

28. 複数のコンポーネントを配置
企画者自信が組み合わせる
事ができる！
→プログラマーの作る
コンポーネントの数が
最小限になる！

29. 頻出するAIパターンの問題
ジャンプをしながら◯◯
ジャンプをしながら◯◯
ジャンプをしながら◯◯
ジャンプをしながら◯◯
ジャンプをしながら◯◯
たくさん編集するはめに・・・

30. 頻出するAIパターンの問題
ジャンプをする ＋ ◯◯する
一つだけの変更でOK

31. 頻出するAIのパターンの問題
出現付近をうろうろ

32. 頻出するAIのパターンの問題
出現付近をうろうろ
複数のAIでうろうろする行動パターンが頻出

33. 階層型のステートマシン
同じ挙動をPrefabとしてまとめる
出現付近をうろうろ
プレハブ化
再利用

34. 階層型のステートマシン
・共通化できる
・複雑な遷移になりづらい
・途中キャンセルの挙動が実装可能に

35. Demo：階層型ステートマシン

36. ・企画者が機能の組み合わせを発明します
・企画者がプログラムを理解してくれます
・実装指示が具体的になります
→AI開発の工数がぐんとへります
見えるようにすると・・・

37. ②画面遷移

38. 問題：この画面のソースコードはどこで
しょう？

39. ソースコードの探し方
・エントリポイントから辿る
・TeamEditとか勘で検索してみる
・UIの名前を検索してみる

40. こういうイメージ
HomeState
TeamEditState
DressListState
StrengthState
StrengthState

41. 画面遷移を見える化しよう！
• ゲームが今どのコードを実行しているのかわ
かる
• 現在の画面にどこから来たのかわかる

42. ステートマシンの実装
ArborFSMを貼り付ける

43. ステートの実装
１つのコンポーネントと
して実装
C#でロジックを書く

44. 画面遷移の階層の実装
→階層型ステートマシン
＋ ＋
画面遷移の状態は重なって存在する

45. Demo：画面遷移

46. 複雑な画面遷移図
強化画面
チーム編成
詳細画面
ドレス一覧
ホーム

47. カードの詳細画面の遷移図
強化画面
チーム編成
詳細画面
ドレス一覧

48. ２つ以上の戻り先がある問題
• 前のステートを覚えな
いといけない
• 使う箇所が増えると
コードも書き変えないと
いけない

49. 画面遷移の混線の解消①
A
B
☆
A
B
☆
☆
これだと☆を経由して
A→☆→Bと遷移出来るように見える
２つのステートに同じ Componentをつける

50. 強化画面の遷移図
強化画面
チーム編成
ドレス一覧
※強化画面は複数画面遷移を持っている

51. 画面遷移の混線の解消②
同じ挙動をPrefabとしてまとめる
一連の画面遷移
プレハブ化
再利用

52. 大量の戻り矢印問題
A１
B１
☆
A２ A３
B２ B３

53. 大量の戻り矢印問題
A１
B１
☆
A２ A３
B２ B３

54. 複雑な画面遷移図
強化画面
チーム編成
詳細画面
ドレス一覧
ホーム

55. 整理された画面遷移図
強化画面
チーム編成
ドレス一覧
ホーム
詳細画面
強化画面
詳細画面
詳細画面 詳細画面

56. 見えるようにすると・・・
• 目的のソースコードを簡単に見つけられる
• 見通しが良くなり保守性・可読性が上がる
• 構造の整理がしやすくなるのでバグが減る

57. ③ステートマシンのコード生成

58. ステートマシンをC#で書く
• 某ビジュアルプログラミングツールの実行
速度が遅かった
• 開発当初メカニムにStateBehaviour等の
仕組みは無かった

59. C#のステートマシン
メリット：実行速度が速い
デメリット：編集しづらい

60. C#コードの自動生成で編集しやすく
メリット：
実行速度が速い
（ランタイムはC#なので速度が落ちない）
編集しやすい
（編集はArborなので見ながら編集可能）

61. 自動生成データ作成用コンポーネント
Initializer:ステートに入った時
Controller:毎フレーム実行
Disporser:ステートから出る時

62. 自動生成データ作成用コンポーネント
InitializeStateOnWalk
InitializeStateOnDash
InitializeStateOnJump
InitializeStateOnStay
リフレクションで
関数名を選択させる

63. 自動生成データ作成用コンポーネント
遷移先にも関数をする
遷移先の個数は可変

64. 自動生成データ作成
1レイヤーごとに
ステートマシンを
貼り付ける
生成データ作成用
コンポーネント
で構成された
ステートマシン

65. コードの自動生成
エディタース
クリプトで自
動生成

66. 見えるようにすると・・・
・コードの編集しやすさが上がる！
・C#で書く時と
ビジュアルプログラミング用Assetを使う時の良
い所を同時に取れる

67. ビジュアルプログラミングをすると
• プログラムを扱える人が増える事で
• コミュニケーションコストが減る
• 見通しが良くなることで
コード品質が上がる
• コード量を少なくすることで
実装コストやバグが減る

68. ビジュアルプログラミングで
本当に面白いところを開発しましょう

69. ありがとうございました！

70. 同じツールを見ると言うこと

71. ビジュアルプログラミングの良い所
・テキストのコード量が減る
・扱える人を増やしやすい
・見通しが良くなる

72. プログラムを見える様にしましょう

73. ②画面遷移

74. ららマジの画面遷移のアーキテクチャ
↑この部分を見える化します
Model View
State
（Controller）
FSM
use
複数の遷移を持ちState間を
遷移させる

75. もっと見える様にするために
Arborの
StateBehaviorは
MonoBehaviorと
全く同じやり方での拡
張が可能

76. StateBehaviorのインスペクター拡張
さらに見えるAI開発を！
ダメージが終わるまでの時間を表示する