Custom UI (inventory, console and/or status bar)

Modified on Wed, 31 Mar 2021 at 09:02 AM

Voxel Play provides a default UI which can be replaced by yours.


In Voxel Play Environment inspector, expand the "Default Assets" section and look for the "UI Prefab" field:



This prefab can contain anything. The default UI Prefab included in Voxel Play is "Voxel Play UI Canvas" which contains a collection of UI elements under a standard Unity Canvas root and can be found in the following folder: Voxel Play/Resources/VoxelPlay/UI. The prefab also contains a script attached to the root element called VoxelPlayUIDefault.cs


You can duplicate and modify the prefabs to match the look & feel of your game. if you add new buttons, you will need to modify the VoxelPlayUIDefault.cs to handle its interaction (see below).


Note: Voxel Play will provide a mobile UI version when it runs on a mobile device. You can assign an empty prefab to ensure a complete empty UI by Voxel Play.



Providing your own UI


There're 2 ways to provide your own UI:


Option 1 (Easy): in Voxel Play Environment inspector, disable inventory, console, status and other UI features under "Optional Game Features" section.

By disabling these features, you're basically forcing Voxel Play to ignore these features, so you can instantiate or use your own canvas or any kind of UI solution which can be provided by another asset or your own coded solution.



Option 2 (Advanced): you can also provide your own version of the default VoxelPlayUI interface classes.

In this case, to provide your own UI and preserve your modifications between Voxel Play upgrades you can duplicate and rename the default prefab and script or even create a whole new prefab from scratch.

Make sure your script derives from the VoxelPlayUI base class. It should have this definition:


public partial class VoxelPlayUIDefault : VoxelPlayUI {
...
}


The VoxelPlayUI base class is a MonoBehaviour and already defines the following methods which you can override in your class. Important: you don't need to override every method. If you don't, that functionality simply will do nothing.


void InitUI ();

Voxel Play will call this method so you can initialize your UI.


void ToggleConsoleVisibility (bool state);

This method shows/hides the console (the area where user can enter commands).


public override void AddConsoleText (string text);

This method adds a text to the console but do not open the console.


public override void AddMessage (string text, float displayTime = 4f, bool flash = true, bool openConsole = false);

Similar to AddConsoleText but provides more options.


public override void HideStatusText ();

Hides the status bar


public override void ToggleInventoryVisibility (bool state);

Shows/hides the inventory panel.


public override void InventoryNextPage ();

If the inventory supports multiple pages, this method can be called to move to next page.


public override void InventoryPreviousPage ();

If the inventory supports multiple pages, this method can be called to move to previous page.


public override void RefreshInventoryContents ();

Refreshes inventory contents.


public override void ShowSelectedItem (InventoryItem inventoryItem);

Shows the selected item on the screen. The default UI shows the item in the lower/right corner of the screen.


public override void HideSelectedItem ();

Hides the selected item.


public override bool IsVisible;

Returns true if the inventory is visible.


public override void ToggleInitializationPanel (bool visible, string text = "", float progress = 0);

Shows/hides or updates info about a task in progress. Used by the default UI to inform the status of the world loading process.


public override void ToggleDebugWindow (bool visible);

Shows/hides a debug window.


public virtual int inventoryRows;

Returns or sets the number of rows for the inventory.


public virtual int inventoryColumns;

Returns or sets the number of columns for the inventory.






Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article