Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

トップ > 勉強会/イベントレポ > 【勉強会レポ】 : Unity UIエンジニアリング勉強会

【勉強会レポ】 : Unity UIエンジニアリング勉強会

勉強会/イベントレポ 勉強会/イベント-その他Unity関係

勉強会のレポート(メモ)です。
参加したのはこちら、「Unity UIエンジニアリング勉強会」
会場はNIFcLoungeさんです。

unity-ui-avengers-outgame.peatix.com

ハッシュタグ : #unity_avengers

f:id:Raspberly:20190803235333p:plain

 

 

 

 

 

#1 『もしあなたがアウトゲームをつくるときになったらやること』 @masakoha523

IRIAMというアプリを作っていました。今回はそれらの実体験も含めます。

そもそもアウトゲームって何？

大部分がUIで定義されていて、それを用いて何らかのアクションを起こすパート

これを作るとしたら何を考えるか　そんな話をします
今回はuGUIの話ではなくコードをごりごり書く話をします

プロジェクト発足時にやっておきたいこと

・用語の統一
ポップアップ、モーダル、ダイアログなどはきちんと定義しておく
これがないとPrefabやクラス名に大きな影響がでてしまう

・コード規約の統一
・動作基準端末と動作対象端末の選定
・CanvasOrderの設定
UIは複数の画面が重なっていくことが多い、なので各UIのレイヤーを決めておきましょう。
もしレイヤーをさわる時、uGUIを使うアセットがある場合は注意しましょう

・デザインの話

フォント、ボタンの大きさ、マージン幅、色など

これらの認識を合わせておこう

 

UIの実装　複数人開発の効率化

MVP

IRIAMではMVPアーキテクチャを採用しました
どういうコードを書くのかという指針になります

MVPについてはこちらをみてね

developers.cyberagent.co.jp

共通パーツを作る

拡縮するボタン、ポップアップ機能

画面遷移基盤を作る

どこの画面も同じように実装できる
最初にやらないと、後にいろいろ独自実装が入ってきて切り離せなくなってしまう

たくさんの機能やオープンソースフレームワークを作った話

IRIAMで作った機能は3つあります

Clione

GitHub - MasaKoha/Clione: スマホゲームのアウトゲームので使用される、様々なパターンの画面遷移基盤

画面遷移のライブラリ

Icarus

ローカライズシステム

GitHub - MasaKoha/Icarus: ローカライズシステム

MVPScriptGenerator4Unity

GitHub - MasaKoha/MVPScriptGenerator4Unity: MVP Script Generator for Unity Editor

MVP派の方はぜひ使ってください

 

まとめ

アウトゲームは分量との闘い
複数人でつくるなら下地作りが大事です

 

 

 

 

 

 

 

 

#2 UnityのUIでやってはいけないこと

unityはuiを簡単に使うことができますが自動で最適化はしてくれません
なのでやってはいけないことを知っておく必要があります

1.アンカーを使わずにUIを設置してはいけない

アスペクト比が異なる端末で崩れる可能性があります
意図的に中央に置きたいもの以外はアンカーを設定しましょう

驚くべきことに、アスペクト比が動的に変わる端末が出る可能性があります
今後端末ごとにアスペクト比が固定であるという概念はなくなる可能性もあります

ノッチがあるときどうするか

セーフゾーンを作って対応する
ただし、ノッチが右上にあったり、ノッチがなかったりするので
そういう時は頑張ってください

ビルドするとUIのサイズが変わってしまう

Canvas Scalerとかで想定サイズを設定しておきましょう
アスペクト比があっていればいいです
アンカーをちゃんと設定すればある程度の変化にも対応できます

2.特に注意せずマスクを設定してはいけない

マスクを使うとドローコールが増えるので
マスク済みの画像を用意することで抑えることができます

じゃあマスクは悪なのかというとそんなことはない
間隔や範囲を調整するといった工夫もできる

3.何も考えずにUIを動かしてはいけない

UIはたくさんあっても意外と安い、動かさなければほとんど負荷にはならない
ただしどれか一つでも動かすと負荷になる

これはCanvas内にあるUIの再構築に時間がかかるため(多ければ多いほど負荷が大きくなる) 

おすすめの解決方法はTween系を使うこと

