Emojis in Text

Demonstrates how to render emojis within a Text Game Object using emoji characters directly or Unicode escape sequences.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    create ()
    {
        //  How this renders depends entirely on the browser, each does it a little differently
        //  Note that the fill color value is ignored for most emoji (as you'd expect)
        this.add.text(0, 60, '😜🍩🏄🕹💖🧟', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });
        this.add.text(0, 260, '🥪🤬🧠💩🤖👩‍💻', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });

        //  Here is how to embed an emoji using a unicode sequence instead:
        //  For more details see http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript
        this.add.text(0, 460, '\ud83d\ude03', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Text29 examples

Google WebfontThis example demonstrates how to use the WebFont Loader to import and apply Google Fonts to Text objects, ensuring fonts are loaded before they are rendered.

Italic Text and PaddingDemonstrates how to apply italic font styles to Text objects and use padding to prevent character clipping on the right edge.

Multi-Line TextDemonstrates how to display multiple lines of text within a single Text Game Object by providing an array of strings.

Multi-Line Text AlignmentDemonstrates how to display multi-line text using an array of strings and apply horizontal alignment.