Open 3D Engine(O3DE)でUIを作成

21 September 2022
post-thumb

UIを作成する

Open3DEngineでのUI作成の方法とゲームでの使用方法をご説明します。

UI コンポーネントを作成する。

1.UIEditorボタンをクリックして始めます。

This is a image

2.UIエディターが現れます。

This is a image

3.UIはエレメント「Element」を追加していくことで構成します。

Newボタンを押すことで、Elementを追加することができます。

This is a image

4.デフォルトでは透明な画面しか作られていないので、わかりやすいように白背景を引きます。Add Componet を押してシンプルな背景を作成します。「Image」コンポーネントを選択します。

This is a image

5.Imageコンポーネントが作成されます。

This is a image

※コンポーネントは以下のような種類があります。

This is a image

6.UI画面いっぱいに画像を広げます。Anchorsの右下にある、ボタンを押します

This is a image

7.作成した白い画像は、背景のElementとして機能させていきますので、名前を「Backgroud」に変更します。

This is a image

8.セレクトメニューを作るため、エレメントを追加します。再度「NEW」ボタンよりエレメントを作成します。

スタートメニューでは新しくゲームを始める「NewGame」エレメントと途中からゲームを始める「Continue」エレメントを実装します。

This is a image

9.Add Componet を押してシンプルなテキストを作成します。「Text」コンポーネントを選択し作成します。

This is a image

10.Text入力欄に「NewGame」を追加します。

まずNewGameは下記プロパティのように作成し、画面左に配置します。

This is a image

11.「Continue」も「NewGame」と同様に作成します。

This is a image

12.一度、作業内容を保存します。UIエディタ上部にある「ファイル」、「名前をつけて保存」から、わかりやすい場所に保存します。

ここでは、プロジェクトフォルダ直下の「Assets」フォルダ内に「UICanvas」フォルダを作成してそこに保存していきます。ここでは「StartGame.uicanvas」としました。

This is a image

13.先ほどのスタートメニューを「Level」から呼び出します。O3DE Editorに移り、「Entity Outliner」で新しいエンティティとしてUIエンティティを作成します。

This is a image

Entity Inspector にUIエンティティにプロパティが表示されます。「Add Component」で機能を追加していきます。

This is a image

14.「Add Component」から UI Canvas Asset Ref コンポーネントを選択します。

This is a image

15.Canvas pathnameに、先ほど作成した「UI Canvas Element」StartGame.uicanvasを選択します。

This is a image

16.レベルをロードした時にUIを自動的に表示するには、「Load automatically」をONにします。

This is a image

17.Play Controls ボタンメニューから「PlayGame(Maximized)」を選んで、クリックします。

This is a image

18.UIが表示されます。

This is a image

comments powered by Disqus