メインコンテンツへスキップ

UI

はじめに​

Niantic Studioには、インタラクティブでユーザーフレンドリーなインターフェイスを作成するためのUIシステムが組み込まれています。

レイアウト​

UI Element Componentでは、さまざまな設定が可能で、テキストや画像の追加、配置、スタイル設定、背景色、不透明度、ボーダーの設定ができます。 これらのUI構成には、CSS（カスケーディング・スタイル・シート）とFlexboxの概念が取り入れられている。 CSSはすべての主要ブラウザで標準化されているウェブ言語の基礎のひとつであり、Flexboxはレスポンシブ・レイアウトの作成を簡素化する。 Flexboxのスタイリングについて詳しくはこちらをご覧ください。

フォント​

デフォルトフォント​

デフォルトのフォントは、UIシステム内で使用できます。

ヌニート​

Nunito.png

アキデンツ・グロテスク​

AkidenzGrotesk.png

バスカヴィル​

バスカヴィル.png

フューチュラ​

Futura.png

ゴッサム​

ゴッサム.png

ヘルベチカ​

Helvetica.png

ナヌム・ペン・スクリプト​

NanumPenScript.png

プレス・スタート 2P​

PressStart2P.png

タイムズ​

タイムズ.png

インコンソラータ​

Inconsolata.png

カスタムフォント​

また、TTFファイルを介してカスタムフォントをアップロードし、UIエレメントで使用することもできます。 アセットにカスタムフォントファイルを追加して、利用できるようにしましょう。

インターフェイスの追加​

UI 要素は、スタジオ・インターフェース、Mesh コンポーネント、またはコードでエンティティに追加できます。 スタジオでは、階層内の（+）ボタンを使用するか、エンティティ上のカスタム・コンポーネントに UI 要素を含めることによって、UI 要素を追加できます。

新コンポーネント-ui.png

例​

次の例では、実行時にエンティティにUI要素を設定する方法を示します。

メモ

UIが3D空間に表示されるか、画面上にオーバーレイとして表示されるかは、タイプが「3d」または「オーバーレイ」のどちらに設定されているかに依存し、それがアタッチされているエンティティには依存しない。

ecs.Ui.set(world, component.eid, {
  background: '#FFFFFF'
})