うちではこうやっています ui構築のルールとplaymakerを使った画面遷移
Post on 11-Apr-2017
5.066 views
TRANSCRIPT
![Page 1: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/1.jpg)
うちではこうやってます
UI構築のルールと
Playmakerを使った画面遷移
株式会社マーベラス
松田裕太
1
![Page 2: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/2.jpg)
自己紹介:松田裕太 いろいろやってきました。雑食エンジニア。
最近はUnityでアプリを作ることが多いです。
マーベラス時代
世に出ていない試作や、名前は出せないプロジェクト
ジー・モード時代
フライハイトアレスティア、パネローグなど
某アニメ制作会社時代
アニメ@wikiというサイトにまとまってました
https://www7.atwiki.jp/anime_wiki/pages/13912.html
某携帯キャリア会社時代
ガラケー用アプリのライブラリ仕様策定など
2
![Page 3: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/3.jpg)
今回のお題
うちではこうやってます
UI構築のルールと
Playmakerを使った画面遷移
マーベラスのすべてのプロジェクトで行っている
手法というわけではありません
今作っているアプリではこうやってますよ
というのを紹介します
3
![Page 4: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/4.jpg)
目次
目的
画面遷移
UI構築ルール
作業フロー
おまけ 4
![Page 5: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/5.jpg)
目的
画面遷移
UI構築ルール
作業フロー
おまけ 5
![Page 6: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/6.jpg)
画面量産の仕組みが欲しかった
今回のプロジェクトは期間に対しての物量が多く
さらに人数が「じわじわ」と増えることが予想された
人が増えるたびに新メンバーの学習のコスト負担になる
悩まずに画面や機能を量産する仕組みが欲しかった
6
0
5
10
15
1 2 3 4 5 6 7 8 9
エンジニアの増減
人数
経過月数
![Page 7: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/7.jpg)
画面を量産するためには
導入時(人が増えたとき)
・ルール説明しやすいこと
・ルールが少ないこと
実装時
・他の実装から真似できる
・担当者が変わってもぱっと見でわかる
7
![Page 8: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/8.jpg)
目的
画面遷移
UI構築ルール
作業フロー
おまけ 8
![Page 9: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/9.jpg)
基本構成
uGUI(Unity5.3.4)
+
Playmaker
9
![Page 10: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/10.jpg)
基本構成:uGUI
Unity標準の2D用UI機能のことを勝手にこう呼んでいる
おそらく公式な呼び方ではない
Unity4.6以前はNGUIという
UI構築用エディタ拡張アセットがスタンダードだった
しかしUnity4.6でNGUI相当の機能が標準で入ったので
区別するためにuGUIって呼んでいたら
いつの間にか定着していた気がする
10
![Page 11: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/11.jpg)
基本構成:Playmaker
みんな大好きPlaymaker
大人気のエディタ拡張アセット
グラフィカルなステートマシンエディタ
https://www.assetstore.unity3d.com/jp/#!/content/368
PlayMakerなのか
playMakerなのか
Playmakerなのか
よくわからない
11
![Page 12: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/12.jpg)
画面遷移の方式
Unityでの画面遷移の実現方法は大きく分けて2つ
プレハブ入れ替え方式
シーン入れ替え方式
うちの場合は(基本的には)シーン入れ替え方式
(ひとつのシーンをみんなで触るのは危険)
12
![Page 13: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/13.jpg)
シーン内のオブジェクト
各シーンに初期配置されているオブジェクトは1つ
13
コンポーネントは2つのみ
PlaymakerFSM + シーケンスマネージャ
![Page 14: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/14.jpg)
シーンの種類
シーン入れ替え方式でのシーンは2種類
メインシーケンス ゲーム全体の画面遷移を管理するシーン(FSM)
ゲーム起動時から終了までずっと生きている
シーンシーケンス 各画面用のシーン(FSM)
画面遷移で入れ替えられ、破棄されていく
14
![Page 15: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/15.jpg)
シーンの親子関係
15
メインシーケンス
シーンシーケンス
シーンシーケンス
シーンシーケンス
シーンシーケンス
シーンシーケンス
シーンシーケンス
シーンシーケンス
![Page 16: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/16.jpg)
シーンの親子関係
16
startup
ho
me
men
u
party
ad
ven
ture
Lo
g
battle
pictu
reB
oo
k
op
tion
![Page 17: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/17.jpg)
Playmakerを使ったステート管理
Playmakerはグラフィカルなステートマシンとしてだけ利用
アクションはシーケンスマネージャを呼ぶCallMethodだけ
ただし、一部の処理はカスタムアクション化している
17 メインシーケンス シーンシーケンス
![Page 18: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/18.jpg)
ステートの色
18
黒:基本
赤:シーン遷移
橙:通信待ち
紫:チュートリアル
緑:ユーザー操作待ち
![Page 19: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/19.jpg)
ステートの配置
19
上から下へ、左から右へ
1画面に収める
処理のかたまりを意識する
![Page 20: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/20.jpg)
各ステートで行うこと
シーケンスマネージャに用意したメソッドをCallMethodを使って呼ぶ
シーケンスマネージャにはFsm~~~という名前でPlaymakerのステートから呼ばれるメソッドを用意
FsmGetHome()、FsmMakeUi()、FsmShowHelp…
各Fsmメソッド内でPlaymakerのイベントを呼び
ステートの遷移を行う
明示的に呼ばない場合はFINISHEDが自動的に発生
20
![Page 21: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/21.jpg)
各ステートで行うこと
21
![Page 22: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/22.jpg)
ステートで行うこと
22
①make ui に到達
②FsmMakeUiAdventureLog
を実行
③UiAdventureLog.Create()
でプレハブをインスタンス化
次のステートへ
![Page 23: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/23.jpg)
目的
画面遷移
UI構築ルール
作業フロー
おまけ 23
![Page 24: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/24.jpg)
UIプレハブという概念
ホーム画面ならUIHomeプレハブ
オプション画面ならUIOptionプレハブ
メニュー画面ならUIMenuプレハブ
といった形で各画面(シーン)用にプレハブを用意
プレハブにはそのプレハブ専用のクラスを用意
ホーム画面ならUIHomeクラス
UIHome.Create()でプレハブを生成、画面に配置。
1シーン、1プレハブ、1画面が基本
24
![Page 25: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/25.jpg)
25
ホーム
もどる ヘルプ
クエスト
パーティ
ずかん
オプション
メニュー 設定
例えばこんな画面(メニュー)
![Page 26: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/26.jpg)
26
例えばこんな画面(メニュー)
ホーム
もどる ヘルプ
クエスト
パーティ
ずかん
オプション
メニュー 設定
UIHeader
UIFooter
UIMenu
![Page 27: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/27.jpg)
27
UIMenuプレハブの構成
![Page 28: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/28.jpg)
28
ホーム
もどる ヘルプ
道具
メニュー 設定
例えばこんな画面(リスト)
武器 防具
こんぼう
ナイフ
かしのつえ
AK-47
はがねのつるぎ
てつのオノ
![Page 29: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/29.jpg)
29
ホーム
もどる ヘルプ
道具
メニュー 設定
例えばこんな画面(リスト)
武器 防具
こんぼう
ナイフ
かしのつえ
AK-47
はがねのつるぎ
てつのオノ
UIHeader
UIFooter
UIItemList
![Page 30: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/30.jpg)
30
ホーム
もどる ヘルプ
道具
メニュー 設定
親子関係を意識して分割
武器 防具
こんぼう
ナイフ
かしのつえ
AK-47
はがねのつるぎ
てつのオノ
![Page 31: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/31.jpg)
31
UIItemListプレハブの構成
![Page 32: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/32.jpg)
画面内での処理のながれ
イベントは親へ
指示は子へ
32
![Page 33: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/33.jpg)
画面内での処理のながれ
TabAはUITabAreaへイベントを発行する
↓(親へ)
UITabAreaは受けたイベントをUIItemListへ渡す
↓(親へ)
UIItemListは受けたイベントを判断
UITabArea、UIContentsAreaへと指示
↓
↓(子へ)
↓
UITabAreaの各Tabの色が変わる。
UIContentAreaのScrollViewの内容が更新される。
33
![Page 34: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/34.jpg)
目的
画面遷移
UI構築ルール
作業フロー
おまけ 34
![Page 35: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/35.jpg)
仕様作成から実装までのフロー
35
仕様書作成
仕様確認
UIプレハブ作成
スクリプト開発
UIプレハブ修正
FSM開発
企画
デザイナ
エンジニア
エンジニア
エンジニア
全員
![Page 36: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/36.jpg)
UIプレハブはデザイナさんが作る
デザイナさん専用の
UIプレハブを作成するためのシーン
UIEditorTemp
UIMenuEditor
UIHomeEditor
UIPartyEditor
などなど 36
![Page 37: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/37.jpg)
デザイナ用ブランチ
ブランチの切り方
37
エンジニア用ブランチ
develop
マージ
マージ
![Page 38: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/38.jpg)
目的
画面遷移
UI構築ルール
作業フロー
おまけ 38
![Page 39: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/39.jpg)
通信とエラー処理
APIのレスポンスのコードを独自に指定している。
500(通信エラー)
490(アプリ更新要求) 491(リソース更新要求)
407(アカウントバン) 405(サーバータイムアウト) 403(メンテナンス中)
200(正常)201(準正常)
200、201はAPIをコールしたシーケンスで受け取る。
それ以外は、メインシーケンスが受け取る。
39
![Page 40: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/40.jpg)
通信とエラー処理
40
![Page 41: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/41.jpg)
正常、準正常とは
APIごとに、200、201を規定している。
201がないAPIもある。
例えばgetOtherPlayerProfileというAPIがあるとして
200(正常):対象プレイヤーが存在するとき
レスポンス:他プレイヤーのプロフィール
201(準正常):対象プレイヤーが存在しないとき
レスポンス:エラーメッセージ
41
![Page 42: うちではこうやっています UI構築のルールとPlaymakerを使った画面遷移](https://reader035.vdocuments.mx/reader035/viewer/2022081802/58d0f10e1a28abba558b6f9b/html5/thumbnails/42.jpg)
正常、準正常とは
200のレスポンスは各APIで違う
201のレスポンスは各APIで共通(エラーメッセージのみ)
201が発生する条件は各APIで違う
201発生後の挙動は各シーンシーケンスが自由に行える
500、40x系はメインシーケンスが処理するので
シーンシーケンス側では触れない
42