【Unity】多彩なUIパーツを用いたカスタム画面作成方法を解説

Unity

Unityは、その柔軟性とパワフルな機能により、ゲーム開発やインタラクティブなアプリケーション制作において広く使用されています。特に、カラーピッカーやドロップダウンのようなUIパーツを利用したオブジェクトの色調整やカメラの操作などは、ユーザーに直感的で魅力的な操作体験を提供します。本記事では、Unityで構築した9個の主要なスクリプトそれぞれの役割と機能について詳しく解説します。

今回のシリーズで最終的に作成したいものは下記のようなものです。↓

各スクリプトの役割と機能配置

まずは、今回作成した9個のスクリプトについて、それぞれのスクリプトが持つ役割や機能の概要について説明します。より具体的なスクリプトの中身については、下記の表のスクリプト名をクリックしてスクリプトの中身を解説しているページに飛んでご覧ください。

スクリプト名役割・機能配置
CameraController.cs役割: カメラの操作を担当します。
機能: カメラをズームイン・アウトできるようにし、マウスの動きに応じてカメラを回転させます。これにより、ユーザーはシーン内のオブジェクトをさまざまな角度から見ることができます。
ColorButtonController.cs役割: 特定の色をクイック選択する機能を提供します。
機能: ユーザーが定義した色のボタンを作成し、これらのボタンをクリックすることで、選択されたオブジェクトの色を迅速に変更できます。
ColorPicker.cs役割: 色の詳細な調整を可能にします。
機能: 色相(Hue)、彩度(Saturation)、明度(Value)を調整するスライダーを提供し、これによりユーザーは非常に具体的な色の設定を行うことができます。
CubeColorManager.cs役割: 選択されたオブジェクトのプロパティを管理。
機能: ドロップダウンリストで選択されたオブジェクトの色やその他のプロパティ(メタリック、スムーズネスなど)を更新する。ドロップダウンリストは、ユーザーが操作対象のオブジェクトを選択するためのインターフェースを提供する。
EmissionController.cs役割: オブジェクトのエミッション(自己発光)を調整します。
機能: エミッションの強度をスライダーで調整し、選択したオブジェクトが発する光の量を変更します。
MetallicController.cs役割: オブジェクトのメタリック(金属的な質感)を調整します。
機能: メタリックプロパティをスライダーで調整し、オブジェクトの金属的な見た目を変更します。
ObjectEmissionController.cs役割: オブジェクトのエミッションを調整します。
機能: オブジェクトの発光色と強度をスライダーで調整します。
SmoothnessController.cs役割: オブジェクトのスムーズネス(光沢)を調整します。
機能: スムーズネスをスライダーで調整し、オブジェクトの光沢の程度を変更します。
TransparencyController.cs役割: オブジェクトの透明度を調整します。
機能: 透明度をスライダーで調整し、オブジェクトを透明にしたり不透明にしたりできます。

UIパーツ作成前の下準備

ここからはUnityに具体的にいくつかのオブジェクトを配置していきます。次回以降の記事で実際にUIパーツを作成していくので、そのための準備をしていきましょう。

色を変える対象のオブジェクト作成

下記の動画のように最終的に色やマテリアルを変更したい3D オブジェクトを作成します。後に作成するスクリプトでオブジェクトを増やしたり減らしたりできるので、とりあえず今回は5つ作成することにします。

今回はCubeやSphereのような3Dオブジェクトを5つ作成しましたが、実際に活用するような場面であればアセットストアなどからインポートした様々なアセットを使うことになると思います。

オブジェクトの背景作成

では次は、下記の動画のように、先ほど作成したオブジェクトの背景を設定していきます。背景を設定する理由は、今後エミッション(自己発光)なども調整していくので、少し暗い空間を作っていた方が、パッと見た時にわかりやすくするためです。この背景がないと期待通りの動きをしないなどの影響はないので、シーンを再生した時の見栄えに特にこだわらなければ、下記の動画のような作業はしなくていいです。

UIManagerの作成

次は、下記の動画のように空のオブジェクトを作成して、そのオブジェクトの名前を「UIManager」とします。このUIManagerは、Unityプロジェクト内でUI関連のスクリプトやコンポーネントを一元管理するための中心的なオブジェクトです。これにより、ゲームやアプリケーションのUI要素(ボタン、スライダー、テキストフィールドなど)の動作や外観を制御します。

役割と意味

  1. 一元管理: UIManagerは、複数のUIコンポーネントやスクリプトを単一の場所で管理することを可能にします。これにより、開発者はUI要素の状態や挙動を容易に追跡・調整できます。
  2. イベントハンドリング: ボタンクリックやスライダーの変更などのユーザーインタラクションを処理します。UIManagerはこれらのイベントを受け取り、適切なスクリプトや機能に転送する役割を果たします。
  3. データの整合性: UIManagerはUI要素間のデータ伝達と整合性を保つ重要な役割を持ちます。例えば、カラーピッカーで選択された色を別のオブジェクトに適用する際に、選択された色情報を正確に伝達する必要があります。
  4. インターフェースの一貫性: アプリケーションの異なる部分間でUIの一貫性を保つためにも使用されます。これは、ユーザーエクスペリエンスを向上させる上で重要です。

UIパーツを置くキャンバス作成

下準備の最後に、下記の動画のような手順でUIパーツを設置するためのキャンバスと、スライダーやボタンの背景として半透明な枠を作成していきます。Unityにおける「キャンバス(Canvas)」は、画面上にUI要素(ボタン、テキスト、イメージなど)を配置するための領域を提供するものです。

また、キャンバスと一緒にEventSystemというオブジェクトも作成します。UnityにおけるEventSystemは、ユーザーインタラクションを処理するためのシステムです。主にUI要素に対するユーザーのアクション(例えばクリックやタッチ)を管理し、適切なUIコンポーネントにイベントを伝達します。

まとめ

本シリーズの初回記事では、UnityでのカラーピッカーとUIパーツの基本的な役割と機能に焦点を当てました。これらの要素は、ユーザーがインタラクティブな操作を行いながら、シーンやオブジェクトのビジュアルアピアランスをカスタマイズする基盤を提供します。続く記事では、これらのコンセプトをさらに詳しく掘り下げ、HSVカラーピッカーやカメラ制御などの具体的な実装方法について詳述します。

コメント