the Realised UI in Unity!

Spent 3 days with C#… Came across and solved loads of problems from a total newbie, during which there were many moments I thought oh this technique was brilliant I should write everything down but, now just don’t know what I should conclude -.-

Just let the GIFs speaks

I changed the logic structure of the selecting panels in order to optimise the calculation and that it’d be better controlled if much more objects were added to the system (as if I would).. so first I had things sorted by type like all models in a folder which as a parent rotates, and all map segments, all titles in a folder.. but I spent the third afternoon renaming everything and resorting them by the objects’ name like all things of the cone in the cone’s folder, and everything in the same type uses the same name/tag (“title”, “model”) in the hierarchy. I saw a set of videos talking about importing database&php into Unity, but well… it would be good but the big thing about my project I guess should be that I can’t go too far with anything so that I could finally balance it as a whole TvT.

Got some useful suggestions and inspirations on 5th and 6th from our tutors Jules and Andrew in the interim presentation, and I’m now moving to the writing (in case I forget anything :P)

Static pics:

The UI Update

Added a shading of Bosch’s drawing The Tree-Man in the background. And some detailed changes. I now feel better about this UI and about to move on. Reminded me of the Age of Empire 2 where this kind of shadings are also used a lot XD

And the UI in the outside scene (when triggering something). I’m happier with this and it can be a transition so that the other scene wouldn’t seem that heavy.

The book in the left bottom corner is the entrance to the other scene (? I’m not sure about how the Unity’s UI system works now). It also came out from one of Bosch’s painting St Jerome. Thanks Bosch XD

The UI Sketches

Decided to stop the modelling to work on the UI system and programming part which will be the framework of the project.

I would describe the UI’s style as medieval,  Bosch-ish, and fit in the overall project style.

1. Medieval

Firstly as I have no experience with game UI design, I looked for how it should look like online. Most of them were too cartoon, while the flat ones seemed too technological or modern for the painting’s age.

Then I thought about some historic RTS games I played like Total War and Europa Universalis. The UI designs are much more delicate in these successful game. I also found a very nice design on Behance (from which the last pic came).

 

2. Bosch-ish

I found a fun app in Apple Store the other day called Bosch Painter, which offers many interesting element cutouts from Bosch’s paintings, as well as canvases for the users to compose their own Bosch styled images. It gave me great inspiration.

The idea in this app is that we can create Bosch-ish pictures using things he drew as they are just so recognisable; and this method is also used somewhere else, like the exceptional exhibition Hieronymus Bosch 500 took place in city of Den Bosch this spring.

What surprised me afterwards was that when I looked for some good elements to use, I found some of his paintings are “born with UI” – with some perfect decorative elements:

the exterior (Saints James the Greater and Bavo) of The Last Judgment

The Extraction of the Stone of Madness (Cutting the Stone)

The Seven Deadly Sins and the Four Last Things

What’s more, an unsolved problem that how I should include the exterior shutter of the painting the Garden of Earthly Delights from the very first when I was still planning to make all the 3 scenes this summer, seemed to have got a way.

 

3. The Overall Project Style

This is the hardest part of all. But first I should actually introduce what I’ll use my UI system for. As I have mentioned a little in my plans before, I’m going to create a collection system for all the messages the player will meet with during the exploration of the scene. So when the player has found one message, it will appear in the collection, while the uncovered ones will still remain a “???” status. This is the main game mechanics of this project. Also, I’d like to add the functions of viewing where the message was from in map (based on the original painting), marking the objects you like and reviewing the spinning models later, and taking photos from the perspective you like.

So the demo came out as below. I don’t have a model’s pic taking from a proper view so I’m using a previews work of mine to imitate at the moment. And I found a gothic font to use on that title scroll like what Bosch wrote on it originally (but in a more recognisable font). I didn’t even use any other resources; all of materials I used were from Bosch’s paintings.

This should be very Bosch-ish. However, I don’t find it fit in the game scene’s style at all. It’s too heavy and not at all flat, but the problem is if I want to use elements from the renaissance paintings, the style can’t be like today’s aesthetics.

Here I changed a bit of it and hopefully it could be better with the flat-shading models later. I quite like those ancient styled things I deleted from the last version though. And I still not really satisfied with this design… apparently the layout is quite unbalanced. But the important thing right now, is to go on with Unity to realise the graphics, which is going to be an extremely tricky thing! Bless me 😛