Unity を検索

すべてがここに:Unity の UI 開発に関する究極のガイド

2022年12月15日 カテゴリ: ゲーム | 9 分 で読めます
It's all in here: The ultimate guide to creating UI interfaces in Unity | Hero image, update
It's all in here: The ultimate guide to creating UI interfaces in Unity | Hero image, update
取り上げているトピック
シェア

Is this article helpful for you?

Thank you for your feedback!

何千人もの方から事前登録をいただいておりましたが、ついにこの日がやってきました。私たちの過去最大級の e ブック「User interface design and implementation in Unity」がダウンロードが可能になりました。130 ページを超える詳細な UI デザインの e ブックに取り掛かる準備を整えましょう。

ゲームのユーザーインターフェースは、プレイヤーとのコミュニケーションやガイドを行うための最も直接的な方法と言えるでしょう。それは手掛かりや重要な詳細、案内をプレイの進行と共にプレイヤーに明かしていく、折りたたんだ地図のようなものです。体力バーやポップアップメッセージのような伝統的なものから、プレイヤーのサバイバルスーツの背中にステータスを表示するといったゲーム世界に完全に埋め込まれたものまで、UI はゲームのストーリー、領域、アートスタイルにプレイヤーを没入させるために不可欠なものなのです。

最新のテクニカル e ブック「User interface design and implementation in Unity」の無料ダウンロードが始まったことをお知らせいたします。すでに何千人もの人が登録しており、また現在までにそれと同じくらい多くの人々が、この e ブックのために作られたデモプロジェクト「UI Toolkit sample - Dragon Crashers」をダウンロードしています。次は皆さんの番です。

A look inside User interface design and implementation in Unity
無料ガイドの内容のサンプル画像。ガイド全体は現在ダウンロード可能。

UI の基礎知識:アート制作から最新ツールセットまで

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

「UI Toolkit sample – Dragon Crashers」デモは、UI Toolkit の一般的な使用例と UI Builder によるビジュアルオーサリングを解説するために、この e ブックの制作中に開発された。

この e ブックに対する関心は当然のものです。e ブックの序文にあるように、「ユーザーインターフェースはどんなゲームでも重要な部分です。しっかりしたグラフィカルユーザーインターフェース(GUI)は、ゲームのビジュアルアイデンティティの延長です。(そして)現代のオーディエンスは、あなたのアプリケーションとシームレスにつながっている、洗練された直感的な GUI を切望しています」。

ガイドは、UI デザイン、アート制作の基礎から始まり、Unity での UI 開発について詳しく解説する章へと進んでいきます。Unity 内外から招いたプロのテクニカルアーティストと UI アーティストレビューが執筆し、レビューを行ったこの e ブックは、デフォルトソリューションである Unity UI と、より新しい UI Toolkit の両方について、その内実をつまびらかにします。

ただし重点は後者の UI Toolkit に置かれています。UI Toolkit は、複雑なフルスクリーンインターフェースを持つプロジェクトに多くの利点を提供するようになったからです。実行時 UI にスケーラブルでパフォーマンスの高いシステムを必要とするプロジェクトを考えてみてください。顧客のプロジェクトに適したソリューションを選択するために、Unity マニュアルのこのセクション を参照してください。

ワイヤーフレーム、ラウンドトリップ、グレーボクシングなど

 Examples from the UI Toolkit sample project, using art from the Dragon Crashers demo, built with wireframes in Adobe XD to test navigation flows and share feedback
UI Toolkit サンプルプロジェクトから抜粋したサンプル。Dragon Crashers デモのアートを使用し、Adobe XD でワイヤーフレームを構築して、ナビゲーションフローをテストし、フィードバックをシェアする。

この e ブックは、プロの UI デザイナーやアーティストなど、UI 開発に関する知識を深めたい Unity クリエイターにとってはまさに情報の宝庫です。ここでは、その内容のスナップショットをご紹介します。

第 1 章では、効果的な UI を作るための基礎的なヒントを紹介し、インスピレーションを持ってもらうことを目的としています。本書では、ゲーム世界の一部をユーザーインターフェースとして機能させ、物語の中で UI 要素を見つけられるようにする「ダイエジェティック UI」の例を紹介します。プレイヤーが体験する没入感を高める要素、あるいは壊す要素についても解説しています。この章はブログ記事にもなっており、それはこちらで読むことができます.

次に、UI デザイナーの役割と責任、UI ワイヤーフレーム、モックアップによるアート制作、フォント、グレーボクシングなどのツールや方法論について説明しています。また、アセットの準備とデジタルコンテンツ制作(DCC)ツールからのグラフィックスのエクスポートに関する章も用意されています。このガイドは、どのようなゲームエンジンや UI ソリューションを使っている場合でも役立ちます。

Unity の UI を使いこなすための詳細なヒント集

Unity UI について、通常より多くの章を割いて解説しています。Unity UI は、ゲーム内 UI を作成するために私たちが長年にわたり構築してきたシステムであり、現在、3D 世界に UI を配置したり、GameObject ベースの Unity システムを使用するための主要なソリューションとなっています。

