DreamOS UI Elements

Author: admin 151 views

There are some custom elements that are not included in the default Unity UI. In this section, you can learn more things about them.

Buttons

There’s no usage difference, you can use DreamOS buttons just like the default one. Icon and text variables can be changed via Button Manager. If you don’t want to change them by using Button Manager, you can enable ‘Use Custom Content’. For scripting, you can still continue to use UnityEngine.UI.Button class.

Properties

Property	Type	Function
buttonText	string	Defines the text shown on the button.
buttonIcon	Sprite	Defines the icon shown on the button.
clickSound	AudioClip	Audio clip that plays on button click.
hoverSound	AudioClip	Audio clip that plays on button hover.
useCustomContent	bool	Bypasses content properties (e.g. buttonText) when enabled.

API / Scripting

				
					using Michsky.DreamOS; // namespace

public ButtonManager myButton;

void YourFunction()
{
   // Updating button content
   myButton.buttonText = "My New Text";
   myButton.buttonIcon = SpriteVar;
   myButton.UpdateUI();
  
   // Enable or disable options
   myButton.useHoverEffect = true;
   myButton.useRipple = true;
   myButton.enableButtonSounds = true;
   myButton.useClickSound = true;
   myButton.useHoverSound = true;
   myButton.useCustomContent = false;
}

Context Menu

Simple yet functional pop-up menu which opens with a right click. It only requires a manager (Context Menu Manager) to work, which was already created in the ready to use scene(s).
To use it, you can simply add ‘Context Menu Content’ to any of your UI object, assign ‘Button Item’ (Context Menu Button) and ‘Context Manager’ fields.

Items

You can add context items to this list, change its name, icon or add events.

Properties

Property	Type	Function
mainCanvas	Canvas	Initializes the system depending on the rendering mode.
isOn	bool	Returns the context menu state.

API / Scripting

				
					using Michsky.DreamOS; // namespace

public ContextMenuContent myContextMenu;

void YourFunction()
{
   // Adding a new button
   myContextMenu.CreateNewButton("Title", spriteVariable);
}

Horizontal Selector

Basically, think of this thing as a dropdown, but the navigation is managed by only with next and previous controls. In my opinion, it fits better than dropdown in most cases.

Items

You can add horizontal selector items to this list. If you wish, you can add functions to each item as well. As long as ‘Indicator’ is enabled, each button will generate an indicator item at runtime.

Saving

You can save the selected value by enabling this feature. Note that every selector should has its own unique Selector Tag value. Otherwise, there might be conflict(s) between selectors.

Properties

Property	Type	Function
invokeAtStart	bool	Process onValueChanged events at start when enabled.
index	int	Returns the currently selected item index.
onValueChanged	UnityEvent	Process dynamic events on item/value changed.

API / Scripting

				
					using Michsky.DreamOS; // Namespace required

public HorizontalSelector mySelector; // Your selector variable

void YourFunction()
{
   // Creating a new item
   mySelector.CreateNewItem("Item Title");
 
   // Creating items within a loop
   for (int i = 0; i < yourIndexOrVariable; ++i)
   {
	  mySelector.CreateNewItem("Item Title");
   }

   // Adding a new dynamic event
   mySelector.selectorEvent.AddListener(YourEventHere);
  
   // Initializing the selector - use this if you've created a new item at runtime
   mySelector.defaultIndex = 3; // optional
   mySelector.SetupSelector();
  
   // Changing index & updating UI
   mySelector.index = 3;
   mySelector.UpdateUI();
  
   mySelector.ForwardClick(); // Select next item
   mySelector.PreviousClick(); // Select previous item
   mySelector.itemList.RemoveAt(3); // Delete a specific item
}

Input Field

Input fields in DreamOS are basically the same as the default TMP Input Field. The only difference is the animation. Other than that, you can use them just like the default one. For scripting, you can reference ‘TMP_InputField’ and use its functions.

Modal Window

In order to change Modal Window content, you just need to change some values via Modal Window Manager (which is attached to the modal object).

At runtime, window content will be changing depending on its manager. If you want to change those values manually, you can enable ‘Use Custom Content’. You can call the window via OnClick or within your script.

Properties

Property	Type	Function
windowIcon	Sprite	Sets the content/header icon of the window.
titleText	string	Sets the content/header title of the window.
descriptionText	string	Sets the description of the window.
isOn	bool	Returns the modal window state.
useCustomValues	bool	Bypasses content properties (e.g. titleText) when enabled.

API / Scripting

				
					using Michsky.DreamOS; // Namespace required

public ModalWindowManager myModalWindow; // Your window variable

void YourFunction()
{
   myModalWindow.icon = spriteVariable; // Change icon
   myModalWindow.titleText = "New Title"; // Change title
   myModalWindow.descriptionText = "Description"; // Change desc
   myModalWindow.UpdateUI(); // Update UI
   myModalWindow.OpenWindow(); // Open window
   myModalWindow.CloseWindow(); // Close window
   myModalWindow.AnimateWindow(); // Close/Open window automatically
}

Slider

DreamOS is using the native slider that comes with Unity UI, but we’ve added some new cool features into it. For scripting, you can use UnityEngine.UI.Slider.

Saving

You can save the last selected value by checking this box. Note that every selector should has its own unique ‘Slider Tag’ value. Otherwise, there might be conflict(s) between sliders.

Properties

Property	Type	Function
useRoundValue	bool	Shows simplified value when enabled.
usePercent	bool	Adds percent tag when enabled.
mainSlider	UnityEngine.UI.Slider	The main slider source.

API / Scripting

				
					using Michsky.DreamOS; // namespace

public SliderManager mySlider;

void YourFunction()
{
   mySlider.mainSlider.value = 25f; // Changing slider value
   mySlider.usePercent = false; // Enabling/disabling percent
   mySlider.useRoundValue = false; // Show simplifed value
}

Switch

Basically, think of this thing as a different kind of toggle.

Saving

You can save the last selected value by checking the ‘Save Value’ box. Note that every switch should has its own unique ‘Switch Tag’ value in order to save correctly.

Properties

Property	Type	Function
invokeAtStart	bool	Process switch events at start when enabled.
isOn	bool	Returns/sets the current switch state.

API / Scripting

				
					using Michsky.DreamOS; // namespace

public SwitchManager mySwitch;

void YourFunction()
{
   mySwitch.isOn = true; // Changing switch state manually
   mySlider.UpdateUI(); // Updating UI after changing the state
   mySlider.AnimateSwitch(); // Changing switch state automatically - no updatig required
}

Native UI Elements

DreamOS is using the native Unity UI and its elements. You can use your own UI tools or third party tools with it without any problem. For more information about Unity UI, I’d suggest reading the official documentation or watching tutorials: https://docs.unity3d.com/2017.3/Documentation/Manual/UISystem.html