Spring Submission - Refining and Implementing (diamonds in the rough)

To continue from my concepts, I took to Photoshop to refine and further experiment with UI and menu idea's, this time with something that would be usable in the game.

First since there was the gear theme that we were running with, i thought the most appropriate thing would be to make gears digitally, so that then i could re purpose them for some initial designs. The principle was just to get a variety of pins to choose from so that we could vary these up in the designs.

These gears led to these initial quick designs, which were not too popular with the group, (and not just for the colouring, that was mainly for identification of elements) but the use of gears wasn't desired and they wanted me to refine the gear shape (some of which i was producing concept art for) so it was back to the drawing board.

New and refined gear, only one though because it also incorporates the cross theme into the design, but overall looks alot more solid than the previous design. in case i hadn't mentioned it to help reduce poor linework or geometry I've been making the gears using preset shapes, and mashing them together for designs.

Time out;

 At about this time i was researching into how to set up a UI ( which will be below and covered in another post) and quickly drafted up this dummy test design for quick implementation and clean transitioning to spot problems when trying to implement the UI into the Unity engine.

Time in;

The refined set of designs came out like this, some more complex designs, with the gears being more intertwined within the elements of the UI rather than the main feature, i also opted to switch to colours fitting to our theme and ship like blue tones and chromatic black.

Getting feedback from this we opted to go for the 4th design, it having a good balance of colours, gear theme and space theming.

Implementation

As for the Implementation this was an interesting experience as i made the UI before we recieved the formal lesson on how to do it, so i had to figure things out on my own (and by own i mean with the power of the internet) but regardless self teaching is somewhat interesting. 

First of all Unity received a huge update in 4.6 which enabled for UI elements to be much more easily made and implemented into the game, something which made me realise i had not updated the engine in a Long time.

Regardless the UI gets created by creating a canvas which acts as a UI space (or one of them) which objects can be attached and these exist in a view in front of the game content, making things alot easier to do.

The are a small number of settings that also needs to be adjusted to make sure that the UI has a better 'quality of life' in that it has less small issues, making the canvas pixel perfect in it's options helps to make sure it can keep a consistent size when the format size is changed.

To put the UI in i first imported it as an asset into the Unity engine, then converted its type from a texture to a 2D sprite, because it's only going to be displayed from a 2D perspective. then i had to edit it slightly in sprite editor. and then it was just a simple matter of attaching the sprite to a panel i created and placing that on screen.

(it was also really annoying for a while to get rid of the white background on the image, which turned out that we needed to save it as a PNG file format and import)

The text used to display the score is added as a text element but doesn't need to be visible since its value will be handled by the code. Speaking of which the coding will be handled in the next post.