Keep your place in this quest

Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.

このレッスンでは、ユーザーインターフェースを作成するために Cave Engine で利用可能なさまざまな UI Elements の種類を最初に見ていきます。

UI Elements は、プレイヤーがゲームの世界上に見るすべてのものを構築するために使用されます。これには、メニュー、ボタン、HUD、ヘルスバー、アイテムカウンター、設定画面、ダイアログボックス、およびその他のインターフェースコンポーネントが含まれます。

完全なインターフェースを作成する前に、それぞれの UI Element が何に使われ、いつ使用すべきかを理解することが重要です。

1. 新しい UI Element の作成

新しい UI Element を作成するには、Scene Graph 内を右クリックし、Interface オプションを選択します。

このメニューの中には、Cave Engine が提供するインターフェース要素が見つかります。

image.png

UI Element Default

image.png

デフォルトの Cave Engine UI Element を作成します。

これは UI システムの基本要素であり、他のインターフェースコンポーネントを作成するための出発点として使用できます。

デフォルトの UI Element は、ビジュアルパネル、背景、コンテナ、アイコン、画像、またはその他の基本インターフェースブロックとして機能します。また、UI Elements は Scene Graph 内で互いに親子関係を持つことができるため、子要素を整理するのにも非常に便利です。

例えば、メニューパネルを表すために 1 つのデフォルト UI Element を作成し、その下にボタン、テキスト、アイコンを子要素として追加することができます。

テキスト

image.png

インターフェース上にテキストを表示するために使用される UI Element を作成します。

この要素では、表示される内容を設定し、フォント、サイズ、色、整列、その他の視覚設定をカスタマイズすることができます。

テキスト要素は、タイトル、ラベル、サブタイトル、指示、アイテムカウンター、健康値、ダイアログテキスト、スコア番号など、プレイヤーに表示する必要がある任意の情報に一般的に使用されます。

ボタン

image.png

テキストコンポーネントですでに構成された UI ボタンを作成します。

ボタンはインタラクティブな UI Elements です。さまざまな状態に反応することができます:

  • 通常、ボタンがアイドルのとき。
  • ホバー、マウスカーソルがボタンの上にあるとき。
  • クリック、ボタンがクリックされたとき。

ボタンは、これらのイベントに応じて Python code を実行することもできるため、ゲームの開始、メニューのオープン、設定の変更、ウィンドウの閉じ、または必要なカスタム動作のトリガーなどのインタラクションを作成することができます。

これにより、ボタン要素はメニューやインタラクティブインターフェースを作成するときに最も重要な UI コンポーネントの一つとなります。

UI ツールキット

image.png

UI Toolkit オプションでは、Cave Engine がユーザー入力とインタラクションに焦点を当てた UI Elements を提供します。

これらの要素は、プレイヤーがゲーム中に値を変更したり、情報を入力したり、設定にインタラクションする必要がある場合に役立ちます。

  • 入力スライダー

定義された範囲内でユーザーが値を選択できるスライダーコントロールを作成します。これは、音量、明るさ、マウス感度、音楽レベル、効果レベルなどの設定に理想的です。

  • 入力数値

マウスを移動するか、値を直接編集することで調整できる数値入力フィールドを作成します。これは、感度値、カスタムパラメータ、デバッグオプション、または数値設定フィールドなど、特定の数字を必要とする設定に便利です。

  • 入力テキスト

ユーザーがインターフェース経由で情報を直接入力できるテキスト入力フィールドを作成します。これは、プレイヤー名、保存名、検索フィールド、説明、チャットメッセージ、またはその他のテキスト入力に役立ちます。

すべての UI Toolkit 要素はゲームプレイ中に機能し、プレイヤーがリアルタイムでインタラクションできるようにします。

image.png

これらのオプションを使えば、作成したいインターフェースのタイプに最も適した UI Element を選択できます。

各要素には特定の目的があり、シンプルな HUD 要素から、より完全なメニューやインタラクションシステムまでを構築することができます。

このクエストでは、最初のオプションである UI Element Default から始めます。これは、次のレッスンの基盤として使用されます。

image.png