Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[Idea] Emoji bubbles

December 15 (4 years ago)

Edited December 17 (4 years ago)
Pat
Pro
API Scripter

Not emote bubbles (player talking etc) - single emoji bubbles. 

Idea is a player selects their token, a token action or a button or something they can use gives them a list of GM selected or curated emojis - the token then expresses this emoji in a little bubble over their token, like so: 


Right now, if you try the gist, you can type in 

!emojibubble|key

when you have a token selected and it will put a little emoji of a key above their head in a tiny speech bubble. 

Have not started clean-up yet (removing old buttons and text objects) ... and the idea is eventually to allow a drop down of text choices, or even a chat button selection (which will require the pass-through select retention from last action if I do that...maybe) or a drop down of picture emojis if I can make it work... 

Thread to turn this into a script is here - [Script] Emojibubbles - this thread can be closed. 

December 15 (4 years ago)
The Aaron
Roll20 Production Team
API Scripter

That's really cute!

I love the border and shape you're using, Pat. 

Trying to think of use cases for this idea:

- As mentioned by Pat, for shy or new players who may not want to force themselves into audio chat.

- Indicating a character action: performing a skill check, checking for traps, etc.

- Indicating a character mood: scared, excited, angry, etc.


Would it be at all possible to put short words/phrases into the bubble as well? I'm thinking specifically for a. characters with catchphrases ("by the power of Grayskull!", etc.) b. to allow characters to react to certain situations (like when the boss monster is revealed and someone wants to say "OMG, we're going to die" or words to that effect). 

I think either a drop-down menu of choices or chat button selection would be fine. 

December 15 (4 years ago)

Edited December 15 (4 years ago)
Pat
Pro
API Scripter


Jay R. said:

Would it be at all possible to put short words/phrases into the bubble as well? I'm thinking specifically for a. characters with catchphrases ("by the power of Grayskull!", etc.) b. to allow characters to react to certain situations (like when the boss monster is revealed and someone wants to say "OMG, we're going to die" or words to that effect). 

I think either a drop-down menu of choices or chat button selection would be fine. 

That'd be more the bailiwick of the script that The_Aaron was discussing in the other thread - I don't want to step on toes, but I might be able to make a more balloon-like expandable object as a drawn object - the trouble is where it fits with adjacent objects, tokens, etc... this one it's hard to troll another player by continually moving adjacent and speaking to cover up their token... 

It can also be used by the GM to indicate NPC behavior that might be hard to communicate on a tabletop - for instance, which character is angry? A token marker might be a bit heavy handed - an emoji balloon of an angry face might work just fine. There is also the classic quest marker of an exclamation point: 


December 15 (4 years ago)
Pat
Pro
API Scripter

In case anyone wants to know: I used this codepen to create the SVG syntax to create the bubble - the "X" syntax isn't in the Roll20 API guidance, but it works! 


Pat said:

I don't want to step on toes, but I might be able to make a more balloon-like expandable object as a drawn object - the trouble is where it fits with adjacent objects, tokens, etc... this one it's hard to troll another player by continually moving adjacent and speaking to cover up their token... 

It can also be used by the GM to indicate NPC behavior that might be hard to communicate on a tabletop - for instance, which character is angry? A token marker might be a bit heavy handed - an emoji balloon of an angry face might work just fine. There is also the classic quest marker of an exclamation point: 


Yeah, I hear you. For words you'd probably want a timed fade, so the text isn't stuck covering characters. 

I like the NPC behavior case you identified. Has application if the encounter is contingent on monster morale (which one is angry, which one is demoralized / running away, etc.). 





December 15 (4 years ago)
Jordan C.
Pro
API Scripter

This could be really neat for social settings too. I can imagine a tavern with a few NPCs and having certain bubbles like an "..." to show that they are engaged in a conversation or a musical note showing they are singing/listening to music. And halfway through typing this I just realized I am describing the Sims.


Jordan C. said:

This could be really neat for social settings too. I can imagine a tavern with a few NPCs and having certain bubbles like an "..." to show that they are engaged in a conversation or a musical note showing they are singing/listening to music. And halfway through typing this I just realized I am describing the Sims.


