The Friday Project - Update 4

Level Select

Determining what "it" is

I have been reading Dreaming In Code by Scott Rosenberg, which I borrowed from a friend at work. During a discussion, I told my friend that I felt that some of the problems with the project might have been solved if the obviously highly talented team had a more constrained, clearer idea of what they were trying to build. In other words, if you want sufficiently talented programmers to build "it" then you've got to let them know what "it" is.

Now, writing this post, I am reminded of that conversation, because the amount of time it took me to make a seemingly simple decision as to how a level select screen should behave was way longer than the time that it took to build it.

A whole 2 hours

Much as it might shock people who know me, there are times when I'd rather do something else than programming. Last Friday was one of those times. My wife also had the day off, so we spent most of the morning trying to find a chocolate shop. I did eventually get in a couple of hours of programming, but it was more a matter of execution, as I'd already done the hard thinking and research up front, and libgdx's scene2d UI did the heavy lifting. And to be honest, the first hour was spent trying to figure out why the code wasn't working until the penny dropped and I updated to the latest libgdx libraries.

But the time spent programming was nothing compared with the head scratching and agonising that it took for me to come up with the simple level select screen that was the outcome of the programming.

Hard thinking and research

But, what was the hard thinking? What could have taxed my brain for so long before I finally reached for the keyboard? Well, it was that old bugbear of many a programmer - the GUI - or, more specifically, the level select screen. Whirling Frenzy may be a simple game, but ultimately it will have lots of unlockable levels, so I wanted to find a way of allowing the player to select levels quickly and easily. I was also determined that the level selection mechanism would not be the cumbersome, awkward mess that it is in some games.

I drew a few examples in a notebook, but nothing beats seeing the real thing, so I whipped out my phone and started playing a few games (purely for research you understand).

Here are some highlights of that "research".

Meganoid 2 - Orange Pixel

The level selection screen in Meganoid 2, by Orange Pixel, shows a zoomed out preview of a level. Beneath this image are arrows that allow you to move between levels.

There's also a label giving the level number and what seem to be stars or awards that the player has achieved. And of course there's a play button so that you can actually get on with the business of playing each level, or if you're me, get on with the business of being killed by the same set of spikes time and time again.

This works quite well for a small number of levels, and I particularly like the preview. However, it does take a while to move from level to level, and I suspect that it would get frustrating if there were hundreds of levels.

I also keep wanting to swipe to move between levels, but only the buttons work. And to be honest, I'm not convinced that swiping would fit with Meganoid 2's tastefully retro look and feel.

Bad Piggies - Rovio

Bad Piggies, by Rovio, takes a different approach. Before you even get to the level select screen, there's a world select screen. Selecting a world from this screen brings you to the level select screen for that world.

The level select screen itself is clearer than the one in Meganoid 2. It shows a tiled and centred grid of level numbers, with stars underneath each number showing how well the player did on that level. Levels that the player cannot yet enter are shown as locked.

The screen is also divided into three pages, as shown by the page indicator at the very bottom of the screen. Swiping left and right scrolls between pages, but the level numbers are always brought to the centre of the screen.

This, in combination with the world select screen, works very well for a large number of levels. It does, however, mean that it is not practical to have the preview feature which Meganoid 2 uses to great effect.

Angry Birds Star Wars - Rovio

For some reason I found myself drawn to Angry Birds Star Wars, again by Rovio. This takes a very similar approach to Bad Piggies, but this time the world select screen is literally a world select screen.

Worlds are selected by swiping left and right, then tapping on the world in the centre of the screen. Doing so takes you to the level select screen for that world. This operates in a very similar manner to the level select screen from Bad Piggies, so there really isn't all that much more that I can say about it. There are 4 pages of screens rather than 3, and the page indicators are rather small for my ancient eyes, but the backgrounds are nicely animated which makes them rather appealing.

I must also admit that last night I spent a good hour "researching" the gameplay on Angry Birds Star Wars. I'm not quite sure how it happened - all I can say is that I was waiting for a virus scan to run and it took rather longer than I expected.

You'd expect Meganoid 2 to be more my type of game, and indeed I would say on paper it is, but it was rather satisfying to fling birds at planets at the end of a long day.

The Whirling Frenzy level select screen

Ultimately all of this hard thinking and research lead up to my decision as to how to implement the level select screen for Whirling Frenzy. I found that I liked the clarity and swipe-scrolling of the Bad Piggies level select screen, and had already drawn something similar on paper. I decided to go with what felt right and do something similar. However, I wanted to reserve some of the screen for options buttons, so I divided the screen into 4 rows, placing the level selector in the top 3 rows and adding some buttons along the bottom.

Here's the result. Yes, it's clearly placeholder graphics (why do you think I use the name Badly Drawn Games?) but I think it shows what I'm going for.

Each level can be selected by pressing one of the buttons. If a level can't be selected then it is greyed out and a padlock is drawn over the top of it. Swiping left or right makes the screen scroll, much like the photo gallery app does on many Android phones.

Swiping to scroll has the advantage of speed, so a future incarnation of this might display thumbnails of each level rather than numbers. However, time isn't on my side here, so I'm going to go with something very similar to what you see here.

Conclusion

What have I learned from all of this? Level select screens are easy to program given sufficiently powerful tools, but they're tricky to get right.

Also, what I did in little more than a couple of hours would have taken all weekend if it hadn't been for the excellent scene2d.ui library in libgdx.