Hello again, and welcome to the telling of yet another production week’s work on the concept “Potato Pirates”!
During last week’s production sprint, one of the many artifacts that I worked on was the look of the in-game upgrade store. By completing levels in the game, the player earns in-game currency, which naturally are US-dollar since the game takes place in the United States.
The player can then spend this earned currency in the upgrade store to improve their airplane, for example making it more durable and thus being able to take more hits from enemy planes.
Working in Photoshop, I started out by taking a background that was already in use in another menu, to use as a base to start with when designing this element of the game.
I then went on to make a darker box for the GUI elements to appear in.
I then used the rectangular marquee tool to select an area and filled it with gray using the paint bucket tool. I then applied a white border to it using blending options and then separated that border into another layer. Also using blending options I applied “inner shadow” effects to both the gray area and the border. The shadow effect applied on the rectangle had a “distance” value of zero, so that it gradually got darker towards the edges. The border had a distance value of a few pixels, and the “choke” and “size” values being closer together so that the shadow was less of a smooth gradient and more of a drastic drop off. This gave the border a slight sense of depth.
I then lowered the opacity on the gray area so that it was see-through, but left the opacity of the border at 100%.
I experimented a little while using already existing buttons from other menus, but realized quickly that I couldn’t fit in the necessary amount of information without the design getting cluttered.
The store menu needed to contain both the names of the upgrades, descriptions of them, prizes, a way to show the progression as multiple upgrades stacked and a buy button.
I found all of this hard to combine using already existing GUI elements.
I decided to make a new, more streamlined button from scratch, so that the price information could be placed on it and still be easily readable.
This button has a border similar to the dark background box, but I decided to give the button a little bit of texture so that it would stand out from the background as more of a physical object. The button also isn’t see-through like the box is.
The button has four different display states – one default, one for when the mouse cursor is hovering above it, one for when the button is clicked, and one for when the buy function isn’t available due to the player not having enough money or due to already having bought all versions of the upgrade. I baked these into a sprite sheet using GlueIT.
I also made additional dark boxes to use for the section of each upgrade, to split them up so that the player could easily tell that they are separate from each other.
The upgrade progress is shown through stars that are filled up when the upgrade is unlocked – these was already made by another team member when I started working on the menu.
I exported all static elements of the menu as an image, and our team’s lead coder put together the rest of the elements as a functional menu.
Below you can see how the store appears in-game.
Peo Björn Johansson 
Heya Peo,
first thing first, I am really impressed by how good the texture of your work is. It has a really nice, soft and pretty realistic look to it which suits your game incredibly well. I like how the style is fairly simplistic, which I usually prefer in a menu in order to keep it easily navigated, but still expresses what kind of game it is.
I also think that you have explained your thought and work process really well. It is easy to understand for the most part and you go into actual detail about which programs you have used, your resoning while working and the pace of your progress, all of which is really interesting to read as a fellow graphics student.
The one thing I feel I must complain about is the fact that almost all of your pictures are concentrated at the latter part of your post. I think that it would be a good idea to either use more pictures or space them out a bit more evenly throughout the post in order to make it easier on the eyes and make the post more balanced, but mostly to reach full potential in regards to visual aides. It can be a bit tricky to fully understand your process if you mention an artifact that is not shown or go in depth about one that is shown a long way down.
Anyway, good job as always.
Bea out
LikeLike