LOL, good point!

In any case, I would definitely use this script if Pat should develop it with preset emoji. 

December 15 (4 years ago)
Pat
Pro
API Scripter


Jay R. said:


Jordan C. said:

This could be really neat for social settings too. I can imagine a tavern with a few NPCs and having certain bubbles like an "..." to show that they are engaged in a conversation or a musical note showing they are singing/listening to music. And halfway through typing this I just realized I am describing the Sims.


LOL, good point!

In any case, I would definitely use this script if Pat should develop it with preset emoji. 

Sure! I want to make it easy to manage and easy to implement - it might be a bit easier to carry to development than the attenuated audio, so that might take a back seat - and all of them take a back seat to !teleport. 

It's one I want to use in my own games for many of the reasons above, and I have a very shy player in that game who I think might engage more... 


December 16 (4 years ago)

Edited December 16 (4 years ago)
Pat
Pro
API Scripter

Update


New gist is up - has a visible-to-all-players "control panel" journal entry that allows any player to click on tokens they control and activate an emoji bubble adjacent to their token.



Features:

  • Players have an always-available control panel to view and select emoji bubbles for their tokens
  • Keeps track of emoji bubble elements per-token, between sessions, for automatic clean up
  • Removes and replaces a previous emoji bubble if a second one is invoked
  • Any movement of the emoji-bubble-owning token removes and cleans up the emoji bubble
  • If a tracked emoji bubble is removed manually, code has a mechanism for try-catch, recovery, and cleanup

The emoji library is sparse, and I may play around with some more features of it - but let me know what you think. 

Edited: added more emoji, and now the test character is demanding a long rest: 

December 16 (4 years ago)
keithcurtis
Forum Champion
Marketplace Creator
API Scripter

That's amazingly clever! and cute! 

December 16 (4 years ago)

Edited December 16 (4 years ago)
David M.
Pro
API Scripter

Fun! It might be nice to have a "clear emoji" button in the handout to remove an icon without having to move the token's position. If that capability already exists, apologies. Unsure how to manually delete. Also, not sure what emoji library is available for all browsers (if it is browser-based, I'm not familiar with their implementation), but kinda surprised that a heart emoji isn't available?

Anyway, nice work!

December 16 (4 years ago)

Edited December 16 (4 years ago)
keithcurtis
Forum Champion
Marketplace Creator
API Scripter

Emojis are generally platform-dependent, not browser-dependent. Some sites, like Facebook, can intercept and replace, I think. If you want to see how any given emoji is implemented on a particular platform, the getemoji.com site is great for that. There are nearly 20 different types of heart emojis, even discounting platform variations.

December 16 (4 years ago)

Edited December 16 (4 years ago)
David M.
Pro
API Scripter

Thanks Keith. So if I wanted to add additional emojis, do I need to convert the Codepoint values to hex or something and add to the enumerated list? Using an online Unicode to Hex converter I'm getting something like U+FE0F (Red Heart) = 0x55 0x2b 0x46 0x45 0x30 0x46, which doesn't match the format of what I'm seeing for the existing list.

EDIT - You see: it is clearly critical that pile of poo and middle finger are added to the list, lol

