#EmojiPicker and EmojiButton

An EmojiPicker is a grid of emoji: a search field, a row of the recent emoji, a tab for each category and the emoji of the current tab. A click on an emoji raises EmojiPicked with its text.

An EmojiButton is a button that opens an EmojiPicker in a popup. The picked emoji goes into a TextField at its caret.

<ui:TextField name="message" />
<tb:EmojiButton name="emoji" />

var input = root.Q<TextField>("message");
var emoji = root.Q<EmojiButton>("emoji");
emoji.Target = input;   // a picked emoji goes into the field at the caret
emoji.EmojiPicked += text => Debug.Log("Picked " + text);

To send an emoji at once (for example a quick reaction), do not set Target. Use EmojiPicked:

reactions.EmojiPicked += text => chat.Add("Me", text, ChatSide.Outgoing);

#EmojiPicker

• The tab buttons show the first emoji of their category. The tooltip of a tab is the name of the category, and the tooltip of an emoji is its search words.
• The cursor and select index of a TextField count code points, not chars. InsertAtCaret counts an emoji as one step of the caret.
• The emoji are plain Unicode text: a message or a label can keep them as text.

#EmojiButton

• The button does not take the focus, so the text field keeps its caret while the user clicks the button.
• Open() gives the focus to the search field. Type to search at once.
• A pick closes the popup. Escape closes it and gives the focus back to Target. A click outside the popup also closes it.

#How to show the emoji in a player

UI Toolkit draws an emoji with a font of the operating system only when the system has one. The result is different on Windows, macOS and Linux, and some systems show empty boxes. The package has the Twemoji images (CC-BY 4.0) for all emoji of the picker, so the emoji look the same on each platform.

Do these steps one time:

1. Run Tools/generators/gen_twemoji.cs in the Unity Editor (see Tools/generators/README.md). It writes Twemoji.png, Twemoji.asset and Emoji Text Settings.asset in Assets/UIToolbox/Runtime/Emoji.
2. Select your PanelSettings asset. Set Text Settings to Emoji Text Settings. If your panel already has text settings, add Twemoji to its Emoji Fallback Text Assets list.

The script does step 2 for Assets/UIToolbox/Examples/Panel Settings.asset when it has no text settings.

• The fallback works with the standard text generator of UI Toolkit. Other text generators are not covered.
• The emoji are 72 px images. They are sharp up to a font size of about 40 px.
• An emoji that is not in the sprite asset uses the font of the system, as before.
• Your product must give credit for the Twemoji images. See Third Party Notices.md in the package.

#Styling

The rules are in Assets/UIToolbox/Runtime/Resources/UIToolbox/Styles/Controls.uss.

To make the emoji bigger:

.unity-button.tb-emoji-picker__emoji { width: 44px; height: 44px; font-size: 28px; }