Hero background image
Case study
ティンバーボーンの複雑なランタイム UI がどのように構築されたか
Mechanistryは、UI Toolkitに切り替えることで制作時間を大幅に節約し、ビーバーベースの都市建設業者向けに複雑なユーザーインターフェイスを作成しました。
無料のハンズオンガイドで、Unity でのユーザーインターフェースの設計と実装について学びましょう。
e ブックをダウンロード

UI 開発の効率化

How does a small team with few resources create a complex city-builder UI? When Timberborn became an Early Access hit on Steam, Mechanistry needed to quickly iterate on intuitive UI for a rapidly growing playerbase. By switching from uGUI to UI Toolkit, they were able to accelerate production with cleaner code that’s easier to maintain.

課題

Creating a scalable, beautiful, and high-performance UI with consistent elements

プラットフォーム

PC, MacOS

チームメンバー数

13

開発拠点

Distributed, Poland

ティンバーボーントレーラー

ユニティを選ぶ

ソフトウェア開発に携わってきたMechanistryは、クリーンなコード、アジャイルなワークフロー、優れたユーザーエクスペリエンスを重視しています。だからこそ、彼らはティンバーボーンを作るために Unity を選んだのです。「それは賢い選択でした」とプログラマーのPawełDudaは言います。「ウェブリソースはたくさんあります。学習曲線は急ではありません。そして、私たちのチームは C# に精通しています。」

成果

成果

  • Went from several merge conflicts each week to zero
  • 達成約18,000件のレビューにわたるSteamの「ポジティブ」評価
uGUI の限界への挑戦
uGUI の限界への挑戦

メカニストリーは開発の初期にuGUIを使用していましたが、Timberbornがより複雑になるにつれて問題が発生しました。アイコンを再配置するとレイアウトが崩れ、アセットを再利用することは困難でした。また、コードが人間が読めるものではなかったため、1 週間に複数のマージコンフリクトが発生していました。「2人が同じプレハブで作業をしていたら、たいてい問題になります」とPaweł氏は言います。「一部の紛争は自動的に解決されました。しかし、そうでない場合は、プレハブを手動で再作成する必要がありました。」

UI ツールキットのロードマップを確認した結果、Mechanistry は新しいシステムへの移行を決定しました。彼らは Unity 製のソリューションにこだわりたいと考えていました。UI Toolkit はウェブテクノロジーからインスピレーションを得ているため、移行はチームにとってスムーズになると確信していました

ゲーム内の多くのウィンドウとコントロールを備えたティンバーボーンUI
UI ツールキットへの移行

チームは数か月にわたって実践的な移行アプローチをとりました。まず、UIコードのアーキテクチャをクリーンアップし、コードの臭いを取り除きました。その後、UI ToolkitですべてのUI要素を再作成し、希望する外観になるようにアセットを再設計しました。

「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 のアイコン付きドロップダウン
ツールキットのカスタマイズ

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

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

ティンバーボーンの巨大ITコロニー
数日から数時間へ

UI Toolkitを使用すると、Mechanistryの設計プロセスはよりクリーンでわかりやすくなり、さらにすばやく磨きをかけることができます。「それには多くの手間と変更が必要で、数週間かかることもあります」とPawełは説明します。「今では、このプロセスには数日、最大で1週間かかります。アーティストからのアセットを待つ場合も同様です。日数が数時間に短縮されました。」

Unity UI Toolkit の採用により、Mechanistry の UI パイプラインは大幅に変化し、ティンバーボーンの待望の 1.0 リリースへの移行に伴い、開発が加速しました。

「uGUIでは、複雑さにもよりますが、実用的なプロトタイプの作成には1、2、3日かかりました。UI Toolkit を使用すれば、数時間で実用的なプロトタイプを作成できます。」
PAWEŁ DUDA / MECHANISTRYProgrammer
「アーリーアクセスの現実の中でゲームを開発するには、スケーラブルでモジュール化されたクリーンなアーキテクチャが必要です。Unity の UI Toolkit はこれらの原則と完全に一致しているので、進化し続けるインターフェースでの作業が簡単になります。」
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
「UI Toolkit に切り替えてから、タスクの見積もりがずっと簡単になりました。わかりやすいツールで作業できるようになり、マージコンフリクトに対処する必要がなくなったため、チームの効率が向上しました。」
EWA STILLER / MECHANISTRYSenior Producer
木材を腕に抱えて橋を渡るビーバー
高性能なユーザーインターフェースの構築

ランタイム UI を作成し、UI ツールキットと統合します。エディターをカスタマイズしてコラボレーションを強化し、効率的なデバッグを活用してパフォーマンスを向上させます。これらすべてを、ウェブテクノロジーに触発された直感的なエクスペリエンスで実現し、UIをより迅速に作成するのに役立ちます。