Parsing Twitch.tv Emotes in Animate CC?

[thefyrewire]

Hello, I'm currently working a simple chat overlay in Animate CC. I have everything all set up except parsing the Twitch emotes. Obviously it is a case of iterating over the text and matching the keys to the appropriate images, which I have the JSON files for, however I'm not exactly sure how to actually embed the images within the text. I've searched over other emote questions however they all refer to using the <img> tag which is an HTML thing so I don't think I can do that directly inside Animate.

For instance, it would usually be something like:

tempMsg[i] = '<img src="' + emotes.get( tempMsg[i] ) + '">';

A function of which might return something like

<img class="emoticon" src="http://static-cdn.jtvnw.net/emoticons/v1/356/3.0"> haha <img class="emoticon" src="http://static-cdn.jtvnw.net/emoticons/v1/25/3.0"> lel

But in Animate the result doesn't display an image, it just shows the entire <img src> link inside the text. I'm guessing I need to use ctx.drawImage somehow, but then I have to worry about how to draw it into the right place in the message? Any advice would be greatly appreciated, thank you!

[ClayUUID · Accepted solution]

In Canvas mode Animate draws text using the HTML 5 canvas element, which does not support inline HTML of any kind, not even bold or italics tags.

To display arbitrary HTML content in Canvas mode you have to float a div element over the stage and populate that with your HTML (this is how the HTML components work as well). Note that this works best if you are not scaling the stage.

I've posted a bit of code I use to create and destroy these floated divs around here a few times. Here's the most recent version: Dynamic Text Field in Animate CC Version 18 Build 107 aon Mac

[thefyrewire]

Thank you for that, it makes more sense now. I just tried it and it worked great as a static message and the emote appeared as expected, except now I need to attach it to the message being animated, as when new messages come in they come in from the bottom and get pushed upwards. Currently, for each new message I make it create a Message object which contains stuff like the name of the sender, profile picture, text bubble graphic etc.

This is all put into a CreateJS container so it's all relative to 0. Is it possible to create the div using your function and add it to the container so the parsed text can be animated along with it or this is impossible by nature? I tried using this.container.addChild(mkDiv(stuff)); but it doesn't get animated.

[ClayUUID]

Yes, CreateJS's tween library only knows about its internal objects that are rendered to the canvas. To keep everything visually lined up the easiest approach would be to do everything as HTML elements. But at that point why use Animate at all?

[thefyrewire]

I see... I've just been using Animate a lot in the last month so I guess it was just my go to. Currently it looks like this.

Do you think it's possible to recreate this without canvas and use GSAP to animate the divs? As long as the answer is yes I guess I'll just keep trying.

[ClayUUID]

Of course it's possible. It's just shoving boxes of text around.