Monday, August 17, 2015

New Main menu for Shuffa ball

I decided to update the UI of my original game Shuffa ball. Previously there was 21 levels in one large scroll rect and it often seemed slow on startup.

So the idea is to have a main menu from which we can choose one of the 5 campaigns. It should also have the Settings and About links as well as an Exit button.

So in Inkscape I went about creating the assets to be used.

First off there needs to be a background, one of the filters I use in the design of the game graphics is Bevels->Combined Lighting. So what I do is apply that filter to the background then cut-out the buttons which gives a nice sunken feeling to the buttons.

To do a cut-out, make a shape on top of the background then Path->Difference (Ctrl+-).

 Here is how my main menu looked after all of the cut-outs.

I then hooked up all of the buttons for the level selection, they all call the old main menu, but I set which difficulty level is to be used.

New Main menu in action.

Then in the old a subset of the levels is displayed.

 Easy levels selected

By splitting the menu system into 2 Screens, I believe the menu system is simple on the main menu and is less cluttered on the level selection.