LayoutGroupの存在は忘れましょう
これの使用は避けてください

4.透明を何度も描画してはいけない

ポリゴンで抜くなどして描画範囲を減らすことができます　ただしポリゴン数は増える

5.Textの影やアウトラインは使用してはいけない

見栄えがいいがポリゴンが増える(何も動いていない場合はそうでもないが)

TextMeshProを使いましょう
最近ダイナミックフォントも使えるようになりました

6.Atlasになんでもつっこんではいけない

同じタイミングで使うものだけAtlasにしましょう 

7.SpriteDefaultを使ったSpriteRendererをAssetBundleにいれてはならない

自分でマテリアルを作って差し替えましょう

 

 

 

今回の話は信用せずにプロファイラーを信用しましょう

Unityのアップデートなどにより変わる可能性があるためです

 

 

 

 

 

 

 

 

 

LT1 『ちょっとしたUIの変更を楽にする手法』@tty_yamada

話すこと

フォントを一括で変更する
UIの配置を再ビルドせず再配置する

フォントの一括変更

インスペクターからフォントをいちいち変えていられない
uGUI Textの場合エディタ外で名前を変えるだけで差し替えられます
TMPの場合、エディタ拡張でやりました

GitHub - ttyyamada/TMPFontReplacer: UnityのTextMeshProのフォントを一括で変換できるツールです

UIの位置をリビルドせずに変更したい

RemoteSettingsを使いました
ビルドせずパラメータの変更ができるサービスです
バグがあった場合の緊急対応や強制アップデートの仕組みを作ることができます

まとめ

フォントの置き換えは一括でできるとよい
RemoteSettingでリリース後のビルド対応を減らすことができる

 

 

 

 

 

 

LT2 『Presetでちょっぴり楽するUI組み立て』@lycoris102


今日はPresetのお話をします

Presetはコンポーネントの設定を保存することができる機能です
アセットの状態も保存でき、ProjectSettingも保存することができます
保存したPresetをデフォルト値として使うことができます

これを適応できるパターン

1.予期しない当たり判定の無効化

RaycastTargetをオフにしたPresetを使うことができます
これで毎回RaycastTargetをオフにする作業から解放されます

2.デザインガイドラインを作る

アプリ全体で統一感ができます
Presetを用意しておくといいでしょう

Prefabと違ってPresetは変更の追従ができないことに気を付けましょう

3.画像アセットのデフォルト値を設定できる

共通の設定をインポート時に適応することができます

 

 

Presetをぜひ活用してみてください

 

 

 

 

 

 

 

 

LT3 『ScrollViewアセットマスター』@azumagoro

スクロールビューに関するお話

スクロールビューあるある

・データ数に合わせてセルの個数を変えたい
・スナップさせたい
・表示位置をジャンプさせたい
・複数種類のセルを使いたい

これらの解決策としてアセットストアでアセットを買うことが挙げられます
今回はそのアセットの紹介

UGUI Super ScrollView

とても機能が多い。格子状、ジャンプ機能もろもろ。

コガネブログさんでも解説記事があります

baba-s.hatenablog.com

 

EnhancedScroller

ちょっと安い類似アセット

違いはこんな感じ

f:id:Raspberly:20190803234522p:plain


結論

EnhancedScrollerがいいのかも

 

 

 

 

 

 

 

懇親会

f:id:Raspberly:20190804000610j:plain

 

 

 

 

 

 

タイムライン

 

 

 

 

 

 

 

 

おまけ

今回椿さんに登壇いただきましたが、過去にTECH x GAME COLLEGEにて
UIの最適化に関するトークがありました。
こちらも併せてどうぞ。
ただし、今回椿さんが言っていた通り既に解決済みの内容もあることに注意。

raspberly.hateblo.jp

 

 

 

本イベントの主催者であるアズマゴローさんは、
過去にUnityにおけるマネタイズの勉強会をとと様と開催していました。

raspberly.hateblo.jp

 

今回もとと様がスタッフとして活動していました。

 話すタイミングがありませんでしたが「デザインあ展」のシャツを着ていた!!!

 

 

 

 

 

 

 

他の方の感想ブログ

www.masakoha.com

 

orotiyamatano.hatenablog.com

 

 

 

 間違っている箇所、消してほしいツイートがありましたらコメントにお願いします。