InsertImagination

Hey Jess here! It's been awhile since I have been able to get a blog together but some recent work I have been doing feels blog worthy!

It has become apparent during development that UI is rather a struggle, we have gone over the UI a few times and I still felt that it wasn’t at its fullest potential to fully express how great the game is. The trouble we were having was that the UI didn't have any consistency, whilst trying to present the game accurately with the main pipe theme obvious in the UI whilst keep the UI interesting and stylised towards the game.

I had an idea to try and fit the themes of the levels with the UI, particularly within the level select screen. The main themes in the game are: Home, Forest, Ice, Fire, and Desert. With the Forest and Home levels already being done I wanted to start with these themes. I tried sketching and drawing out the ideas but struggled with this as I am not a strong 2D Artist (but I am trying).

Therefore I realised what was the best route to go down - make it in 3D!

Here is the different stages that the Forest theme screen took:

At this point I showed my work to the team and got some feedback on what it needed. Pipes of course!

From this point I wanted to add in the most important element - visualising how the level numbers would be displayed and how your score for that level would be reflected. After a bit of researching I found there were common appearances of level select screens for puzzle games, with the likes of Angry Birds, Cut The Rope etc. was having a score based off a 3 star rating. However without stars in the games I went for the most obvious element of the game - the collectable orbs. The final appearance of the level select screen became this.

The whole process took just over a day. The biggest thing from this I realised was how much tweaking is involved in UI! I think at one point I spent about an hour just changing the colours of the To-Tum Level text. So I have to give it to the wonderful artists out there that are GUI and 2D Artists. You’ve got skill.

I took what I knew about 3D and used the power of Maya to give the appearance of 2D by having an orthographic camera in the scene. In the end my setup ended up looking like this:

This is obviously slightly more complicated (and messier) than a Photoshop file, but this for me was the easiest way to get a 3D appearance without actually having to fake it in 2D! (3D/2D Inception). This was a really fun process and I really enjoyed it, and I hope you enjoyed reading about it.