The first thing we will need to do when implementing our UI is to decide on some requirements. What exactly do we need for our user interface? The first part of that is deciding what game screens we need for our game. This is usually the kind of thing you do early in the game design process, but because I am writing a book about WebAssembly, I have saved this step for a later chapter. Deciding what screens your game needs usually involves a storyboard and a process by which you either talk through (if more than one person is working on the game) or think through the way a user will interact with your web page, as well as the game that is on that page:
You don't have to draw a storyboard, but I find it useful when thinking through what I need for a game's UI. It is even more useful when you need to relay that information to another team member or an artist. When thinking through what we need in this game for the preceding storyboard, I came up with the following list of requirements:
- Opening screen
- Instructions
- Play button
- Game play screen
- Score text
- Game over screen
- You win message
- You lose message
- Play again button