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.

Cutting Out the Emote

The first step is to cut out the emote from our SpriteSheets. Here is how it's reccomended to do this:

  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.

Rendering Emote on Screen

Once you have cut out the Emote, you then need to decide what size to display it at in. This is largely up to you and the design of your application. Provided you use the above rectangle in your rendering you can render this at any size. This can be useful to support differing screen pixel densities within your application environment and userbase.

For example, On Mixer we render emotes at 24x24px, but we support any image size.

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.