Extra Ordinary, the Series

One of the projects I plan to undertake is to create a cartoon series using “web stories”, a format for browsing through visual content on the web. It is particularly convenient on a mobile device, with most content vertical. Web stories support  static images and video clips, with single tap to continue on to the next page. (Swiping is often used to flip to the next story.)

This is an experiment as much as anything – a cartoon comic like viewing experience, but with short animations for particular scenes to add dramatic effect.

One of the other aspects to it however is I am planning to use speech bubble for dialogue instead of voice actors. This makes it possible to view an episode in a noisy environment, as well as significantly simplifying production. Animation sequences are much shorter, and there is no requirement for lip-syncing characters.

Using speech also opens up the possibility of translating the comic to other languages as well – just replace the text in the speech bubbles. (I have no plans to do this at present.)

Speech Bubbles

There are multiple designs for speech bubbles. There are round bubbles, square bubbles, cloud bubbles, and explosive bubbles; there are also single lines joining the bubble to the character, a short tail from the bubble, a zig-zag lightning bolt pattern (often for speech from a telephone or speaker). The following are a few examples.

Here are some examples I have used in a previous comic. First a simple comment, shown above the character’s head.

If below the character’s head, the tail has to point upwards instead.

There is also the choice of how long the tail should be – a short line tail pointing towards the characters mouth, or a long line ending at the character’s mouth. There are also long wiggling lines sometimes used for more stylized contents on larger pages.

Narrator comments are often shown differently, such as in a square box.

If a “thought” rather than something said out loud, dots are used instead to connect the bubble (here a cloud is used) to the character.

In addition to the shape of the speech bubble is the font. There are a range of fonts available — I personally use “CCComicCrazy” at 24pts. This font has two special things for text – “{” and “}” display as crow’s feet, and vertical bar “|” displays as the letter “I” with a serif top and bottom. If you look at the text above, you may notice that the letter “I” in words does not have the serifs, but the word “I” by itself (or as in “I’M”) uses the with-serifs version.

There are other fonts I have selected for my series, such as CCBiffBamBoom for special text (like “SIGH!” below) and Copperplate Gothic Light for episode titles and other special text.

This example has a tail that might be used for a voice coming from a speaker. The important thing is to be consistent within the series so the reader clearly picks up on the meaning of the visual difference. (In hindsight, I probably would have used a round bubble for this next since it was not the narrator speaking.)

The following is an example that could be used for explosive (screaming) text, although I would consider making the jagged edge a bit less spikey to have more space for text inside

Unity Support for Speech Bubbles

There are a few items in the asset stores for speech bubbles, but they are not comic quality. As such I explored what support is in Unity for creating speech bubbles that looked like they would appear in a comic. My fallback is to create all the speech bubbles outside Unity and load them as images (Sprites). This allows them to be individually tailored. But as I want to create a number of them, I was curious to see if their creation could be scripted.

Relevant support Unity does (and does not!) have includes:

• You can load true type font (TTF) files into the assets tree and use them.
• Unity does not appear to support filling and wrapping text in non-rectangular areas (such as an oval).
• Unity does not appear to support an API to get text dimensions based on a font, making it hard to determine the width of text. This means writing a script to compute word wrapping to fit in a bubble will not work either (it can be estimated only).
• Unity supports “Rich Text” which allows simple formatting inside a text box (such as bold, italic, changing font color etc).
• Unity supports the concept of a “Canvas” in “Screen Space” which will always appear on the screen. (If the text bubbles were inside the scene in “World Space”, perspective may make different text bubbles look different sizes. This might be an interesting effect, but not what I was after.)
• I could not see a drawing library for drawing filled ovals, with a tail, filled for text to be superimposed over. The discussions I have seen appear to suggest to have an image and scale it as required to the desired size.
• For square text boxes, Unity does support a 9 box for scaling, so the rounded corners of the boxes are not scaled bigger (which would make the corners look different for larger boxes).

Putting it all Together

As I cannot fully automate the generation of speech bubbles inside Unity, I may decide to hand create them in an external tool. But I the following is how I think it is best done using Unity features.

• Create a set of speech bubble images of different styles with the tail in different positions.
• Create a “Canvas” game object in the scene, and set it to “Screen Space” (not “World Space”).
• Under the Canvas object create a game object per speech bubble.
• Under the game object for each speech bubble, create an Image and a Text game object from the UI menu. (If the objects have a “Transform” instead of a “Rect Transform” then you picked the wrong object type – objects must have a Rect Transform under a Canvas to be displayed in the screen space.)
• Load a PNG file with a bubble image into the asset directory and set the Texture Type to “Sprite (2D and UI)” as well as “Alpha is Transparency”.
• Add the sprite to the Image object to be loaded up , which will then be scaled by hand (at least initially) to the appropriate size. (The Sprite can be shared by different Image objects.)
• The text object will have the text entered with manual line breaks inserted, centered text, the correct font, etc.
• I may create a prefab for sprite and text object, and empty parent object, but I also may simply clone an existing speech bubble and modify that.

Once the above is in place, the empty game object Transform can be used to position the text on the screen. The images may need scaling, and the text box dimensions adjusted to fit the text appropriately.

Once set up correctly, deactivate the object so it does not appear in the scene. Instead, create an “Activation Track” in a timeline and use that to make the speech bubbles appear at the correct time. Set the activation track mode to “Revert” so when stop playing the speech bubbles revert to not being displayed.

Conclusions

The lack of power for automating the creation of speech bubbles in Unity was a little disappointing. There are some capabilities (such as the ability to create text objects at run time) that could be useful to automate the creation, but the lack of drawing library means it cannot be fully automated.

There is an additional challenge with respect to web stories and different device display aspect ratios to ensure that text bubbles are never cropped off the edge of the screen, which could render them unreadable. This means I may keep the text bubbles separate to image or video for the characters regardless.

I had hoped to keep the full contents of a scene all in Unity (including the text for speech bubbles) and use a script to generate the web story automatically. We shall see how practical this turns out to be.