The main gist of this week’s update is that I finished exercise 8 (create a title screen) and managed not to get bogged down in too much engine work (in fact, none at all) despite the fact that I could have very easily done that. I also fought a little with Mono and MonoDevelop (and gave up on the latter), but that’s work related and not really game development related.

So, lets talk about the stuff that is.

The original thrust of exercise 8 was (paraphrase):

Give the game a title screen including a background image (use an image editor or programmatically create one). A mouse click should start the game. Include a clear message indicating the player must click to begin, and return to this message when the player runs out of lives. Display on the title the player’s score from the finished round.

I touched on this a little bit last week, but we’ll go over everything done now. I decided that this should actually be two screens; a title screen and a game over screen. This provides a little bit more logical separation and seems a bit more polished.

For the background image, I’m currently using the same image as what is used in the game scene itself, so the background is uniform. This takes away some of the polish but I’m by no means an artist and I would rather spend time working on the code aspect and not the graphical polish at the moment.

Also, instead of showing the last score (or nothing if there is no last score) the title screen instead displays the high score (or nothing is there isn’t one). The high score is persisted in local storage in the browser if it’s supported, which is a nice little touch that was easy to add.

The game over screen is implemented as a simple scene which lets the game scene do the main rendering, and then displays some colorized “game over” text and a message to press a key to continue, which will take the game back to the title screen again for another run through.

This provides the spirit of what exercise 8 asked for (display the last score) in a bit of a more polished way (to my eyes) by also allowing you to see your final progress on the level. I went with a key press to continue here as opposed to a mouse click like the title screen, to ensure that a casual click after the game (say you forgot you didn’t have another life) won’t end the scene prematurely.

Visually the title screen remains as it was last week, but under the hood a little refactoring was done. Since the title screen displays some blinking text to “click to play” and the game over screen is displaying blinking “press a key to continue” text as well as blinking “Game Over” text I went ahead and refactored that particular code out of the title screen and into an entity.

The entity stores text and a font and also allows you to alter the colors used and the timing of switching between then via properties on the object itself. This means that the text on all screens shares a common code base, which satisfies my sensibilities regarding having too much duplicated code. For the game over text, a larger font is used, with a faster blink interval, and the colors cycle through the primary colors of the bricks in the game.

This is the point at which I could have headed off into engine land, but decided not to for the time being. For one thing, it’s a bit of a hack the way I’m rendering gradients because my drawTxt method takes a color parameter but that’s not what you use to render with a gradient. So when this is needed, the gradient is set into the context manually and the method is invoked with a variable set to undefined so that the method does nothing with it.

Also I would like to (eventually) modify that method to allow for stroking the text as well (assuming that is possible, but I assume so) to give it a little more edge contrast. For the time being, I’ve left this as is so that I can continue forth without getting bogged down in minutiae.

The next exercise is to include ball speed increases based on some factor. There are a variety to choose from, so a little experimentation will be needed to see which is the one I like the best.