EDIT 2 - OK, so looks like the codepoint is already in hex, and that I just need to replace U+ with 0x for the emojiObj definition. Then, just some trial and error to see what codes actually work on my (and my players') PC. 

Also, I see now that manual deletion is just selecting the text and bubble and pressing delete, derp. 

December 16 (4 years ago)

Edited December 16 (4 years ago)
Pat
Pro
API Scripter


David M. said:

Thanks Keith. So if I wanted to add additional emojis, do I need to convert the Codepoint values to hex or something and add to the enumerated list? Using an online Unicode to Hex converter I'm getting something like U+FE0F (Red Heart) = 0x55 0x2b 0x46 0x45 0x30 0x46, which doesn't match the format of what I'm seeing for the existing list. 

Also, I see now that manual deletion is just selecting the text and bubble and pressing delete, derp. 

I can add something to delete emojis from the control panel; rotating the token works too, or any other change to the token. It replaces one with another if you emoji something else so no worry about overlap.

The references for different emoji I use are at emojipedia, and I use the unicode notation - those are usually given as "U+EF0F" for example (this is the variant selector-16) <more on this later. Translating those for what I've got in the tiny library (tried to keep it to 60 options to avoid overwhelming the user) is taking off the "U+" and replacing it with "0x" (zero-lowercase x) - and in the library I've got I give it a unique text key that doesn't have to relate to the actual emoji at all. For most entries it's like so:

  "demon":0x1F479,
  "dragon":0x1F432,
  "scroll":0x1F4DC,

...where each entry has a single number. 
Some (referencing the variant selector above) use an emoji variant of what already was a zapfdingbat, symbol, or other annotation: 

"alchemy":[0x2697, 0xFE0F],

...so I store those as arrays, use a function to translate each element as an entity, then cram them together for output to create the emoji version. The alembic was already in most available fonts, so the variant selector tells it to instead use the "emoji" (full color, etc.) version instead of the font-specific font-colored version. 

The most complex one of these is the eye-speech-bubble which uses a "connector" entity as well (0x200D): 

"interrogate":[0x1F441,0xFE0F,0x200D,0x1F5E8,0xFE0F],

Edited to add: 

For your reference: https://emojipedia.org/emoji/%F0%9F%92%A9/

1F4A9




December 16 (4 years ago)
Pat
Pro
API Scripter


keithcurtis said:

That's amazingly clever! and cute! 


Thanks! Part of this was for a player in one of my games who is brilliant but very, very shy. This gives a shortcut to a lot of things they may want to emote or express but even the "so and so is typing" causes them to stop. 

It might also be a way to express for nonverbal characters, or for Kenku or other types of character to emote. 

Plus, it's cute, yes :)

December 16 (4 years ago)
keithcurtis
Forum Champion
Marketplace Creator
API Scripter

Hopefully Pat's answer will help, since I've never worked with emojis from a coding standpoint. Thanks, Pat!

December 16 (4 years ago)
Pat
Pro
API Scripter


The Aaron said:

That's really cute!


Thanks! :)

December 16 (4 years ago)
Pat
Pro
API Scripter


keithcurtis said:

Hopefully Pat's answer will help, since I've never worked with emojis from a coding standpoint. Thanks, Pat!

Sure! 


Only reason I know any of this is I researched it for !teleport - I tackled it because I wanted shortcut image buttons that didn't take up a bunch of space and I got hooked on rendering them! 

December 16 (4 years ago)
David M.
Pro
API Scripter

Got it, thanks Pat (and Keith)!

December 16 (4 years ago)
Pat
Pro
API Scripter


David M. said:

Got it, thanks Pat (and Keith)!


Just for you, a clear button and... another few buttons.
I'm going to cap it at 72 emojis for now - too many and you might lose track... and it's an easy enough script to add your own.



December 16 (4 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

Sounds like a nice trick :D

December 16 (4 years ago)
Pat
Pro
API Scripter


ᐰndreas J. said:

Sounds like a nice trick :D


Thanks! I've started a new thread now that it's not much of an "idea" any longer :) 

December 16 (4 years ago)

Edited December 16 (4 years ago)
David M.
Pro
API Scripter

Woohoo! I feel special now! But seriously, I have one player that is text only, so I can see this as being a fun and different way of expression for them. I like the new separators, too. Thanks!

Pat said:

David M. said:

Got it, thanks Pat (and Keith)!

Just for you, a clear button and... another few buttons.

This looks really fun, I'm eager to try it out! :)

December 17 (4 years ago)
Pat
Pro
API Scripter


David M. said:

Woohoo! I feel special now! But seriously, I have one player that is text only, so I can see this as being a fun and different way of expression for them. I like the new separators, too. Thanks!

Pat said:

David M. said:

Got it, thanks Pat (and Keith)!

Just for you, a clear button and... another few buttons.

I hope I got 100% of the features you might want - add, delete, reset...


Persephone said:

This looks really fun, I'm eager to try it out! :)

Please give it a try! The latest Gist is here. And it should be "feature complete..."