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!
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
Create an empty object in the scene.
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).**
Add a Sprite Renderer component to the child object. Add a reference to any word bubble (sprite).
With the child object selected, create a new Animation.
Add a Scale and Position (transform) property to the Animation.
Click the Record button. Click the Preview button.
Adjust the objects X and Y scale and positions at different points in the animation, based on your preference.
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.
**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:
A reference for an array of sprites, called "sprites".
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
