【Unite 2018 Tokyo】Unityにおける疎結合設計 ～UIへの適用事例から学ぶ、テクニックとメリット～

1.8K Views

May 09, 18

#unite #unitetokyo #unitetokyo2018 #Unity #UI Design #Code Coupling #Workflow Optimization #Project Management

スライド概要

講演者：Florian Andreas Gantzert(KLab株式会社)

こんな人におすすめ
・Unityにおける疎結合テクニックを知りたいエンジニア
・開発ワークフロー改善とつながる「疎結合」を知りたいマネージャー、デザイナー
・プログラミングパターンに興味のある方

受講者が得られる知見
・疎結合設計によるデザイナーとエンジニアのワークフローのメリット
・Unityにおける疎結合テクニック

profile-image
スライド一覧

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 5.5MB)

関連スライド

slide-thumbnail

UnityのVR開発環境の現状整理 2022
unity unitysync
user-img Unity Technologies Japan 157.7K
slide-thumbnail

UIもshaderで盛る！ 〜 shaderとanimationで作るリッチなUI演出
unity unitysync
user-img Unity Technologies Japan 116.2K
slide-thumbnail

オープンソース自動運転シミュレーター「AWSIM」のご紹介と実装事例
unity unitysync
user-img Unity Technologies Japan 83.2K
slide-thumbnail

トゥーンシェーダー応用編 ～楽して破綻のないアウトラインを目指して～
unity unitysync
user-img Unity Technologies Japan 76.8K
slide-thumbnail

モバイル向け大量描画テクニック
unity unitysync
user-img Unity Technologies Japan 71K
slide-thumbnail

【Unity道場 2月】シェーダを書けるプログラマになろう
gpu unity unity3d shader unity道場 unitydojo unity道場 2月~シェーダを書けるプログラマになろう~
user-img Unity Technologies Japan 48.4K
各ページのテキスト
1.

2018/5/9 Unityにおける疎結合設計 Florian Andreas Gantzert （@TheAndiGantz） KLab株式会社 / エンジニアリングマネージャー

2.

アジェンダ • UI • 結合 • UIアゲイン • 今日のおさらい

3.

UI

4.

UI Unity EditorでゲームUIを ビジュアルに作ることができる（uGUI）…

5.

UI …にも関わらず、デザイナではなく プログラマがUIを作る ケースがある

6.

UI ワークフロー / The Bad プログラマ UIデザイナ アセット 仕様書 仕様書 制作 作成 熟読 UI制作 レビュー

7.

UI ワークフロー / The Bad - スループットが低い - イテレーションが長い - 同時作業ができない - 本来不要なタスクが発生する - 専門外のタスクをこなすことになる

8.

UI UIデザイナ アセット UI 制作 制作 プログラマ ワークフロー / The Good デザイナ コード サポート 最適化 コミュニケーション レビュー

9.

UI ワークフロー / The Good - スループットが高い - イテレーションが早い - 同時作業ができる - それぞれの得意分野が活かせる

10.

UI The Goodへの鍵は？

11.

結合

12.

結合 結合 一方の変更によって他方の変更が 必要となる

13.

結合 密結合 結合している状態 疎結合 結合していない状態

14.

結合 In English, please! 結合 Coupling 分割 Decoupling 密結合 Tight Coupling 疎結合 Loose Coupling

15.

結合 結合レベル 結合はコードだけの話ではない

16.

結合 結合レベル レベル 影響範囲 ワークフロー プロジェクト全体 データ コード プログラマ

17.

結合 結合レベル コードの結合が データとワークフローの結合に 繋がる

18.

結合 結合と抽象化 疎結合は抽象化で実現させる

19.

結合 結合と抽象化 密結合 疎結合 分割 抽象化層

20.

結合 結合と抽象化 抽象化レベル ワークフロー データ コード

21.

結合 結合と抽象化 抽象化は 汎用化でも一般化でもない 縛りのないシンプルな抽象化が望ましい

22.

結合 結合バランス 疎結合にバランスがある

23.

結合 結合バランス / The Problem 結合のバランスが プロジェクトの規模に依存する

24.

結合 結合バランス / The Problem - プロジェクト規模とともに要素が 規模拡大 変化する - 小規模で通用したテクニックが 裏目に出たりする

