Sprint One – Tile Alterations and UI Design

The most important part of this semester is to recognise that most of our work will need to be changed or even thrown out at some points and therefore to not get attached to our work. In this case we decided that the tiles that had been designed aren’t readable when the player was in motion and therefore we’re actively iterating on the design as a team until I produce something we can use is final. The project will not be a case of ticking things off a list but as a dynamic process where anything can change at any time.

Glow Border Quarter Coloured to Print

Simpler designs are the aim or using the new found freedom in Aaron’s specifications for the SoundEscape world. It doesn’t take place in any specific moment in time and is defined as being ‘Otherworldly’ and this gives more scope to design tiles with.

Additionally I have begun iteration and design on the UI elements that’ll be in our game which can be seen in more detail in my sketchbook. I have also researched from various resources on the internet on Good UI design to help me with my concepts. One of which I can provide here. http://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-the-bad–gamedev-3943

Finally I have also elected to download the free software ColorOracle that simulates Colour Blindness to ensure we don’t make our game unplayable for anyone suffering from it. It is something I hadn’t previously considered but colour blindness occurs far more frequently than people realise and only since I’ve began to research UI design has this popped up.

In the latter half of this sprint I have elected to begin iteration on the Charge bar element of the UI. This is important as the charge determines both Eddie’s Health and whether or not he can attack or not.

I began by drawing out some very basic silhouettes in 64×32 grids as we know the UI space I have been allocated for the Charge bar is rectangular. It was fun to iterate on the body shapes for the guitars and after convening with my team it was decided I would further develop the Black Flying V shape.

I then gradually scaled the image up whilst fixing the pixels as I went to ensure the silhouette remained the same and was representative of the design I wanted to achieve. The most difficult part of this process was handling scaling issues and ensuring that the iconic shape of the Black Flying V guitar was suitably transferred to my design.

This shows the design process from the 512×256 Silhouette til the final pre-detailed Charge bar. This will be used as a placeholder until we have iterated on the animation and style of the rest of the charge bar. This GIF shows the current charge bar in action.

Black-Flying-V-512x256-Final-Placeholder-AnimPlaceholder Charge Bar SpriteSheet

Once this has been implemented I’ll show a couple of screenshots and videos of it in action. However in the meantime I’ve been developing some iterations of the Charge bar and how it’ll look or animate. I meet with my team on Monday to discuss further iterations and I’ve also done a mock up of the Inspiration Meter.


These are the Hands which will either be accompanied by a bar between or transition between one to the other to signify that a super ability can be used. It was really interesting to be able to represent the hand shapes using pixels and I enjoyed the challenge. However there is still lots of iteration to be done to get these up to standard.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s