Customize Versus UI

The Versus UI can be customized to match the style guide of your title quickly by using the pre-built UI imported when you Add Scene Essentials to the main menu of your game.

UI elements in the Versus UI are affected by Top Level Elements, Global Settings, or Individual Page Settings. Top Level Elements affect the appearance of buttons, navigation, icons, banners, backgrounds, cards, text input, and images. Elements listed in Global Settings affect multiple pages whereas Individual Page Settings affect individual page elements that aren’t included in Global Settings.

🚧

Note:

The Versus UI can support Portrait or Landscape but not dynamically switch between the two at runtime when using the Auto-Rotation Default Orientation setting.

Top Level Elements

🚧

Note

There is a known issue with editing text settings that will be fixed in the next release.

Images

There are two ways to edit images in Top Level Elements.

  1. Replace the source images found in Assets/VersusWinfinite/Resources/Images.
    Do not rename the image file in order to avoid unlinking all the screens containing the image.

  2. Customize the directly linked PSD files.
    In the editor, select Versus - Portrait or Versus - Landscape in your project’s Hierarchy and view the nested Versus - Top Level Elements - (Portrait/Landscape) game object.

All elements visible in this game object can be updated.All elements visible in this game object can be updated.

All elements visible in this game object can be updated.

Step 1: Select a UI Element to update.

Step 2: Navigate to the Image (Script) component in the inspector and select Source Image.

This will lead to the corresponding PSD file, which can be opened and edited in Photoshop.

Step 3: Edit and save the image in Photoshop. You will see the change affecting all the Versus screens below.

Global Settings

To edit Global Settings, first select the Versus - Portrait or Versus - Landscape game object in your project’s Hierarchy and view the VsUI component (you can find this nested under Versus > Versus Canvas > Versus - Portrait for portrait or Versus > Versus Canvas > Versus - Landscape for landscape). This script includes options for changing:

Text Settings

Primary and secondary fonts can be updated globally by selecting TextMeshPro assets.

**Primary Font Family** refers to big text such as: headers, titles, and large button text (from primary/secondary buttons).

**Secondary Font Family** refers to smaller text such as: content, navigation text, and small button text (Learn More buttons).**Primary Font Family** refers to big text such as: headers, titles, and large button text (from primary/secondary buttons).

**Secondary Font Family** refers to smaller text such as: content, navigation text, and small button text (Learn More buttons).

Primary Font Family refers to big text such as: headers, titles, and large button text (from primary/secondary buttons).

Secondary Font Family refers to smaller text such as: content, navigation text, and small button text (Learn More buttons).

Font Creation

Custom TextMeshPro assets can be created once the desired .OTF font file is in a directory within the Unity project.

Navigate to the Unity toolbar and go to Window > TextMeshPro > Font Asset Creator.

In Font Asset Creator, select the desired .OTF font file to convert.

Generate Font Atlas and save the generated TMP font file.

Individual Page Settings

To edit Individual Page Settings, first select the name of the page you’d like to edit as a child GameObject of Versus - Portrait or Versus - Landscape. The example below uses the Challenges And Prizes page. After selecting the desired page, you can edit the Individual Page Settings for it in the Inspector within the properties of Vs UI Page_PageName.

🚧

Note:

You can override any individual element by attaching an Override script which includes:

  • Font: VsUI_FontOverride
  • Font Color: VsUI_FontColorOverride
  • Font Size: Vs_OverrideFontSize
  • Image Color: VsUI_ImageColorOverride
  • Position: VsUI_OverridePosition
  • Scale: VsUI_OverrideSizeDelta