Implements customisable animated speech / emotion / interaction bubbles, which animate above a GO.

They are triggered when a player is close, and hide when they move away - such they can be used to indicate that a NPC can be spoken to, an item can be interacted with / picked up, or even to show an emotion during conversation.

Possible solution to:

I'm willing to update the script down the road with easier to use API for dialogue / emotion displaying / intractable states, when those systems desire it.

State machine (Animator)

The feature is managed with a single state machine, which looks like this:

Capture d’écran 2021-02-21 à 5 27 17 PM

Statemachine parameters

The BubbleController Animator has two parameters.

Capture d’écran 2021-02-21 à 5 29 15 PM

State

State represents which animation will played when the bubble is opened.

Currently, there is 6 valid states for the bubble. Capture d’écran 2021-02-21 à 5 23 36 PM They're indexed in the order seen above,

Speech,
Exclamation ...

Inavlid State

Any state out of range of these states puts the bubble into an 'InvalidState'

State <= 0
State > maxState (6)

Capture d’écran 2021-02-21 à 5 25 22 PM

Which looks like this:

Capture d’écran 2021-02-21 à 5 25 50 PM

Thus the above animation is an error type of state that is not typically seen, but an indication that a bubble has an invalid state.

Player Close

A script, BubbleController determines if a player is close to the bubble, and set this bit accordingly.

When set, the statemachine will transistion from hidden to open, which will animate the opening of the bubble. Once that animation is complete, it will transition into the appropriate state, according to state.

It will remain in this state until either state is changed, or PlayerClose is lowered.

Creating a new state

This controller is expandable, to accommodate new animations / states. Creating a new state would require

Setting up a multi transition from the new state to close, as well as a single transition from open to the state. a. Open condition i. State == index

b. Close Conditions i. State != index ii. PlayerClose == False
Adding new states also required updating the range of valid indexes found on the transition to invalidState, otherwise your fancy new state will be treated as invalid.
Ensuring the transition exit is nullified, otherwise the animation plays when the next state's animation should be. Getting this wrong causes noticeably visible discrepancies when switching between states. (Which you can actually see on the top two videos. I'll fix those.)

Note that the screenshots above are all wrong, since thier endpoints are > 100%, causing a second animation loop to appear in the timeline. There should only be one loop of each animation.

Correct

Capture d’écran 2021-02-24 à 5 19 00 PM

https://user-images.githubusercontent.com/50697488/109039299-88757a00-76c4-11eb-82fb-efc87c6c68ff.mov

Wrong

Capture d’écran 2021-02-21 à 5 42 51 PM

Animations

The animations themselves are created from a spritesheet found on itch.io, under creative commons. We can use them, but i'm sure the art team would love to create thier own replacements.

There's an animation for each possible state, open, close, hidden, and invalid state. They're all in Assets/Sprites/UI/Bubbles, and are being played at 0.25 speed in the statemachine.

Disabling

The bubbles can be closed by disabling the BubbleController script. It will handle the statemachine, closing the bubble gracefully, and returning it to the Hidden state. This can be done in code via MonoBehaviour's Disable, or in the editor.

https://user-images.githubusercontent.com/50697488/109039856-2b2df880-76c5-11eb-859c-866508c2b233.mov

Demo

There's a demo script (Shown running below) which will show every state as a demo. It must be placed on both open and close states, and it's MaxStates should match the number of states.

The all states scripted demo looks like this:

https://user-images.githubusercontent.com/50697488/108633624-1bb47280-746d-11eb-9e2a-3d90eadd6d1b.mov

Manually manipulating the statemachine to better show what the states would look like in typical use.

https://user-images.githubusercontent.com/50697488/108633648-3c7cc800-746d-11eb-87f3-5baca8242b8b.mov

Prefab

With the Bubble Prefab, usage should be a simple as placing the prefab as a child of an object, and selecting the correct animation index.

I've added it to the Entity prefab so that it's already implemented when creating a new entity, and we can do this again for other interactable prefabs.

WheelyCatStudios / torte

Animated Speech / Interaction bubbles #54

50

51