Submit Search
Upload
UnityでUI開発を高速化した件
•
Download as PPTX, PDF
•
2 likes
•
9,474 views
Grenge, Inc.
Follow
Gotanda.unity #13 in CyberAgent@渋谷 https://gotanda-unity.connpass.com/event/134867/ 登壇者:御厨
Read less
Read more
Mobile
Report
Share
Report
Share
1 of 38
Download now
Recommended
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
Unity Technologies Japan K.K.
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
猫でも分かる UE4のAnimation Blueprintの運用について
猫でも分かる UE4のAnimation Blueprintの運用について
エピック・ゲームズ・ジャパン Epic Games Japan
UniTask入門
UniTask入門
torisoup
Riderはいいぞ!
Riderはいいぞ!
UnityTechnologiesJapan002
Recommended
Unityでパフォーマンスの良いUIを作る為のTips
Unityでパフォーマンスの良いUIを作る為のTips
Unity Technologies Japan K.K.
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
【Unite Tokyo 2019】Unityだったら簡単!マルチプレイ用ゲームサーバ開発 ~実践編~
UnityTechnologiesJapan002
GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
【Unity道場】VectorGraphicsで作る エモい表現
【Unity道場】VectorGraphicsで作る エモい表現
Unity Technologies Japan K.K.
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
猫でも分かる UE4のAnimation Blueprintの運用について
猫でも分かる UE4のAnimation Blueprintの運用について
エピック・ゲームズ・ジャパン Epic Games Japan
UniTask入門
UniTask入門
torisoup
Riderはいいぞ!
Riderはいいぞ!
UnityTechnologiesJapan002
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
KLab Inc. / Tech
UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法
エピック・ゲームズ・ジャパン Epic Games Japan
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装
Koji Morikawa
UniRx完全に理解した
UniRx完全に理解した
torisoup
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
torisoup
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
Unity Technologies Japan K.K.
UnityのクラッシュをBacktraceでデバッグしよう!
UnityのクラッシュをBacktraceでデバッグしよう!
Unity Technologies Japan K.K.
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作る
Unity Technologies Japan K.K.
Unityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
torisoup
オックスフォード図書館制作奮闘記
オックスフォード図書館制作奮闘記
Aiko Shinohara
Observableで非同期処理
Observableで非同期処理
torisoup
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
Unity Technologies Japan K.K.
出張ヒストリア ブループリントを書くにあたって大切なこと
出張ヒストリア ブループリントを書くにあたって大切なこと
historia_Inc
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
エピック・ゲームズ・ジャパン Epic Games Japan
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
Unity Technologies Japan K.K.
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
Katsutoshi Makino
ノベルゲーム動的演出の考え方
ノベルゲーム動的演出の考え方
tuna cook
基礎線形代数講座
基礎線形代数講座
SEGADevTech
スタートアップで培ったアーキテクチャ設計ノウハウ
スタートアップで培ったアーキテクチャ設計ノウハウ
Masakazu Matsushita
複数拠点における開発効率の維持・向上
複数拠点における開発効率の維持・向上
infinite_loop
More Related Content
What's hot
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
KLab Inc. / Tech
UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法
エピック・ゲームズ・ジャパン Epic Games Japan
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装
Koji Morikawa
UniRx完全に理解した
UniRx完全に理解した
torisoup
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
torisoup
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
Unity Technologies Japan K.K.
UnityのクラッシュをBacktraceでデバッグしよう!
UnityのクラッシュをBacktraceでデバッグしよう!
Unity Technologies Japan K.K.
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作る
Unity Technologies Japan K.K.
Unityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
torisoup
オックスフォード図書館制作奮闘記
オックスフォード図書館制作奮闘記
Aiko Shinohara
Observableで非同期処理
Observableで非同期処理
torisoup
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
Unity Technologies Japan K.K.
出張ヒストリア ブループリントを書くにあたって大切なこと
出張ヒストリア ブループリントを書くにあたって大切なこと
historia_Inc
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
エピック・ゲームズ・ジャパン Epic Games Japan
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
Unity Technologies Japan K.K.
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
Katsutoshi Makino
ノベルゲーム動的演出の考え方
ノベルゲーム動的演出の考え方
tuna cook
基礎線形代数講座
基礎線形代数講座
SEGADevTech
What's hot
(20)
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
UE4で作成するUIと最適化手法
UE4で作成するUIと最適化手法
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
RPGにおけるイベント駆動型の設計と実装
RPGにおけるイベント駆動型の設計と実装
UniRx完全に理解した
UniRx完全に理解した
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
UIElements+UI BuilderでEditor拡張を作ろう
UIElements+UI BuilderでEditor拡張を作ろう
UnityのクラッシュをBacktraceでデバッグしよう!
UnityのクラッシュをBacktraceでデバッグしよう!
Cinemachineで見下ろし視点のカメラを作る
Cinemachineで見下ろし視点のカメラを作る
Unityでオニオンアーキテクチャ
Unityでオニオンアーキテクチャ
オックスフォード図書館制作奮闘記
オックスフォード図書館制作奮闘記
Observableで非同期処理
Observableで非同期処理
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
出張ヒストリア ブループリントを書くにあたって大切なこと
出張ヒストリア ブループリントを書くにあたって大切なこと
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
バイキング流UE4活用術 ~BPとお別れするまでの18ヶ月~
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
ノベルゲーム動的演出の考え方
ノベルゲーム動的演出の考え方
基礎線形代数講座
基礎線形代数講座
Similar to UnityでUI開発を高速化した件
スタートアップで培ったアーキテクチャ設計ノウハウ
スタートアップで培ったアーキテクチャ設計ノウハウ
Masakazu Matsushita
複数拠点における開発効率の維持・向上
複数拠点における開発効率の維持・向上
infinite_loop
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
KainumaRyo
Inside CyberAgent's Game Development
Inside CyberAgent's Game Development
Suguru Shirai
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
Tier_IV
Agile Testing Night #4 LT
Agile Testing Night #4 LT
Yoshifumi Takeshima
Unityでこんなことができる KLab×博多Tech塾
Unityでこんなことができる KLab×博多Tech塾
KLab Inc. / Tech
エクストリーム・プログラミング開発におけるUIテスト #yjbonfire
エクストリーム・プログラミング開発におけるUIテスト #yjbonfire
Yahoo!デベロッパーネットワーク
lt37
lt37
GIG inc.
How you can speed up serverless development by local
How you can speed up serverless development by local
PIXTA Inc.
AbemaTVのUIデザイン 僕なりの運用の心得
AbemaTVのUIデザイン 僕なりの運用の心得
Shunsuke Matsumoto
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Yuki Okada
Google Material DesignをPolymerで表現しよう
Google Material DesignをPolymerで表現しよう
Masayuki Abe
Web App for Containers のデプロイでつまずいた話
Web App for Containers のデプロイでつまずいた話
Shigenari Ohnuma
unity build on github actions
unity build on github actions
Daiki Mogmet Ito
こだわりのkintone
こだわりのkintone
Yusuke Amano
NuxtJS + SSRで作ったGREE Tech Conference 2020
NuxtJS + SSRで作ったGREE Tech Conference 2020
gree_tech
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
GREE/Art
Azure Bot Service で CI/CD on Azure Dev Ops
Azure Bot Service で CI/CD on Azure Dev Ops
Atsushi Yokohama (BEACHSIDE)
Androidエンジニアになってからの1年間の感想と振り返り
Androidエンジニアになってからの1年間の感想と振り返り
ichirokato5
Similar to UnityでUI開発を高速化した件
(20)
スタートアップで培ったアーキテクチャ設計ノウハウ
スタートアップで培ったアーキテクチャ設計ノウハウ
複数拠点における開発効率の維持・向上
複数拠点における開発効率の維持・向上
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
GitHub Actionsを使ってAPI外部公開時の作業を自動化した話
Inside CyberAgent's Game Development
Inside CyberAgent's Game Development
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
Agile Testing Night #4 LT
Agile Testing Night #4 LT
Unityでこんなことができる KLab×博多Tech塾
Unityでこんなことができる KLab×博多Tech塾
エクストリーム・プログラミング開発におけるUIテスト #yjbonfire
エクストリーム・プログラミング開発におけるUIテスト #yjbonfire
lt37
lt37
How you can speed up serverless development by local
How you can speed up serverless development by local
AbemaTVのUIデザイン 僕なりの運用の心得
AbemaTVのUIデザイン 僕なりの運用の心得
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Google Material DesignをPolymerで表現しよう
Google Material DesignをPolymerで表現しよう
Web App for Containers のデプロイでつまずいた話
Web App for Containers のデプロイでつまずいた話
unity build on github actions
unity build on github actions
こだわりのkintone
こだわりのkintone
NuxtJS + SSRで作ったGREE Tech Conference 2020
NuxtJS + SSRで作ったGREE Tech Conference 2020
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
【CEDEC2016】Ui discussionのススメ uiデザインの品質を効率的に向上させるには
Azure Bot Service で CI/CD on Azure Dev Ops
Azure Bot Service で CI/CD on Azure Dev Ops
Androidエンジニアになってからの1年間の感想と振り返り
Androidエンジニアになってからの1年間の感想と振り返り
UnityでUI開発を高速化した件
1.
UnityでUI開発を高速化した件 御厨 雄輝 2019/07/24 Gotanda.unity
#13
2.
話すこと • 自己紹介 • Kick-Flight •
UI開発高速化のために行ったこと(3点)
3.
自己紹介 御厨 雄輝(みくりや ゆうき) 株式会社サイバーエージェント 2013年度入社 エンジニア ▼趣味 地下アイドル ボルダリング ポケモンカード
4.
5.
Kick-Flight
6.
UI開発高速化のために行ったこと Q. なぜ高速化した?
7.
UI開発高速化のために行ったこと TGS 2018 闘会議 2019 CBT 2018/09 2019/01 2019/05
8.
UI開発高速化のために行ったこと TGS 2018 闘会議 2019 CBT 2018/09 2019/01 2019/05 インゲーム
新キャラ サーバ
9.
UI開発高速化のために行ったこと A. 高速化しないと間に合わない (ゲームの面白さを伝える部分の開発に比重をおいていた)
10.
UI開発高速化のために行ったこと Q. 何をした?
11.
UI開発高速化のために行ったこと A1. UI基盤機能を作る
12.
UI開発高速化のために行ったこと Unityのデフォルト機能で補えないもの
13.
UI基盤機能を作る ▼要件が不明でも必須なもの • 画面遷移 • 画面 •
ダイアログ • ボタン ▼要件によって必要なもの • ドラッグアンドドロップ • グリッドスクローラー(列、行) • スナップスクローラー(iOSホーム画面) • etc
14.
UI基盤機能を作る ▼画面設計方針 • 画面用ライフサイクルを作る • 画面遷移マネージャで各処理を呼ぶ ▼移動前画面 OnDisableStart OnDisableCoroutine OnDisableEnd ▼移動後画面 OnEnableStart OnEnableCoroutine OnEnableEnd 遷移
15.
UI基盤機能を作る ▼ダイアログ設計方針 • ダイアログ用ライフサイクルを作る • ダイアログマネージャで各処理を呼ぶ ▼ダイアログ OnCreate OnOpen OnClose 開く 閉じる
16.
UI基盤機能を作る ▼ボタン設計方針 • イベント用のインターフェースを実装 • タッチ、リリース、クリック、長押しを実装 •
外から処理を設定し使用する • アニメーション、SEは継承クラスで実装 ▼ボタン IPointerClickHandler IPointerDownHandler IPointerUpHandler Update(LongPress)
17.
UI基盤機能を作る ▼意識すべきこと • プロジェクト固有化しない • サードパーティ製のアセットありきにしない →
別案件でも展開できるくらいの深さ(余計なものを作らない) → それより先は継承して作る
18.
UI開発高速化のために行ったこと A2. デザインのレギュレーション を決める
19.
デザインのレギュレーションを決める 有象無象なUIデザインが生まれると 有象無象なUI実装が生まれる
20.
デザインのレギュレーションを決める
21.
デザインのレギュレーションを決める ▼デザイナに伝えたUnityのあれこれ • 9Slice • Color(乗算) •
SpriteAtlas • Mask
22.
デザインのレギュレーションを決める ▼9Slice • ImageのSlice機能を用いて余計な画像を作ってしま うロスを減らす • エンジニアがどの素材を使えばいいか悩むロスを減 らす
23.
デザインのレギュレーションを決める ▼Color(乗算) • 白色画像に色をのせてUIをつくり余計な画像を作っ てしまうロスを減らす • プログラムで色を定義することで素材作成でのミス を減らす
24.
デザインのレギュレーションを決める ▼SpriteAtlas • パフォーマンス観点で無限に画像素材を増やしたくない理由 の説明(ドローコール、メモリ) • レギュレーションの指標にする →
まとめることができるところをまとめる
25.
デザインのレギュレーションを決める ▼Mask • パフォーマンス観点で修正される可能性のある多用した くない表現の説明 • Maskを使わない素材の作り方 はじめからMaskされた素材を使う
フレームをのせてMaskを使用しないデザインにする
26.
UI開発高速化のために行ったこと A3. レギュレーションをもとに Prefab化
27.
レギュレーションをもとにPrefab化 ▼本件に必要だったもの • ダイアログ • ボタン •
サムネイル
28.
レギュレーションをもとにPrefab化 レイアウトさせる箇所を減らす (エンジニア、デザイナ問わず)
29.
レギュレーションをもとにPrefab化 Nested Prefabでやりやすくなった
30.
レギュレーションをもとにPrefab化
31.
レギュレーションをもとにPrefab化 AnchorでPrefabを置いた親に合わせて 適切なレイアウトになるように設定する
32.
レギュレーションをもとにPrefab化 AnchorでPrefabを置いた親に合わせて 適切なレイアウトになるように設定する
33.
レギュレーションをもとにPrefab化 AnchorでPrefabを置いた親に合わせて 適切なレイアウトになるように設定する
34.
レギュレーションをもとにPrefab化
35.
UI開発高速化のために行ったこと ▼まとめ • UI基盤機能を作る • デザインのレギュレーションを決める •
レギュレーションをもとにPrefab化
36.
UI開発高速化のために行ったこと ▼まとめ • UI基盤機能を作る • デザインのレギュレーションを決める •
レギュレーションをもとにPrefab化 → レイアウトするオブジェクトも 共通化することが重要
37.
UI開発高速化のために行ったこと ▼まとめ • UI基盤機能を作る • デザインのレギュレーションを決める •
レギュレーションをもとにPrefab化 → UIのレギュレーション整備は UXに好影響
38.
ありがとうございました!
Editor's Notes
アジェンダ
入社時からUnityをさわりはじめ現在3本目のUnity製スマホゲームを製作中 LT初登壇なのでおてやわらかに…
株式会社グレンジで開発中のアクションタイトル 先日CBTを行いリリースに向け絶賛開発中 現在事前登録中なので是非公式サイトをのぞいてみてください
3Dのキャラを操作し360度飛行しながら4対4で対戦を行うアクションゲーム 様々なキャラクターや多彩なスキルを使用しマルチプレイの対戦を行う 本日は本ゲームのUI開発についてお話させていただきます
そもそもなぜ高速化が必要だったのかという点について説明
直近のキックフライトのイベント 先日開催したCBTに加えトーキョーゲームショウやニコニコ闘会議への出展など短期のスパンで大きいイベントが立て続けにあった
ユーザにお披露目したTGSまではゲームの本質的な部分(ゲームルールやバトルまわり)の改修に力を入れており闘会議までは新キャラの追加、CBTまでにはAPIやデータの疎通実装など短期間で重要な機能の実装が必要だった 闘会議までは出展ということもありバトルができるところまでで大丈夫だったがCBTではゲームを通しての一連の機能が必要になった
出展でゲームの本質部分であるインゲームでダイレクトに面白さを感じてもらうためそちらに力をさきたい状況だった UIの実装に手間取らない環境整備をしておかないと間に合わないというスケジュール感
ただUI実装は得意とするところであったので任せてくださいという感じで進めた 何をしたかについて3つのポイントを伝える
Unityのデフォルト機能で補えないコンポーネントのスクリプト作成を行う
大抵のゲームでは要件が不明でも必要な機能が想像できる 仕様展開が行われる前に先回りして実装することができる これらの機能は資産化するので会社として作っておくことが望まれる 先回りで浮いた時間を使って要件によって必要なものを作る
アニメーションやSEなどプロジェクト固有となりそうな処理は基盤的な機能に含めると別の箇所で使用するにも汎用性がなくなる 余計な機能を増やして作る側も使う側も時間をとらないように必要最低限のものをつくり継承先で機能を増やす Androidのバックキー対応などでもこのような基底機能の存在は開発速度を上げるために重要
デザインの数だけ実装が必要
左がフォントのレギュレーション、右がカラーのレギュレーション 他にも多々あるがわかりやすい例としてこの2つを載せた デザイナに数を絞り整えていってもらう作業 決まってしまえばプログラムで定義できることが多いので実装もある程度安心できる
デザイナに伝えて理解しておいてもらったほうが良いUnityの機能 実際に使用する素材の書き出し方に関わるのでデザイナにオリエンして理解してもらった
本件で必要になった共通化できるオブジェクト ゲームを作っていれば同じような感じになると思う
考慮すべきなのはレイアウトさせる箇所を減らすという点 プロジェクトによってエンジニアがレイアウトしたりデザイナがレイアウトしたりフローは様々だと思うが職種の違いは関係なく人の違いによってレイアウトの精度のブレは出てしまう ここをPrefabでカバーできる設計を目指していくと良い
以前はレイアウトさせる箇所を減らす設計を目指すためにプログラムでひと手間必要だったがUnity 2018.3から追加されたNested Prefabでやりやすくなったと感じる
シンプルなダイアログを作成する場合の例です
これはダイアログの背景 親に配置するだけでタイトル位置と白い部分のレイアウトが担保される
閉じるボタン ダイアログ下部からの距離を指定している
ダイアログ内ボタン ダイアログ下部からの距離を指定している
AnchorがつけられたPrefabを配置していき数値をいじることなくレイアウトを完成させる例 レギュレーションを決めたうえで部品を作っておくと配置するだけでレイアウトできる 以前は調整を反映させるためにprefabの参照をもって生成するプログラムを書いたりしていたが Nested Prefabがあることで細かな調整も一斉に反映できるようになった これも高速化につながった
以上3点がUI開発を高速化させるために行った3つのこと 主にレギュレーションの整備、共通化をキーワードに実装コストを下げていく方針で高速化を行った エンジニアだけで完結しないので骨が折れる作業だが これらの項目はUI実装のクオリティアップのために高速化にかかわらずやったほうがいいこと
エンジニアがプログラムで意識することがある共通化のようなデザインパターンはUI実装でも同じだと思っている 同じものを使い回すことでバグのリスクを減らせるし実装コストも減らせる またレイアウトはデザイナ視点からでしか評価しづらいところなので狙い通りに行かないことがあるのも吸収でき UXの向上につなげることができる
レギュレーションの整備はUXにも繋がる 学習コストやインタラクションのブレがなくなることでユーザー体験の最適化を行うことができる 近年はどの企業さんもゲームのクオリティが高いのでUXの最適化は市場でいっぽぬきんでるためにも捨てがたいところだと思う 以上でまとめとさせていただきます
Download now