Emotes

Within Mixer's chat you will come across emotes. Emotes are pictures that are rendered within Chat. They are similar to Emojis and emotes you may find on other platforms.

On Mixer there are 3 types of Emotes:

  • Global Emotes - available everywhere and managed by the Mixer team
  • Subscription Emotes - Managed by channels which have subscriptions enabled
  • Verified Channel Emotes - Managed by Verified channels are created and managed by Mixer partners and verified channels, they can upload them to their channels. Different channels have different numbers of emotes that they can upload to their channel depending on various channel attributes.

Each emote has a picture and a name.

An example Emote, a Smiley face.
An example Emote, a Smiley face.

Using Emotes as a User

To use emotes you need to either be subscribed to the channel that owns them(for Partner emotes) or following the channel that owns them(for verified channel emotes). If you meet these requirements you can use the emote by selecting it within Mixer's emote panel or by typing its name prefixed by a colon.

Emote Payloads

Emotes are sent via Chat in the standard "ChatMessage" event. But for brevity the appropriate parts of the payload will be discussed here too.

Global Emote

{
    "type": "emoticon",
    "source": "builtin",
    "pack": "default",
    "coords": {
        "x": 96,
        "y": 0,
        "width": 24,
        "height": 24
    },
    "text": ":)"
}

Subscription & Verified Channel Emote

{
    "type": "emoticon",
    "source": "external",
    "pack": "https://uploads.mixer.com/emoticons/x.png",
    "coords": {
        "x": 24,
        "y": 48,
        "width": 24,
        "height": 24
    },
    "text": ":coolpartneremote"
}

Rendering Emotes

If you would like to render emotes in your own UI, then you will need to carry out some processing as emotes are arranged in Sprite sheets. For example here is the memes emote pack's sheet:

The standard memes emote pack spritesheet.
The standard memes emote pack spritesheet.

To render an emote based on the above payload information please carry out the following steps:

  1. If the source property is builtin, ensure you have the emote pack's sheet loaded you can find builtin packs at: https://mixer.com/_latest/emoticons/<pack name>.png
  2. If the source property is external, use the pack property to load the emote pack as pack will be a URL.
  3. Read the coords property in the emote payload
    1. Start a rectangle on the sheet that you loaded from step 1 or 2 that starts at the x and y positioned in the payload.
    2. Resize the rectangle the width and height of the value of the width and height in the payload.
    3. Use this rectangle to render the emote.

You can render then render this emote at any size provided it uses the above rectangle. This can be useful to resize the visual rendering of an emote to match your screen's display density etc.

Coordinate System

Mixer's Emote packs use the top left of the image as X:0, Y:0.

DON'Ts

  • Do NOT hard code the width, height, x or y when cutting an emote out of the sheet.
  • Do NOT assume all emotes are the same size.
  • Do NOT assume each channel/pack has the same number of emotes.