Font Issue with Emojis & Emoticons

[asnagni]

Description:

We are experiencing an issue with displaying emojis and emoticons in our application built with the Axmol engine. When we use our custom system font (Nunito), emojis and emoticons do not render correctly; instead, they appear as squares. This issue does not occur when we switch to the Arial font, where emojis and emoticons display as expected.

• axmol version: 2.1.4
• devices test on: iPhon X, iPhone 11, iPhone 14, iPhone 15
• developing environments
  • NDK version: N/A
  • Xcode version: 15.4
  • Visual Studio:
    • VS version: N/A
    • MSVC version: N/A
    • Windows SDK version: N/A
  • cmake version: 3.30.1

Steps to Reproduce:

1. Integrate the Nunito font into the Axmol engine using the same method we used for cocos2d-x.
2. Create an Editbiox
3. Attempt to type or display emojis or emoticons in the application.
4. Observe the rendered output.

Expected Behavior:

Emojis and emoticons should render correctly when using the Nunito font, similar to how they do when using the Arial font.

Actual Behavior:

Emojis and emoticons appear as squares when using the Nunito font.

Additional Information:

Font: Nunito
Engine: Axmol
Comparison: Emojis and emoticons render correctly with the Arial font.
Questions:

Are there specific configurations or additional steps required in Axmol for supporting emojis and emoticons with custom fonts?
Is there a known compatibility issue between Axmol and the Nunito font regarding emoji rendering?
Attachments:

Text project:
HelloCpp.zip

Thank you for your assistance.

[asnagni]

After more investigations, to ensure emoji support, I included a font that supports emojis along with Nunito.
I used a fallback font for emojis such as "Apple Color Emoji" on iOS or "Noto Color Emoji" on Android. I’m not sure
if this work around is the right way to go to have to work.

For the EditBox on iOS:
editBox->setFont("Nunito-Regular.ttf,Apple Color Emoji", 42);

the font "Nunito-Regular.ttf,Apple Color Emoji" is integrated in the iOS device no need to download anything.

For the EditBox on Android:
editBox->setFont("Nunito-Regular.ttf,NotoColorEmoji.ttf”, 42);

For Android some devices may not have it installed by default so you may want to download and install it.

I still don’t know why is the difference between cocos2d-x and Axmol. But at least there is a workaround.
What do you think? Is there a better way?

[rh101]

Integrate the Nunito font into the Axmol engine using the same method we used for cocos2d-x.

@asnagni Please clarify one thing, when using Nunito-Regular.ttf with Cocos2d-x, did it render the emojis correctly? Specifically, when using code like this:

editBox->setFont("Nunito-Regular.ttf", 42);

Also, if it did show emojis, then which version of Cocos2d-x are you referring to, v3 or v4?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[asnagni]

Hi guys,
Any idea on this one?

Thank you,
Stay safe

[rh101]

Any idea on this one?

Can you please answer the questions in the post above: #2071 (comment)