DoozyUIとModern UIでUnity（uGUI）臭さを消してみる
最初に
この記事は Unity アセット真夏のアドベントカレンダー 2020 Summer! の8月22日の記事です。
昨日はパルディ博士の助手RDAGさんによる「Vtuberなら時止めくらい軽くこなしてエモを出していこう【AssetAdventCalendar2020】」でした。
あれ、VIVEアンバサダーのRDAGさんじゃないですか。
奇遇ですね私もVIVEアンバサダーです。
概要
皆さんUnityでUI作るときどうしてますか？
まさかuGUIそのまま、って人は流石にいないかと思いますが、毎回PhotoshopやIllustratorで作るのはコスパが悪く感じませんか？
あとCanvas管理とかView管理とかイベント管理とか、どうしてますか？
というかわからなくなりませんか？私は一度素のuGUIで頑張ったら無事わからなくなって爆死したことがあります！
こういったUI素材作りやCanvas管理など、面倒で手を抜きがちな要素をそのまま放置していると、いわゆる「Unity臭さ」というのがバリバリ出てしまいます。
「Unity臭い」UI
この「Unity臭さ」をDoozyUIとModern UI Packで楽して消そうよ、というのがこの記事の目的です。
DoozyUI とは
assetstore.unity.com
DoozyUIはUI管理やアニメーション、SE、アイコン、デザイン、等々を簡単に管理できるようにした、Unity Editor のネイティブ拡張アセットです。
専用のデータベースをプロジェクト内に持ち、これまた専用のウィンドウからデータを登録・変更・削除といった操作が行えて、UI素材の一括管理ができるようになっています。
またキャンパス間のノードベース遷移図も作成でき、どのキャンパスのどのボタンがどういった遷移を持っているのか、といった情報が一目でわかるようになっています。
これらをうまく活用すると、UI素材を変更しても参照はちゃんと持たれたまま一気に変更するとか、ボタンの持つ遷移を一括で変更する、みたいなことができます。
データベース管理画面
ノードベース遷移図
Modern UI Pack とは
assetstore.unity.com
シンプルかつモダンなUI素材が沢山入っているアセットです。
ボタン、アイコン、スライダー、プログレスバー、セレクター、ドロップダウン、テキストフィールド、チェックボックス、モーダルウィンドウ、等々、本当にこのアセットさえあればUI素材はどうにかなります。
サンプルのタイトル画面、もうこの時点でカッコイイ
ボタンサンプル
プログレスバーサンプル
導入
Modern UIはアセットストアからインポートすればOKです。
DoozyUIに関してはわかりやすいインストール手順を書いていらっしゃる方がいるので割愛します。
とりすーぷさんが公開されているスライドがわかりやすい為、ここに貼らせていただきます。
DoozyUIとModern UIの連携
DoozyUIとModern UIはまったく別の作者さんが作られていますし、相互連携が公式にサポートされているわけではないので、一部機能を使用する上で躓きやすいポイントがいくつかあります。
ここではボタンを例に解決したいと思います。
Button
コンテキストメニューから簡単に生成できますが、DoozyUIのUIButtonではなく、Modern UIのButtonを生成してください。
Modern UIのButtonを生成
生成されたボタンに対してDoozyUIのUIButtonコンポーネントを追加します。
UIButtonコンポーネントを追加
そしてButtonManagerBasicコンポーネントのSettingsから、UseCustomContentをオンにします。
このコンポーネントはModern UIに付いてくるものなのですが、あくまでもModern UIはUI素材の提供として割り切って管理はDoozyUIに任せたいため、Modern UI側の管理機能は切ってしまいます。
UseCustomContentをオンにすることで、TextMeshProコンポーネントのテキストを直接編集できるようになります。
UseCustomContentをオン
最後にButtonの子にあるテキストに対して、DoozyUIのColorTargetTextMeshProコンポーネントと、FontTargetTextMeshProコンポーネントを追加します。
この2つのコンポーネントはTextMeshProのテキストカラー、フォントをDoozyUIのデータベースで指定したものに自動設定してくれるコンポーネントになります。
TargetTextMeshProコンポーネントを追加
DoozyUIデータベースのThemesタブで一括管理できる
この3つさえ行えばOKです。
あとはDoozyUIデータベースでカラーを変えてみたり、フォントを変えてみたりしてください。変更した直後にその内容が反映されるかと思います。
もし反映されない場合は、データベースのThemesタブにあるDefaultと書かれたボタンを押すと反映されたりします。
反映されないときはDefaultボタンを押す
Image
Modern UI関係なくなってしまいますが、ImageコンポーネントのSpriteやカラーも管理できるため、一緒に紹介します。
こちらは普通のuGUIのImageを作成してください。
uGUI Imageを作成
これにColorTargetImageコンポーネント、SpriteTargetImageコンポーネントを追加します。
TargetImageコンポーネントを追加
こうすることでDoozyUIデータベースに登録された素材が反映されます。
Modern UIにある素材もDoozyUIデータベースに登録してから使用することで、管理が容易になります。
これら以外にもSpriteRendererやParticleSystemに対してUI管理可能なコンポーネントもあります。
だいたい「（管理したい情報）Target（管理対象のコンポーネント）」みたいな名前であるので、必要なときに検索して追加してください。
結果
で結局DoozyUIとModern UIを使うとどういう感じになるの？というところですが、同じようなUIを持った簡単なゲームを、UI作成にuGUIを使用したものとDoozyUIを使用したものの2つ作成してみました。
（UIサンプルという意味で作ったので、ゲーム内容には目を瞑ってほしいです…。）
見比べていただければわかりますが、DoozyUI + Modern UIを組み合わせることでだいぶマシになっているのがわかるかと思います。
最後に
ざっくり駆け足でしたが、DoozyUIとModern UIを組み合わせてUnity臭さを消してみました。
まだまだ紹介したいことはたくさんありますが、文章量が大変なことになってしまうのでここで一区切りしたいと思います。
明日はデニキさんによる「『In-Game Debug Log for AR and VR devices』で XR のデバッグを楽にしよう」です。
