Skip to main content

UI buttons.

UI design, and 2d artwork in general is one of my weaknesses.
I'm trying to improve my work in this area and one thing I've been told is that it looks better to have cleaner textures, not so much grunge as I've been adding. Also thinner borders with more room for the icons.

Here's a mock-up of the buttons I've been working on:


The top ones are deactivated or not clicked, the bottom ones are when something is selected or clicked.

I think they look pretty good, even when small on screen.

Let's compare them to some other games:


One game UI I like the look of is "Order of battle". The icons look clean, the faded paper texture is nice. It's similar to the UI adopted for the Blitzkrieg spin off, Stalingrad:

I like this three tone effect. it doesn't detract too much from the main game action and it's pretty easy to tell one icon from another even if it's not easy to tell what they mean.

The blitzkrieg 3 UI goes back to the metal and color theme of the past, though I don't like the sci-fi look of the paneling. It's supposed to be a WWII game. Also the UI takes up quite a lot of screen space in order to be readable. Similar to "Company of Heroes" with its big buttons.



The UI looks too colorful to me, too chaotic and difficult to tell what's going on (though you can probably at least make a guess as to what each button does). It's almost as ugly as the UI from Blitzkrieg 2:


That's hideous! Every time I look at Blitzkrieg 2 I find a way in which it was inferior to the original.

The UI for the original Blitzkrieg was much better:

 
That's where I'm going with mine currently. I've still not given up on the smoother, faded paper appearance favored by Order of battle and Stalingrad, but I have to admit I'm a sucker for that rusted stamped metal look.

I like the simple icons, although they aren't easy to guess, I prefer to have mouse over tool tips so you can find out the meaning and then just remember which button does what. With Blitzkrieg I usually use keyboard shortcuts more often than the buttons in any case.

Another thing I'm thinking about right now is the position of the UI. Older games placed the UI at the side of the screen:


This gives you a play areas which has a similar amount of space both horizontally and vertically. More modern games usually put the UI along the bottom of the screen.


What a waste of space. Nearly a quarter of the screen space taken up by a UI that is mostly empty anyway.

With wide screen monitors more common these days I think the first one is maybe better. It doesn't force you to scroll up and down so much to see things that don't fit on screen.

What do you think?

Comments

Popular posts from this blog

Make your game models POP with fake rim lighting.

I was watching one of my son's cartoons today and I noticed they models were using serious amounts of simulated rim lighting. Even though it wasn't a dark scene where you'd usually see such an effect, the result was actually quite effective.



The white edge highlighting and ambient occluded creases give a kind of high contrast that is similar to, but different from traditional comic book ink work.


I'll be honest, I don't know if there's a specific term for this effect in 3d design, since my major at university was in traditional art. I learned it as part of photography.


You can find plenty of tutorials on "what is rim lighting" for photography. It basically means putting your main sources of light behind your subject so that they are lit around the edges. It can produce very arresting photographs, either with an obvious effect when used on a dark subject...


..,or as part of a fully lit scene to add some subtle highlights. See how alive the subject look…

How to... build a strong art concept.

So you want to make some art assets for your game. The first on the list is a Steampunk Revolver for your main character to shoot up Cthulhu with. Quickly opening your internet browser you start with a Google image search. Ah, there is is!

It might be a good idea to find a few influences so you don't accidentally end up copying a famous design.


Just mash them up and you're ready to go! Off to your favorite modeling program.
But wait! isn't there more to building a strong design concept than that?

Of course there is.
One of the diseases of modern design is that of recursion. Everything is a copy of a copy of a copy. This is especially a problem with "historical" concepts. Over the course of that recursive process the concept becomes infected with modern design elements, and ends up looking very similar to everything else that anyone else has ever made.
If you want to come up with a really fresh idea, you have to get beyond secondary references and go look at real …

Skynet

Ok, so it's not exactly skynet, but I have got my first AI state working, kind of.


The first state is "HOLD" in which case the agent stays in place where they are and shoots at any unit that comes in range. When I started writing this module, I found that the existing method of triggering actions wasn't good enough to allow the AI to choose the best weapon or target. It worked by simply sending a command to the unit to trigger the currently selected action.

If the action is valid, it triggered, if not it didn't.
That's fine for play controlled units, as that's all they need to do. But AI needs to know in advance if the action is valid. The player can get that info from UI feedback, but that wasn't available to the AI player.

There were three problems:

1. The UI feedback duplicated code in the action trigger function. These  two sets of code could get out of phase so that UI feedback was wrong.

2. The action trigger didn't give enough feedback for …