The Unity UI Samples asset uses GameObject-based elements.
Unity UI Samples アセットは、GameObject ベースの要素を使用しています。

この章では、プロトタイピングとアセットをエディター内で統合するための Unity UI、すなわち Canvas事前構築済みの UI 要素TextMesh Proプレハブなどについて概説します。最近、Unity UI の高度な最適化テクニックに関するページを公開しました。このページでは、関連するトピックにのヒントも見つけることができます。

進化する UI Toolkit でスキルを身につける

UI Toolkit は、標準的なウェブ技術に基づいたワークフローとオーサリングツールにより、最高のパフォーマンスと再利用性を実現するために作られています。UI デザイナーやアーティストの方、特にウェブページのデザイン経験がある方は、このツールに親しみがわくでしょう。

UI Toolkit を使った実行時 UI の開発方法については、3 つの大きな章を使って解説しています。Unity Extensible Markup Language(UXML)や Unity Style Sheet(USS)、UI Builder など、UI Toolkit で UI を構成する際に使うパーツについての解説が充実しています。

Flexbox のサブセットを実装する HTML/CSS レイアウトエンジンYoga に基づいて、UI Toolkit がどのようにビジュアル要素を配置するのかを探ります。Flexbox アーキテクチャには、さまざまな画面解像度やサイズに UI を適応させることを可能とするレスポンシブ UI をはじめ、複数の利点があります。UXML と USS の両方を使うことで、UI レイアウトに適用されるスタイルを切り離し(必要に応じてスタイルを切り替え)、ロジックと機能は引き続きコードの中に置いておくことができます。また、各インターフェイスの基本構成要素であるビジュアル要素のワークフローについても、位置、サイズ、および配置の設定からマージン、パディングに至るまで、詳細に解説しています。

Decoupling logic and design: Programmers will connect the visual elements to the actual game logic (shown at the bottom), while designers will focus on defining the styles for them (UI Builder at the top).
ロジックとデザインの切り離し:プログラマーはビジュアル要素と実際のゲームロジックを結びつけ(下図)、デザイナーはそのスタイル定義に専念する(上図の UI Builder)。

スタイリングのすべて

You can interpolate between styles with Transition Animations.
トランジションアニメーションでスタイル間の補間を行うことができます。

スタイリングの章では、ビジュアル要素の再利用可能なスタイリングをセレクターで定義する方法、スタイルを上書きして固有の属性をインラインスタイルで定義する方法、およびアニメーションとエフェクトを USS アニメーションカメラレンダーテクスチャで作成する方法を説明します。また、祝日などの特別なイベントのために、UI 要素をテーマ化する方法も紹介しています。

ここから e ブックでは「UI Toolkit sample - Dragon Crashers」の内部の解説に入っていき、メニュー、ラジアルカウンター、タブ付きビューなどのカスタムコントロールから、埋め込み UXML テンプレートなど、サンプルの UI がどのように作られたかをいくつかの章で説明しています。

From the UI Toolkit sample: The inventory, populated with ScriptableObject data
UI Toolkit のサンプルより、ScriptableObject データで構成されたインベントリ

このガイドの最後には、スタジオ Mechanistry の新作ゲーム『Timberborn』の UI を UI Toolkit に移行した際のミニプロファイルも収録されています。これは短いスタディではありますが、リーンなチームがどのようにゲームをスケールさせ、さまざまなメニューやスクリーンのあるゲームの一貫性を保ったかを紹介しています。

Unity での UI 制作を洗練させる新しいリソース

この UI に関する e ブックは 137 ページあり、決して軽い読み物ではありません。この 1 年間に公開された他のテクニカル e ブックと同様、継続的に使うリファレンスとしてお読みください。

e ブックと合わせて、最近リリースされた、Unity UI と UI Toolkit を活用するための有用なヒントが詰まったリソースもご覧ください。

  • Unite 2022 のセッション「Extending Unity Editor with custom tools using UI Toolkit」では、プログラマーが UI Builder を使ってリアルタイムに再生モードのデバッグデータを可視化するためのカスタムインスペクターを作る方法を紹介しています。
  • Best Practices for Mobile UI Design Webinar」と題されたこちらのウェビナーでは、Outfit7、Samsung、Unity の専門家が集まって、モバイルゲーム作りに注ぐ創造性とフローを最大化するための戦略をシェアしています。

クリックするだけでテクニカル e ブックを入手

以下のどちらか一方、または両方をブックマークしてください。テクニカル e ブックや上級者向けのコンテンツは、すべてこのリンク先に集まっています。

この最新の e ブックをお楽しみいただければ幸いです。こちらのフォーラムで皆さんからのご意見をお待ちしております。

Promo artwork for the 'User interface design and implementation in Unity' e-book
2022年12月15日 カテゴリ: ゲーム | 9 分 で読めます

Is this article helpful for you?

Thank you for your feedback!

取り上げているトピック
フォーラムでディスカッションに参加する
関連する投稿