Chat Bubbles View

Facilitates the display of text within bubbles for your game's chat or messaging system.

Watch this video walkthrough if that's more like your jam rather than just reading text.
🎥YouTube: Coming Soon!

FAQ

Q1. What does this thang do?

1. Generates & places the correct type of text bubbles in a ScrollRect.
2. Essentially, the View component of Model-View-Controller(MVC) or similar architecture.

Q2. Ok, but why would I need it?

I mean if you plan on having a chat system in your game or a message box to display the messages just like the one in "Life is Strange", this would probably save you a lot of time (teeny-tiny amount TBF).

Q3. Cool, how do I use it?

ChatBubblesView.cs contains only 2 public methods along with proper comments and summaries.
Can't you just put a bit more effort to go through the script? Just kidding, I got you

• Call AppendMessage(string message, BubbleType bubbleType) to spawn a new bubble.
  message: The text you want to display on the bubble.
  bubbleType: Is it supposed to be a bubble for the sent message or the received message?

• ClearMessages() destroys all the spawned bubbles.

Q4. Can I customise the bubbles?

• Sure you can! Just edit the prefab, SentMessage_Default.prefab.

• The changes are auto-applied to ReceivedMessage_Default.prefab as well since it's a prefab variant of it.
  Of course you can override the properties as per your requirements.

• Gap between the bubbles is determined by the padding of the Horizontal Layout Group & Vertical Layout Group respectively. Check out SentMessage_Default.prefab for better understanding.

• Recommended to use a 9-sliced sprite as Source Image for the Image component.

Q5. Only if I could test my customisation easily?

You can, without even entering the PLAY mode.

1. Select the gameObject with ChatBubblesView script attached.

2. In the Inspector window,

   • RIGHT CLICK on the ChatBubblesView component, or
   • Click the three dots.

   

3. At the bottom of the menu that pops up, you can see 2 options:-

   • Add Test Chats: Auto adds bubbles with random text of varied lengths.
   • Clear Test Chats: Destroys all the currently spawned bubbles.

NOTE: These menu options also work in the PLAY mode.

Q6. Is there a sample I can check out to better understand it's usage?

• Open up the ChatBubblesSample scene & check out the BASIC_SETUP gameObject under Canvas gameObject.
  That's pretty much you need to setup to get the system rolling.

• There's FANCIER_SETUP gameObject as well to give you an idea about what can be achieved.

Q7. What is that InputButtonSwitcher.cs script?

Dayum you got a sharp eye I see

• Have you ever noticed in WhatsApp (atleast in Android), Microphone button is the default button until you start typing & it changes to a Send button?
  This script is exactly for that.

• Switches between Text Send Button and Microphone Button like WhatsApp.

  • Mic Button is the default button displayed when the input field is empty.
  • Switches to Text Send Button when a character is typed in the input field.

Important

InputButtonSwitcher.cs is NOT a requirement for the bubbles to work but a little bonus content XD

Credits

♦ Derived from this repo.

♦ Mic Icon

Mic icons created by Maxim Basinski Premium - Flaticon
Sauce: https://www.flaticon.com/free-icons/mic

♦ Send Icon

Send icons created by Tanah Basah - Flaticon
Sauce: https://www.flaticon.com/free-icons/send