Add a UI to a scene

BeginnerArtistDesigner

After you create a UI page, add it to the scene as a component on an entity.

  • In the Scene Editor, create an empty entity. To do this, right-click the scene and select Empty entity.

Create empty entity

  • In the Property Grid (on the right by default), click Add component and select UI.

Add UI component

Game Studio adds a UI component to the entity.

UI component

  • Next to Page, click Hand icon (Select an asset).

    The Select an asset window opens.

Select UI page

  • Select the UI page you want to add and click OK.

    For information about how to create and edit UI pages, see the UI editor page.

Tip

To stop the UI obscuring the rest of the scene in the editor, disable the UI component in the Property Grid.

Disable UI component

Remember to enable the component again before you run the game. If you don't, Xenko doesn't display the UI.

Assign a UI page to a UI page component in code

You can assign a UI page to the Page property of a UI component.

  1. // This property can be assigned from a UI page asset in Game Studio
  2. public UIPage MyPage { get; set; }
  4. protected override void LoadScene()
  5. {
  6.     InitializeUI();
  7. }
  9. public void InitializeUI()
  10. {
  11.     var rootElement = MyPage.RootElement;
  12.     // to look for a specific element in the UI page, extension methods can be used
  13.     var button = rootElement.FindVisualChildOfType<Button>("buttonOk");
  15.     // if there's no element named "buttonOk" in the UI tree or the type doesn't match,
  16.     // the previous method returns null
  17.     if (button != null)
  18.     {
  19.         // attach a delegate to the Click event
  20.         button.Click += delegate
  21.         {
  22.             // do something here...
  23.         };
  24.     }
  26.     // assign the page to the UI component
  27.     var uiComponent = Entity.Get<UIComponent>();
  28.     uiComponent.Page = MyPage;
  29. }

UI component properties

PropertyDescription
PageThe UI page displayed by the component
Full screenNote: We recommend you use this as other stuff is broken
ResolutionThe UI resolution in pixels
SizeGets or sets the actual size of the UI component in world units
Resolution stretchHow the virtual resolution value should be used (FixedWithFixedHeight, FixedWithAdaptableHeight, or FixedHeightAdaptableWidth)
BillboardIf selected, the UI always faces the camera. Note: Disabling billboard mode causes UI text errors in the current version of Xenko
Snap textIf selected, the UI text is snapped to the closest pixel
Fixed sizeGets or sets the value indicating whether the UI should always be a fixed size on screen (eg a component with a height of 1 will use 0.1 of the screen). Note: This feature doesn't work in the current version of Xenko
Render groupThe render group the UI uses

UI scripts

To make UIs interactive, you need to add a script. Without scripts, UIs are simply non-interactive images.

For an example of a UI implemented in Xenko, see the game menu UI sample included with Xenko.

Sample UI project

See also