The Antares Alien

Power BI & Game Dev Blog

  • Brent Jones

Animating Pop-up Word Bubbles with Unity

I wanted to add some more 'pizazz' to my game - perhaps it also falls under the 'juice' category of things...


I haven't seen many games that utilize those speech bubbles you see in comic strips. I thought I'd give a shot at implementing it in my game, which has a fun, Dr. Seuss art style to it.



First, I created two variations of just three different words; Boom! Pop! Crack!

Speech Bubbles

I typically draw out each animation frame manually, but since there's the potential to have 100s of words, using Unity's animator works out better in this case.


I could have created the words and the background separately, then combined them in Unity. This is a good option, but I wanted to avoid any size issues when overlaying the text with the background. Creating them together on the sprite sheet gives me more control over this.



Creating the Animation

  1. Create an empty object in the scene.

  2. Create a child object within that object. This will hold the sprite and related animation components. Be sure to zero out the position! (Make the x,y & z positions 0).**

  3. Add a Sprite Renderer component to the child object. Add a reference to any word bubble (sprite).

  4. With the child object selected, create a new Animation.

  5. Add a Scale and Position (transform) property to the Animation.

  6. Click the Record button. Click the Preview button.

  7. Adjust the objects X and Y scale and positions at different points in the animation, based on your preference.

  8. Once finished, click the Record button to finish recording.


At this point, we have a game object that shows a single word bubble with an animation. We don't want this object to linger in the game for more than it needs to be, so I'll add a script to delete it when the animation is finished.


Enable the animation preview and record buttons

Animation: Change scale of child object 1

Animation: Change scale of child object 2


**Why use a child object?

The animation position is based on the objects position when we record the animation. If we instantiate this object without using a child object, it would always appear at position (0,0) in the game world. By using a child object, we can instantiate the parent object anywhere, and the animation would run using the child objects position relative to the parent.


Setting it to a Random Word

Next, I wanted to make this object randomly select a word out of all of the words we have. To do this, I created a script specifically for this game object, which I called "ContextBubble". This will be attached to the parent object.


At a minimum we need:

  1. A reference for an array of sprites, called "sprites".

  2. A reference for the Sprite Renderer, called "spriteRenderer".

public Sprite[] sprites;
public SpriteRenderer spriteRenderer;

In the Start() functon, we will randomly select a sprite from the "sprites" array, and set the Sprite Renderer's sprite to that random sprite. We can use Random.Range() and the Length property of the sprites array object.

int randomInt = (int)Random.Range(0,sprites.Length); 

We need to cast this number as an integer, since the sprites array is indexed by integers. Then we just set Sprite Renderers Sprite equal to the indexed array based on the random integer.

spriteRenderer.sprite = sprites[randomInt];

So now, the full thing looks like this so far:

public Sprite[] sprites;
public SpriteRenderer spriteRenderer;
	
// Start is called before the first frame update
void Start()
{
	int randomInt = (int)Random.Range(0,sprites.Length);
	spriteRenderer.sprite = sprites[randomInt];
}


Adding an Angle to it

Having the bubble pop out vertically each time wasn't exciting enough for me. To add a bit more flavor to it, I decided to add a random angle to it.


Here's the idea...




The animation takes care of moving the child object height. So I just need to deal with setting the angle. I used a public float "randomAngleRange" to set an angle range. Using the same Random.Range() function, I'm getting a random angle from -randomAngleRange to +randomAngleRange.


public Sprite[] sprites;
public SpriteRenderer spriteRenderer;

public float randomAngleRange = 10.0f;

// Start is called before the first frame update
void Start()
{
	// Get random word from array
	int randomInt = (int)Random.Range(0,sprites.Length);
	spriteRenderer.sprite = sprites[randomInt];
	
	// Get random angle
	float randomAngle = Random.Range(-randomAngleRange,
		randomAngleRange);
		
	// Get the quaternion for the game objects' transform
	Quaternion target = Quaternion.Euler(0, 0, randomAngle);
	transform.rotation = target;
}

Cheers!

Check it out and play! https://antaresstudios.itch.io/project-dss


#Unity2D #Animation #Sprites #DrSeuss #Word #Speech #Bubble #Dynamic #Game #Development #C #Sprite #Renderer #Random #Angle

Support my Indie game!
Steam

Itch.Io

Cover Art - Main_Medium_With_Title_Cropp
Cover Art - Main_Large_With_Title.png