---
title: 【Unite 2017 Tokyo】Unityで出来る『見える開発』のススメ　〜スマホゲーム「ららマジ」開発事例〜
tags:  #development #example #smartphone #unity #unity3d #スマートフォン #開発 #事例 #unite 2017 tokyo  
author: [Unity Technologies Japan](https://convert.docswell.com/user/UnityJapan)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DKJ4QGV571.jpg?width=480
description: 講演者：奥村 典史(グリー株式会社)   こんな人におすすめ  ・UnityでAIが必要なゲームを開発している人  ・Unityで複雑な画面遷移のあるゲームを開発している人   受講者が得られる知見  ・ゲーム開発におけるビジュアルプログラミングの使い所  講演動画：https://youtu.be/leweFrRHrrw
published: June 07, 17
canonical: https://convert.docswell.com/s/UnityJapan/ZJEQ4K-unite-2017-tokyounity-76727793
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/DKJ4QGV571.jpg)



# Page. 2

![Page Image](https://bcdn.docswell.com/page/PLE1PD327G.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/8GEW2YP2J2.jpg)



# Page. 4

![Page Image](https://bcdn.docswell.com/page/W47ZDXK4E3.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/KYJ614QGEV.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/5GJ54QRX74.jpg)

①AI


# Page. 7

![Page Image](https://bcdn.docswell.com/page/V9E2VPDQER.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5D7Y352YJM.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2VENVN8RJ8.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GY796RKZ73.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/5G78ZW2YJD.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/ML7LDN29JR.jpg)

考える人≠作る人


# Page. 13

![Page Image](https://bcdn.docswell.com/page/54EMPX8VEW.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/ZPER1N5WE9.jpg)

そこでVisual Programming


# Page. 15

![Page Image](https://bcdn.docswell.com/page/NP7XYNKVJX.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/637K3N557D.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/4LJ3GVK175.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/V8JD183K7G.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4VEPQ84378.jpg)

動きの企画


# Page. 20

![Page Image](https://bcdn.docswell.com/page/L27V5NXN7Q.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Z5JG6KV5EL.jpg)

Demo：AIの開発環境


# Page. 22

![Page Image](https://bcdn.docswell.com/page/V47Q4N6LJP.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/DKE4QG45J1.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PL71PD42JG.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/8G7W2YX2E2.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/W4JZDX6473.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/KYE6142G7V.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/5GE54Q2XJ4.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/V972VP4Q7R.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/5DJY35MYEM.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/2V7NVNWRE8.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/GYJ96RXZJ3.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/5GJ8ZW9YED.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/MLJLDNW9ER.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/547MPX9V7W.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/ZP7R1NGW79.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/NPJXYNXVEX.jpg)

②画面遷移


# Page. 38

![Page Image](https://bcdn.docswell.com/page/63JK3NW5JD.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/4LE3GV11J5.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/V8ED18XKJG.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/4V7PQ8P3J8.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/L2JV5N2NJQ.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/Z5EG6KR57L.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/V4JQ4NVLEP.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/DK74QGM5E1.jpg)

Demo：画面遷移


# Page. 46

![Page Image](https://bcdn.docswell.com/page/PLJ1PD82EG.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/8GJW2YZ272.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/W4EZDX14J3.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/KY7614LGJV.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/5G754Q1XE4.jpg)

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


# Page. 51

![Page Image](https://bcdn.docswell.com/page/V9J2VP1QJR.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/5DEY35ZY7M.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/2VJNVN3R78.jpg)

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


# Page. 54

![Page Image](https://bcdn.docswell.com/page/GYE96R9ZE3.jpg)

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


# Page. 55

![Page Image](https://bcdn.docswell.com/page/5GE8ZWDY7D.jpg)

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


# Page. 56

![Page Image](https://bcdn.docswell.com/page/MLELDNM97R.jpg)

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


# Page. 57

![Page Image](https://bcdn.docswell.com/page/54JMPXYVJW.jpg)

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


# Page. 58

![Page Image](https://bcdn.docswell.com/page/ZPJR1N9WJ9.jpg)

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


# Page. 59

![Page Image](https://bcdn.docswell.com/page/NPEXYNQV7X.jpg)

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


# Page. 60

![Page Image](https://bcdn.docswell.com/page/63EK3N95ED.jpg)

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


# Page. 61

![Page Image](https://bcdn.docswell.com/page/4L73GVW1E5.jpg)

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


# Page. 62

![Page Image](https://bcdn.docswell.com/page/V87D18KKEG.jpg)

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


# Page. 63

![Page Image](https://bcdn.docswell.com/page/4VJPQ8K3E8.jpg)

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


# Page. 64

![Page Image](https://bcdn.docswell.com/page/L2EV5NVNEQ.jpg)

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


# Page. 65

![Page Image](https://bcdn.docswell.com/page/Z57G6KL5JL.jpg)

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


# Page. 66

![Page Image](https://bcdn.docswell.com/page/V4EQ4NYL7P.jpg)

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


# Page. 67

![Page Image](https://bcdn.docswell.com/page/DKJ4QGW571.jpg)

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


# Page. 68

![Page Image](https://bcdn.docswell.com/page/PLE1PDY27G.jpg)

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


# Page. 69

![Page Image](https://bcdn.docswell.com/page/8GEW2YG2J2.jpg)

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


# Page. 70

![Page Image](https://bcdn.docswell.com/page/W47ZDXL4E3.jpg)

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


# Page. 71

![Page Image](https://bcdn.docswell.com/page/KYJ614WGEV.jpg)

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


# Page. 72

![Page Image](https://bcdn.docswell.com/page/5GJ54QMX74.jpg)

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


# Page. 73

![Page Image](https://bcdn.docswell.com/page/4LE3GVW4J5.jpg)

②画面遷移


# Page. 74

![Page Image](https://bcdn.docswell.com/page/V8ED18K5JG.jpg)

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


# Page. 75

![Page Image](https://bcdn.docswell.com/page/4V7PQ8KDJ8.jpg)

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


# Page. 76

![Page Image](https://bcdn.docswell.com/page/L2JV5NVGJQ.jpg)

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


