Using Tutorials

Reddot System

The Reddot system is commonly used for various UI message prompts. During the development process, there are problems such as too many hierarchies of reddots and the need for inter-level linkage settings. ThunderFire UX Tool has implemented a built-in reddot management system, which achieves unified processing of reddot hierarchies by adding paths to each reddot object.


How to use

1.Attach Component

Add a Reddot component to the object to be displayed with reddots.



2.Reddot Flag

The ReddotFlag object is the object that appears or disappears when the reddot status changes. It is recommended to set it as Children of the reddot object.


3.Reddot Path

Path represents the associated path of the reddot data, and the format is set as "stringA/stringB/stringC/stringD".

Note: When setting the Path of the second-layer reddot, the path should be set completely, which should be "stringA/stringB", not just "stringB".

  • Static Configuration For reddot objects that have been determined (such as functional entry buttons on the main interface), they can be directly set in the editor.

  • Dynamic Configuration For reddot objects that are dynamically generated or cannot be determined during the editing phase (such as reddots in the list), they can be set through code. (Please refer to the Program Interface below for the code.)


4.Reddot Status Setting

When running the game, the reddot status can be set through code. (Please refer to the Program Interface below for code.)

After setting the reddot status, the reddot tool will update the display status of all reddots according to the path. The update rule is that the leaf nodes in the reddot tree use their own display status, while non-leaf nodes determine their own display status based on the display status of their Children nodes.


Case



Program Interface

Variables

// Red dot data correlation path
// Class:Reddot
public string Path;

// Objects that are hidden when the red dot state changes
// Class:Reddot
public GameObject reddotFlag;

Function

// Description: Set the red dots under this path to be displayed or not
// Class:ReddotManager
// Parameters:
//     isShown : whether the red dot is displayed
//     Path : red dot path
// Return value: None
public static void SetRedDotData(bool isShown, string Path)

Cases

// Case 1
// Dynamically add red dot paths to components in the code
Reddot reddot = go.GetComponent<Reddot>();
reddot.Path = "Reddot1/firstChild";

// Case 2
// Set the red dot status
Reddot reddot = go.GetComponent<Reddot>();
ReddotManager.SetRedDotData(true, reddot.Path);

A UI Design Solution for Developers
feedback