OverlayText

Create and add some text at the end of a level

• Creates text objects
• Directly appends the text objects to OverlayText.content_ar

Add 'hit to start' text

Create and add some text at the beginning of a level

• Creates text objects
• Directly appends the text objects to OverlayText.content_ar

Render invisible any 'hit to start' or 'hit to replay' text

Usually when 'hit to start' or 'hit to replay' is shown, we want to remove it after the user interacts, but without disturbing the layout of the rest of the text. So here we find/replace the text if it exists in the current overlay content.

Draw 'overlay text', which is text in the middle of the screen eg during level intros, game over etc

Canvas context swap

We want to be able to animate a fade on the overlay. It contains several overlapping items, drawn by multiple modules. Each item gets drawn with its own faded alpha, leading to ugly buildups in summed-up opacity where items overlap.

To work around this, the overlay is drawn to a separate canvas, then that entire canvas is drawn to the main canvas in a single operation.

This is done by calling Display.swapContext({ contextToSwapTo: OverlayText.canvasCtx }). While this is in effect, every canvas operation from all modules will take place in the passed context.

Afterwards, the context is put back to normal with Display.swapContext({ backToDefault: true }).

Level intros

These are a special case where we also need to draw examples of obstacles which appear in this level. This complicates things as we want the content to be centred. OverlayText.padWithSpacesToFitObstacleGroups() handles that.

The sequence of operations here may be confusing:

0. Draw the overlay text with {measureOnly: true} --- which returns metrics about where the text is without drawing anything positioned
1. Draw the obstacles (which requires info about position of the text as above) --- which gets us the info about the width of the group of obstacles (this differs depending on how many different types of obstacle this level has)
2. Draw the text for real into the separate canvas context
3. Finally copy the separate canvas into the main canvas

Based on the current level data, create an array of objects describing the text

As per Text.draw(), each text object can have the following properties:

• text - The plain text string
• color - The colour of the text
• flashing - Set to true to make the text flash

Create the canvas used to draw the overlay text

As the overlay text area has many overlapping objects, doing alpha fades on it produces ugly artifacts. So we use a separate canvas to compose the overlay, then draw it to the main canvas later.

Pad a couple of strings with spaces to offset them and accommodate the obstacle groups

The text needs to be offset based on the width of the obstacle group, so we call IntroObstacles.getGroupWidth() first.

We never directly position text, Text.draw() instead uses values such as 'top', and 'center' in its alignV and alignH parameters, and calculates the position based on the width/height of the rendered text.

So to offset text (move it to the left to accomodate the obstacles) we add spaces to the end of the string, meaning Text.draw() will see a wider string and adjust the position accordingly.

Empty the main text array (OverlayText.content_ar)

Create the 'game over' text

Directly overwrites the OverlayText.content_ar with new text objects.

Work out where some special lines of text are

In the level intros, groups of 'avoid' and 'collect' obstacles are shown next to specific lines of text ('avoid' and 'eat').

The line numbers of those important labels can change depending on what other text is displayed.

In this function the lines are detected and stored in variables for other classes to use.

Wipe and resize the overlay canvas, ready to re-draw the overlay