Timberbornの複雑なランタイムUIがどのように構築されたか

MechanistryはUI Toolkitに切り替えることで、膨大な生産時間を節約し、ビーバーをテーマにしたシティビルダーのための複雑なユーザーインターフェースを作成しました。

私たちの無料のハンズオンガイドで、Unityにおけるユーザーインターフェースデザインと実装について学びましょう。e ブックをダウンロード

UI開発の効率化

限られたリソースの小さなチームが、どのように複雑なシティビルダーUIを作成するのか？TimberbornがSteamでアーリーアクセスのヒット作となったとき、Mechanistryは急成長するプレイヤーベースのために直感的なUIを迅速に反復する必要がありました。uGUIからUI Toolkitに切り替えることで、彼らはメンテナンスが容易なクリーンなコードで生産を加速することができました。

Unityを選ぶ

ソフトウェア開発のバックグラウンドを持つMechanistryは、クリーンなコード、アジャイルなワークフロー、素晴らしいユーザー体験を重視しています。だからこそ、彼らはTimberbornを作るためにUnityを選びました。「それは賢い選択でした」とプログラマーのパヴェウ・ドゥダは言います。「たくさんのウェブリソースがあります。学習曲線は急ではありません。そして私たちのチームはC#に慣れています。」

成果

• UIプロトタイピングと実装の加速、今では数日ではなく数時間で完了します。

• 毎週いくつかのマージコンフリクトからゼロへと移行した

• 18,000件近くのレビューでSteamで「圧倒的に好評」の評価を達成した

uGUIの限界に挑む

Mechanistryは初期開発でuGUIを使用したが、Timberbornがより複雑になるにつれて問題が発生した。アイコンの再配置がレイアウトを壊し、アセットの再利用が難しく、コードが人間に読みやすくなかったため、毎週複数のマージコンフリクトが発生した。「2人が同じPrefabで作業すると、通常は問題が発生しました」とPawełは言う。「いくつかのコンフリクトは自動的に解決されました。しかし、そうでなければ、Prefabを手動で再作成しなければなりませんでした。」

UI Toolkitのロードマップを見た後、Mechanistryは新しいシステムに移行することを決定した。彼らはUnity製のソリューションに固執したいと考え、UI Toolkitがウェブ技術からインスピレーションを得ていることに注目し、遷移が彼らのチームにとってスムーズであると確信していた。

UI Toolkitへの移行

チームは数ヶ月にわたって移行に対して実用的なアプローチを取った。まず、彼らはUIコードのアーキテクチャを整理し、コードスメルを取り除いた。次に、すべてのUI要素をUI Toolkitで再作成し、望む外観を得るためにアセットを再設計した。

「UI Toolkitへの切り替えはゲームチェンジャーでした」とPawełは説明する。「以前は、美しいUIを作ることに消極的でした。なぜなら、それが大きな手間になることを知っていたからです。今では、UIスケーリングや隠れたメニューなどの機能をゲームに追加しましたが、uGUIよりもはるかに簡単に実行できました。」

マージ競合の解決

Mechanistryは、UI Toolkitに移行することで、スタジオでの大幅な遅延の原因となっていたマージ競合が実質的に排除されたと述べています。「競合が発生した場合、私たちはそれを見て、すぐに解決方法がわかります」とPawełは言います。「誰もが同時にUIに取り組むことができ、同じ要素に対しても問題ありません。」

UI Toolkitは、ゲームロジックとUIロジックを分離することを可能にし、競合をさらに減少させました。今、チームはUIの異なる部分を独立して反復し、コンポーネントを孤立してテストできるため、壊れたビルドが少なくなります。「これは私たちにとって非常に重要でした」とPawełは付け加えます。

リアルタイムでのデバッグ

Timberbornのスケーラブルで適応可能なUIは、現在12の言語をサポートしています。それらの間を切り替えると、UI要素がずれることがあり、全体的なインターフェースの複雑さと相まって、デザインエラーを引き起こしやすくなります。彼らはUI Toolkitデバッガーを使用して、これらの問題を迅速かつ簡単に特定し、解決できます。

UI Toolkitは、UIの階層のライブビューを表示するウィンドウを開きます。Mechanistryは、階層内の任意の要素を選択して、プロパティや状態を検査し、UIエラーをチェックできます。「これにより、私たちはリアルタイムでUI要素を検査し、デバッグできます」とPawełは述べています。

ツールキットのカスタマイズ

UI Toolkitの柔軟性により、Mechanistryは自分たちのニーズに合わせて調整できます。「私たちには、ドロップダウンメニューに画像やアイコンを追加できる独自のシステムがあります」とPawełは言います。「私たちには独自のツールチップとローカライズされたコントロールもあります。」UXMLに属性を追加するだけで、コントロールを自動的にローカライズできるようになります。

例えば、チームはタグを使用して適切な言語でローカライズされたスプライトを表示するコントロールを持っています。彼らは、パネルがどのように重なるかを示すビューを構築し、画面上で何が表示されているかを追跡しながら、UIコントロールの位置を簡単に操作できるようにしました。背景、ボタン、ラベルなどのための9スライスも含まれています。

日から時間へ

UI Toolkitを使用することで、Mechanistryのデザインプロセスはよりクリーンで簡潔になり、より迅速に仕上げを追加できます。「それには多くの調整と変更が必要で、数週間かかる可能性があります」とPawełは説明します。「今では、プロセスは数日、最大でも1週間かかります。アーティストからのアセットを待つのも同様です。日が時間に短縮されます。

Unity UI Toolkitを採用することで、MechanistryのUIパイプラインは大きく変わり、Timberbornの開発が加速し、彼らは待望の1.0リリースに向けて進んでいます。

UI Toolkitを使用してランタイムUIを作成し、統合します。コラボレーションを改善するためにエディタをカスタマイズし、効率的なデバッグを活用してパフォーマンスを向上させます。すべては、UIをより早く作成するのを助けるためにウェブ技術に触発された直感的な体験の中で。