25.

結合 結合バランス / The Problem 疎結合 バランス プロジェクト規模

26.

結合 結合バランス / The Good https://en.wikipedia.org/wiki/Trio_(music)#/media/File:Schumann_-_Halir_-_Dechert_Trio.jpg

27.

結合 結合バランス / The Bad https://sanskarans.deviantart.com/art/Hydra-616295199

28.

結合 結合バランス / The Bad 孤立しているタスクが 孤立した タスク！？ - 巨大化する - 副作用が発生する - 対応が複雑になる

29.

結合 結合バランス / The Solution バランスがズレてもまだ手遅れじゃない

30.

結合 結合バランス / The Solution バランスの鍵は 分野相互間コミュニケーショに ある

31.

UIアゲイン

32.

UIアゲイン プログラマ UIデザイナ ワークフロー / The Goal アセット UI 制作 制作 デザイナ コード サポート 最適化 レビュー

33.

UIアゲイン ワークフロー / The Problem - 同時作業によるコンフリクトはありうる - ワークフロー上でそのコンフリクトを阻止できない

34.

UIアゲイン ワークフロー / The Solution - データを分割して、コンフリクトを阻止する - コード上でその分割に対応する

35.

UIアゲイン データ分割 UIシーン - UI用の独立したUnityシーンを用意する - デザイナがそのシーンを所有する - UIシーンは他のゲーム（シーン）と 連携させる

36.

UIアゲイン データ分割 / The Problem - Unityのシリアライズ機能が使えない！？ - UIシーンと他のシーンはどうやって連携させる？

37.

UIアゲイン データ分割 / The Solution - MVC・MVVM（今回は割愛＊） - UnityEngine.ExposedReference<T>？ - メッセージ・バス ＊ご興味のある方は、GDC 2017のData Binding Architectures for Rapid UI Creation in Unityがおすすめ

38.

UIアゲイン UnityEngine.ExposedReference<T> - Unity Timelineで利用されている - ランタイム時にIDを使って参照を解決する - ExposedReference<T>本体側でも ルックアップテーブルでももIDを管理する 必要がある

39.

UIアゲイン メッセージ・バス - 必要な情報分だけメッセージとして抽象化し、 バスに飛ばす - バスの接続先でメッセージを処理する

40.

UIアゲイン メッセージ・バス バス 情報元 バス 処理先

41.

UIアゲイン メッセージ・バス / The Good - 処理先・情報元を差し替えることで デザイナ向けのデバッグ機能などが 追加しやすい

42.

今日のおさらい

43.

今日のおさらい 結合はコードの話だけではない データとワークフローでも発生する

44.

今日のおさらい 規模と共に疎結合が必要になってくる

45.

今日のおさらい コードの結合は、 データとワークフローの結合に 繋がる

46.

今日のおさらい 疎結合への道は抽象化で開く

47.

今日のおさらい コードとデータの疎結合は よりよいワークフローに 繋がる

48.

今日のおさらい シーンを分けることによって Unityにおける同時作業が やりやすくなる

49.

今日のおさらい メッセージ・バスで 複数のUnityシーンやロジックなどを 疎結合的に繋げることができる

50.

Thank you! ご静聴ありがとうございました！

51.

Bonus Slides

52.

Roll-a-ball - テストを自動化したい - MLエージェントに遊ばせたい - そのために入力元を差し替えたい！

53.

Roll-a-ball チュートリアルの入力処理 / The Problem

54.

Roll-a-ball チュートリアルの入力処理 / The Solution ゲームロジック Unity API 改善 ゲームロジック 抽象化層 Unity API …

55.

Roll-a-ball 入力処理インターフェース化

56.

C#における抽象化 インターフェース化 イベント化 処理側が 情報元が タイミングを決める タイミングを決める

57.

C#におけるイベント化 - 言語レベルで対応している （delegate・eventキーワード） - Unity APIでも使われている（UnityEditor. EditorApplication.hierarchyChangedなど）

58.

C#におけるイベント化 event vs. メッセージ・バス event メッセージ・バス - 接続先は発信元を知っている - 接続先と情報元はお互いを知 - 発信元しかイベントを発信で きない らない - 誰もがイベントを発信できる