The UI Elements

The first thing to notice is that the UI elements (buttons, logos, etc.) do not depend on our pixel-to-world unit mapping. As in Mr. Nom we design them to fit a target resolution — in our case 320x480 pixels. Looking at Figure 9-2 we can determine which UI elements we have.

The first UI elements we create are the buttons we need for the different screens. Figure 9-4 shows all the buttons of our game.

Figure 9-4. Various buttons, each 64x64 pixels in size

I always like to create all graphical assets in a grid with cells having sizes of 32x32 or 64x64 pixels. The buttons in Figure 9-4 are laid out in a grid with each cell having 64x64 pixels. The buttons in the top row are used on the main menu screen to signal whether sound is enabled or not. The arrow at the bottom left is used in a couple of screens to navigate to the next screen. The button in the bottom right is used in the game screen when the game is running to allow the user to pause the game.

You might wonder why there's no arrow pointing to the right. Remember that with our fancy sprite batcher we can easily flip things we draw by specifying negative width and/or height values. We'll use that trick for a couple of graphical assets to save some memory.

Next up are the elements we need on the main menu screen. There we have a logo, the menu entries, and the background. Figure 9-5 shows all those elements.

Figure 9-5. The background image, the main menu entries, and the logo

The background image is used not only on the main menu screen, but on all screens. It is the same size as our target resolution, 320x480 pixels. The main menu entries make up 300x110 pixels. The black background you see in Figure 9-5 is there since white on white wouldn't look all that good. In the actual image, the background is made up of transparent pixels, of course. The logo is 274x142 pixels with some transparent pixels at the corners.

Next up are the help screen images. Instead of compositing each of them with a couple of elements, I was lazy and made them all full-screen images of size 320x480 instead. That will reduce the size of our drawing code a little while not adding at lot to our program's size. You can see all of the help screens in Figure 9-2. The only thing we'll composite these images with is the arrow button.

For the high-scores screen we'll reuse the portion of the main menu entries image that says HIGHSCORES. The actual scores are rendered with a special technique we'll look into later on in this chapter. The rest of that screen is again composed of the background image and a button.

The game screen has a few more textual UI elements, namely the READY? label, the menu entries for the paused state (RESUME and QUIT), and the GAME OVER label. Figure 9-6 shows them in all their glory.

The game screen has a few more textual UI elements, namely the READY? label, the menu entries for the paused state (RESUME and QUIT), and the GAME OVER label. Figure 9-6 shows them in all their glory.

readv?

resume! game quit

0 0

Post a comment