13 - Main Menu

Let's now create a menu to unpause our game so we can actually play it again!

We create a Menu Sprite like we did before, the only new thing here being the t.text Texture Replay provides to draw text to the screen. We can set a different message for different types of devices by checking the device.isTouchScreen field.

In our top-level Game Sprite we can render the Menu Sprite on top of the Level Sprite. But when we're playing the game, we return null to hide it.

Notice how Menu takes a callback prop start. By passing a function as a prop, we can use updateState in the render method to update the Game Sprite's state. updateState is a function which takes the existing state and returns a new state to render on the next frame.

This pattern is how child Sprites can update their parent's state, while still keeping a one-way data flow. In doing so, Game is always in control of how its own state changes.