Implement a chat text box supporting emoticon animation and escape characters in the game

Figure 1	Figure 2
Figure 3	Figure 4

It has become an inevitable choice for online games to support QQ-like emoticons and escape characters in game chat text boxes. We are all familiar with emoticons, escape symbols are used to embed some special characters in the text to indicate text attributes or some specific output control. In fact, emoticon animations are also represented by escape characters, but you do not need to directly enter these escape characters. Instead, you can select an emoticon in the emoticon list box and the system will automatically input these symbols for you. For example, # R, # G, and # B are used to indicate that the subsequent texts are displayed in red, green, and blue colors respectively. # B indicates that the subsequent texts are flickering, # N indicates that the subsequent text attributes are restored to the default value. # add three numbers to indicate specific emojis. For example, #001 indicates expression 1, for example, a smiling face.

Implement a chat text boxProgramPersonnel is not a big challenge. The problems to be solved include parsing escape characters, correct calculation of text and emoticons width for automatic line feed, and correct calculation of line spacing when the text and emoticons are not high, when the text content exceeds the display range of the text box, the text part in the video is correctly displayed, and you even need to support a variety of different sizes of fonts and expressions.

This article does not discuss all the details about how to implement these features. It only describes the key data structures that support these features.

The content of a text box consists of a group of row objects, each row object represents a row in the text box, the row object can be saved in a linked list or dynamic array. The row object itself is invisible. It is the container that saves a set of visual objects. There are two types of visual objects: Text objects and emoticon objects. They are derived from the same base class. They only have one common attribute, that is, their own rectangular area. The text object stores the corresponding string, text color, and whether or not to flash. A more complex design can also contain font information. The emoticon object stores the emoticon ID and the current animation time of the emoticon. It is used to calculate the animation frame. The visible object can be saved in the row object or through a linked list or dynamic array. A row object also has the attribute of a rectangle area, which contains the box of all the visible object Rectangular areas saved by the row object. Obviously, the row object height is determined by the objects with the highest height among all the visible objects of the row. The rectangular area of a visual object is relative to the row object, not the absolute coordinates on the screen. This is also the common practice of interface elements to represent coordinates, facilitating the movement of controls, and control content scrolling.

The most complex part of this system is the process of breaking down the text strings added to the text box into visual objects contained in line objects and row objects. Note that each change in the text attributes (such as changing the color, flashing, or font) must generate a separate text visual object. This process is handled by a build (...) function, which converts a new text string into a row object and a visible object and inserts it into the system. With the data structure described above, this process has become very clear.

Figure 1: add all the content in the text box. You can see that the height of the line with an emoticon is increased by the emoticon object, and the line spacing without an emoticon is small.

Figure 2: the actual display content of the control is the content of the control that is cut by the control's border and displayed in the text box's eye. It is a part of all content, you can scroll up or down to view all content

Figure 3: Build (...) the function is divided into a line object and a text segment of the visible object. The black border indicates the line object, the bright blue border indicates the Text object, and the bright purple border indicates the expression object.
At the same time, we can see that because the font larger than figure 1 and figure 2 and the width of different controls are used, the position of the automatic line feed has changed, this also affects the decomposition of row objects and visual objects.

Figure 4: Figure 3 is partially enlarged to display the row object, Text object, and expression object more clearly.

In the figure, the content before parsing the parsed string is as follows:
"Sina Financial News#001Evening 20# GChina Securities Regulatory Commission# NSuddenly hold a press conference to announce# YGuiding Opinions on the release of restricted stock shares by Listed Companies# N #020To regulate the unblocking of stock-to-sale shares that have received much attention from the market.#002"
#001, # G, # N, # Y, #020, and #002 are all escape characters.