Skip to main content

Layouts & Prefabs

Layout Breakdown​

Once you have the mod.io plugin installed, then modifying the Template UI in the ModioComponentUI scene to suit your game is simple, assuming you are already familiar with UI Layouts in Unity.

Here's a brief breakdown of the main layouts and widgets that make the UI, and how to modify them to suit your needs.

ModBrowser​

modio mod browser This is the main layout for the Mod Browser. The layouts are built to be navigable on both Keyboard & Mouse and Gamepad, and the layout should scale responsively to different screen aspect ratios.
 

Mod Tile​

modio mod tile This is the main layout for the Mod View.
While the thumbnail Gallery should be kept at a consistent aspect ration of 16:9, the rest of the layout & widgets can be scaled to suit your current layout.
 

ModPanel_ModDisplay​

modio mod display The Mod Tile that will populate the browser. Their scale and padding in the Mod Browser can be set via the ModBrowser_GridView prefab in ModBrowser.
 

SortAndFilter​

modio filter panel The filter panel uses both Radio and Check boxes for filter and sort options, broken down into sub-categories that can be expanded or collapsed.
 

Managing Layouts & Prefabs​

Main scene for the Mod Browser can be found in Plugins/ModioUI/ExampleScenes/ModioComponentUI
Layouts can be found in Plugins/modioUI/Prefabs, with the base prefabs for elements like buttons and input fields being in Widgets/UIBasics, and the unique widgets for specific cases are in Widgets/Specific.

ModBrowser​

mod browser layout ModBrowser contains the Grid View for the scrolling list of mod tiles. It also houses most of the main panels and modals that will be called in the UI.
 

ModPanel_ModDisplay​

mod view layout This layout will scale vertically to fit the display, but remain centered at a fixed width.
 

ModBrowser_GridView​

mod gridview layout The list of mods is populated in GridLayout inside Modbrowser_GridView, with the mods size and padding being set by its Grid Layout Group component.
 

Mod Tile​

mod gridview layout The Mod Tile Thumbnail Image (Logo) has its size, reference image and loading overlay controlled by Modio UI Mod Properties

Marketplace Cost is controls by the NameInfo Modio UI Mod Properties component, letting the name text field scale down to fit the price/purchased state if the mod is a Premium mod.  

Layout Interaction States​

mod tile layout

Modio UI Selectable Transitions​

Buttons, Mod Tiles and other interactable/navigable elements have their states controlled by the Modio UI Selectable Transitions component.

An instance of the component can control the standard button states (Normal, Highlighted, Pressed, Selected, Disabled) for one visual element (eg, an outline image).

If the interactable object is a standard UI button, then the Toggle Filter setting can be set to Any. If the interactable object has toggle states (eg, on/off), then the Toggle Filter setting will need to be set to Only Off on the first component, and a second instance component will need to be added to control the visuals of the button, and its Toggle Filter set to Only On to set the visuals of its Toggle On state.

Modio UI Input Prompt component​

mod tile layout
Controls button actions, icons, and conditions (eg, hid if no bindings, hide if gamepad detected)

Localization​

mod tile layout
The Template UIs core strings come localized in 18 languages: English, German, Italian, French, Polish, Portuguese, Japanese, Korean, Russian, Spanish, Chinese (Simplified), Chinese (Traditional), Ukranian, Bulgarian, Thai, Hungarian, Indonesian, Turkish & Latin American.

The strings for Localisation can be found in Prefabs/ModioUnityLocalisation.csv