Cave: ゲームユーザーインターフェイス (ゲームUI) システム

このレッスンでは、Cave Engine の UI アンカーシステム の使用方法を学びます。

アンキングは、画面上の UI エレメントに使用される参照点を定義することを可能にします。これは、異なる解像度、ウィンドウサイズ、アスペクト比に正しく適応する必要があるインターフェースを作成する際に非常に重要です。

このレッスンの終わりまでには、UI エレメントを一貫して配置する方法を理解し、画面サイズに関係なく期待される場所に留まるようにすることができます。

1. 新しい UI エレメントの作成

新しい UI エレメント デフォルト を作成します。

シーンに追加した後、選択し、プロパティ パネルを見ます。

そこで、エレメントの位置、スケール、外観、及びアンキングに関する設定が見つかります。このレッスンでは、これらのプロパティを使用して、アンキングシステムの動作とインターフェースの挙動への影響を理解します。

2. 位置

デフォルトでは、Cave Engine の UI エレメントの位置はパーセンテージ値で定義されています。

これにより、異なる画面解像度により適応するインターフェースを作成するのが容易になります。

最初は、UI エレメントは画面の中心にアンカーされています。そのため、位置値が 0 に設定されると、エレメントはインターフェースの中央に正確に表示されます。

3. スケール

位置と同様に、Cave Engine の UI エレメントのスケールもデフォルトでパーセンテージ値で定義されています。

スケール値を変更することで、UI エレメントのサイズを画面上で直接増減させることができます。

これにより、インターフェースの寸法を調整しつつ、レスポンシブ性を維持することができます。

4. パーセンテージと絶対ピクセル値

前述のように、デフォルトでは、Cave Engine の UI エレメントの位置とスケールはパーセンテージを使用して定義されています。

ほとんどの場合、これは推奨される動作です。なぜなら、インターフェースが解像度やモニターサイズに関係なく、一貫して位置とサイズを保持できるからです。

この例では、UI エレメントのスケールを X 軸と Y 軸の両方で 10% に設定しています。また、X 軸の位置を 25% に設定しています。これは水平軸に該当します。

この設定により、エレメントはアンカーポイントに対して 25% 右に移動します。

値がパーセンテージで定義されているため、この位置設定は解像度やモニターサイズに関係なく維持され、異なるデバイスでインターフェースを一貫したものに保つことができます。

パーセンテージ値の他に、Cave Engine は絶対値をピクセル単位で使用することも許可します。

このモードは、UI エレメントに固定サイズまたは固定位置が必要な場合に便利です。

単位タイプを変更するには、変更したい位置またはスケール軸の隣にあるロックアイコンをクリックします。

これを行うと、値はパーセンテージ (%) と絶対ピクセル (px) の間で切り替わり、それぞれの状況に最も適した単位を選択できるようになります。

絶対ピクセル値を使用する場合、UI エレメントはもはや画面解像度に比例して適応しなくなります。

これは、ゲームが低解像度または高解像度のモニターで実行されている場合でも、ピクセル値が正確に設定された通りに適用されることを意味します。

このモードは、要素が画面やその親 UI エレメントの幅と高さを考慮せずに、固定サイズまたは固定位置を保持する必要があるときに推奨されます。

たとえば、アイコンを常に正確に 64 ピクセル 幅にしたい場合や、ボーダーから常に正確に 20 ピクセル のマージンを保ちたい場合などです。

5. 位置アンキング

位置とスケールプロパティにあるアンカーアイコンは、UI エレメントのアンカーポイントを示します。

位置アンカーアイコンをクリックすると、アンカーポイント ウィンドウが表示され、現在のエレメントのアンカーポイントを確認できます。

デフォルトでは、新しい UI エレメントは画面の中心にアンカーされており、設定ウィンドウの青い円で表されます。

このアンカーポイントは、インターフェース内でエレメントを配置するための参照として機能します。このポイントから、位置値は選択したアンカーに応じて適用されます。

ミニマップを作成したいと想像してみてください。ミニマップは通常、画面の左下隅に配置されます。

この場合、エレメントを中央にアンカーするのはあまり意味がありません。なぜなら、その位置は画面の中心点から計算されるからです。

このタイプのインターフェースには、単に アンカーポイント を希望する下隅に変更してください。

これにより、エレメントは画面のその領域を参照として使用し、配置が簡単になり、解像度に関係なく正しい位置に留まります。

位置値が 0 に設定されている場合は、パーセンテージ (%) または絶対ピクセル (px) を使用して、UI エレメントはアンカーポイントの正上に配置されます。

言い換えれば、アンカーポイント はエレメントの位置に対する参照になります。

そのポイントから、エレメントを希望する方向に移動するために位置値を調整する必要があるだけです。

6. スケールアンキング

次に、スケールアンキングがどのように機能するかを理解しましょう。

これを行うために、UI エレメントのアンカーポイントを再び画面の中心に戻し、位置値を 0 に設定して、エレメントがちょうど中心に戻るようにします。

エレメントが中央に配置されると、アンキングがスケールの動作にどのように影響するかを視覚的に確認しやすく、UI エレメントがどのポイントからサイズ変更されるかを理解できるようになります。

スケールアンカーポイントが中央に設定されている場合、要素のスケールを増減させると、両側が均等に影響を受けます。エレメントは同時に左と右に成長したり縮んだりします。

しかし、場合によってはこれは望ましい動作ではありません。

たとえば、ヘルスバーやプログレスバーを考えてみてください。この場合、通常は、エレメントが一方向にのみ成長または縮むことを望みます。

それを実現するには、スケールアンカーポイントを希望する側に変更してください。

こうすると、スケールが適用されるポイントを示す小さなカーソルが表示されます。

今、スケールを増減させると、エレメントはアンカーポイントの反対方向にのみ成長します。これにより、バーや他の動的な UI エレメントを作成するのがはるかに簡単になります。

7. アンカーとスケールの調整

スケールアンカーポイントがエレメントのサイズ変更動作にどのように影響するかを理解したので、私たちのプロジェクトに最適な方法でインターフェースを構成できます。

位置アンカーを画面の左下隅に戻すか、作成しているインターフェースにより理にかなっている他の位置を選択します。

スケールアンカーでも同様のことができ、エレメントが再サイズされるポイントを定義できます。

この例では、位置の X 軸とスケールの X 軸に対して絶対ピクセル値を使用し、Y 軸にはパーセンテージ値を維持します。

この設定により、要素は画面の寸法に関係なく、正方形の比率を維持しつつ、垂直軸でレスポンシブな動作を保持します。

この時点で、Cave Engine における UI アンキングの仕組みを十分に理解しているはずです。

アンカーはインターフェース作成の最も重要な部分の一つです。なぜなら、画面サイズが変更されたときに UI エレメントがどのように動作するかを定義するからです。

位置アンカー、スケールアンカー、パーセンテージ値、ピクセル値を組み合わせることで、正確でレスポンシブなインターフェースを作成できます。