Support of emoji for Labels

cocos2d-x C++
1

Is there a universal way to support emojis using Cocos2d-x (version 3.17)?

I am using the class Label and using BMfont.

I tried with a TTF font as well, did not work either.

Tried to use the androidx.emoji2:emoji2 android package. It did not do anything for both BMP and TTF fonts.

I tried to see if I could generate a font that contains the emojis (BM font using the Angelcode BMFont generator and even if I was using a font that supports them in Office, I could not generate them into the BMfont output.)

The only way I could make them work is if I use the ugly systemFont.

I search on the Internet quite a bit as well with no clear answers.

Anyone achieved it? (For both Android and iOS)

2

You need use a richtext for this case

#define HEADER_XML_CHAT "<font color='#e6ffeb' face='fonts/tahomabd.ttf' size='12'>"
#define FOOTER_XML_CHAT "</font>"

std::string ChatLayer::handleChatLineToXMLText(std::string i_chatMsg)
{
    
    //"<img src='emo/ic_05.png' type='1'/> <font color='#e6ffeb' face='fonts/tahomabd.ttf' size='12'>" + i_chat.m_msg + "</font>"
    if(i_chatMsg != "")
    for (auto& icon: CHAT_ICON_TO_STRING) {
        std::string replacResXML = "<img src='" + icon.second +"' type='1'/>";
        HelperManager::GetInstance()->findAndReplaceAll(i_chatMsg, icon.first, replacResXML);
    }
    std::string k_resultStr = HEADER_XML_CHAT + i_chatMsg + FOOTER_XML_CHAT;
    return k_resultStr;
}

use :

auto richText = RichText::createWithXML(handleChatLineToXMLText(i_chat.m_msg));
        
        
		richText->ignoreContentAdaptWithSize(false);
		richText->setContentSize({ 373.0f*0.95f,0 });
		richText->formatText();

		const float k_actualRichTextSizeHeight = richText->getContentSize().height;
		richText->setContentSize(Size(373.0f, k_actualRichTextSizeHeight));
		richText->setWrapMode(RichText::WRAP_PER_WORD);
3

Thanks,

I assume CHAT_ICON_TO_STRING is a map that contains all Unicode and name of the image?

So something like:

first:1F469-1F3FD-200D-2764-FE0F-200D-1F48B-200D-1F469-1F3FE
second: emo/ic_05.png

?
In what format should the first be? Just like how I wrote it or in some other special format?

Thanks

4 
const std::map<std::string,std::string> CHAT_ICON_TO_STRING  = {

    std::make_pair(">:O", "emo/ic_01.png"),

    std::make_pair(":D", "emo/ic_02.png"),

    std::make_pair("(ic_3)", "emo/ic_03.png"),

    std::make_pair("(ic_4)", "emo/ic_04.png"),

    std::make_pair("(ic_5)", "emo/ic_05.png"),

    std::make_pair("(ic_6)", "emo/ic_06.png"),

    std::make_pair("(ic_7)", "emo/ic_07.png"),

    std::make_pair("(ic_8)", "emo/ic_08.png"),

    std::make_pair("(ic_9)", "emo/ic_09.png"),

    std::make_pair("(ic_10)", "emo/ic_10.png"),

    std::make_pair("(ic_11)", "emo/ic_11.png"),

    std::make_pair("(ic_12)", "emo/ic_12.png"),

    std::make_pair("(ic_13)", "emo/ic_13.png"),

    std::make_pair("(ic_14)", "emo/ic_14.png"),

    std::make_pair("(ic_15)", "emo/ic_15.png"),

    std::make_pair("(ic_16)", "emo/ic_16.png"),

    std::make_pair("(ic_17)", "emo/ic_17.png"),

    std::make_pair("(ic_18)", "emo/ic_18.png"),

    std::make_pair("(ic_19)", "emo/ic_19.png"),

    std::make_pair("(ic_20)", "emo/ic_20.png"),

    std::make_pair("(ic_21)", "emo/ic_21.png"),

    std::make_pair("(ic_22)", "emo/ic_22.png"),

    std::make_pair("(ic_23)", "emo/ic_23.png"),

    std::make_pair("(ic_24)", "emo/ic_24.png"),

    std::make_pair("(ic_25)", "emo/ic_25.png"),

    std::make_pair("(ic_26)", "emo/ic_26.png"),

    std::make_pair("(ic_27)", "emo/ic_27.png")

};
5

Oh, so you are mapping the emotions (text is written by the user like “:)” and transforming it into emoji glyph on the screen. But what about the real emoji unicode found in the list here:

https://unicode.org/emoji/charts/full-emoji-list.html

the codes look like:

U+1F600
or
U+1F636 U+200D U+1F32B U+FE0F

?