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?
Labels:

Comments

Post a Comment

Popular posts from this blog

Upstairs / Downstairs.

I've decided to make my prefabs multilevel. Later this should allow me to add pit traps and other great stuff. It also makes it easier to line up stairs so that you can exit them on the same co-ordinates where you entered them. The prefab editor is pretty much finished, it just needs some code for loading up prefabs from a saved dictionary, so that they can be checked or edited. The entries will need to be forwards compatible, so I'll be loading each tile and then translating the indexes to a new array, that way if I add extra indexes or extra info (like traps or puzzles) I'll be able to update existing prefabs to work with the new standard. Click for a video.
6 comments
Read more

Automating Level imports from Blender to Godot

  Recently I've been making some levels in Blender an importing them into Godot. There are only about 7 or 8 shaders for each level, not counting dynamic objects which will be added later. But to improve rendering performance, it can be a good idea to split the meshes up into sections. At that point you might be faced with a list like this: Or it might be even more chaotic, if you didn't use simple names for the objects in your level. So it can take a long time to sort out all the meshes, make them unique and add textures and so on. Blender imports with simple Blender textures, or with placeholder materials. This is sometimes OK, but if your Godot shaders are very different to those used by Blender, it means applying new materials to every mesh object in the level when you import the scene. I found that during the design process, I was importing and readying a level several times before I was happy with the final layout. So at first I was wasting a lot of time. In Blender, I us
3 comments
Read more

Advice needed on tilesets...

I need some advice on which is the best way to handle building the dungeon. Right now I'm using prefabs for my dungeon, they have a north south east and west section for each "room": The basic tileset. This has several advantages, and also several disadvantages. Firstly I can have curved rooms, I can have tunnels and other interesting shapes. The tilesets can look quite nice with a little work. On the other hand I can't easily get the navigation data before building the map and once the map has been built I can't make changes to the layout, like having active pit traps or believable secret doors. Although the rooms are interesting, they are quite repetitive, and it takes a lot of effort to make even a few different variations. Also rooms are constrained to one size. A newer version of the tileset with a lot of variant parts for making more interesting rooms. To create a tile set is a real headache too. Planning how to lay out the UVs, trying to cra
7 comments
Read more