Don't Take the Cakes! Game Development Process #2 - Buttons

Today I'll be sharing with you an update to the user interface in my GDevelop game, Don't Take the Cakes.  

I mentioned before that the version of the game I created for the jam was not mobile-friendly, and it did not look good and polished.  One of the first areas I have been working on to address both these issues is the buttons in the game.

Initially, there were no onscreen buttons at all.  The game only responded to key presses and mouse clicks and movements. When I started the update, I decided that I would add buttons so that players don't need a mouse or keyboard.  I found some button asset packs for my game in the GDevelop marketplace (a great resource for finding art and sound for your game).

Now let me first admit that user interface and polish is one of my least favorite areas to work on. It's just never been my strong point, maybe because it's too subjective. What I think looks good or at least ok might not work for other people. I prefer to work on functionality, where a feature has a concrete specification that determines whether the feature works or not, "yes or no." For example, I'm more inclined to worry about whether the button works and returns the intended result, rather than does it look good. That's one of the things that I struggle with in front-end web development, but in those jobs, I usually have a client or a UI expert or someone to tell me what they want, and often even design all the components and layout specifications.

So I'm explaining my process as someone who is by no means an expert, doing this project solo, though if a game I'm working on gets good feedback, I will usually decide to buy assets or hire a designer later. I'm sure a UI expert or even maybe some players will have a lot of criticism about my work on this, but I'm definitely open to feedback on color choices, layout and design, and anything else.

The main problem was that none of the buttons I found really fit in with the look or color scheme of my game, as you can see in some of the game clips here. It really looks like I cobbled together a bunch of random art pieces from different sources, which is exactly what I did with the buttons.

I'm trying to be conscious of color palettes and combinations in the game's look. The background from Game Art Guppy is like a teal, greenish color, so I thought that my message backgrounds and buttons should fit in with that. Again, I'm no expert in this, so I did some quick research on sites like Figma and Coolors.co. I figured that different shades of green/blue (what Figma calls "Seawater Aquarium") with a white/cream colored text would work well. But honestly, the game also has some brown and tan against that teal, so maybe I can throw some of that in there somewhere, too.

I also went back to Game Art Guppy and downloaded their Simple Aqua UI asset kit. Since I got the rest of the artwork from that site, I thought it would help make the game look more cohesive if I used the same artist and style.

Now, buttons usually have different states, mainly the following:

- Default: Button is not selected, the mouse or finger is not touching it, but it is active and enabled

- Hover: The finger or mouse cursor is hovering over the button

- Pressed: The user is pressing the button

If you look in apps or programs you use, you'll probably see that buttons respond and look different depending on the state.
Gdevelop actually lets you create buttons with these states. I was using some of the pre-made buttons, but I swapped out the button images from GDevelop with the Game Art Guppy button.  

The new button asset only had one button image, which I used for the default state.  I used Paint.net to quickly make some images for the other two states.  I basically just modified the brightness for the two additional states.  The hover state was a bit brighter, like highlighted, and the pressed state was darker.

I also wanted the buttons to stand out more from the background, so In GDevelop, I added some visual effects.  I beveled the button edges a bit, to make the button look more raised up.  I also added an outline to the button, to make it stand out even more. I paired the button with a cream-colored text to fit the color palette.

And now you can see the result in the title page's start button.  It's not perfect, but it's better than before, and I expect to refine it based on feedback and additional research.  I will be updating the buttons throughout the game.