GUI icons

[dd]

I've been attempting to improve the GUI icons a bit. I started with the tab icons:

newgui_tabs.png (4.86 KiB) Viewed 17111 times

newgui_tab_x.png (71.02 KiB) Viewed 17111 times

Feedback would be welcome.

[XuaXua]

Sword is too dark, or it's not highlighted?

[dd]

It's not highlighted in the example. The memorization tab is semi-highlighted, as happens when you mouseover it. The upper tabs are all highlighted.

[galehar]

Nice. While you're at it, be aware that the command panel will probably be soon split in 2. One for common commands, the other for rarer, more meta-game ones.
We also need an ability panel, so an icon for it would be nice (and of course, for all the abilities).

[dd]

Nice. While you're at it, be aware that the command panel will probably be soon split in 2. One for common commands, the other for rarer, more meta-game ones.
We also need an ability panel, so an icon for it would be nice (and of course, for all the abilities).

Can I get a list of all possible abilities? Should they be similar to spell icons?

[galehar]

Nice. While you're at it, be aware that the command panel will probably be soon split in 2. One for common commands, the other for rarer, more meta-game ones.
We also need an ability panel, so an icon for it would be nice (and of course, for all the abilities).

Can I get a list of all possible abilities? Should they be similar to spell icons?

There. Yes, I think they should be similar to spell icons. And thanks!

[dd]

Np. I'll get working on those ability icons shortly. Meanwhile, here's some more GUI icons:

newguiiconsx.png (8.17 KiB) Viewed 17062 times

These are: (un)identified items, rest 100 turns, rest 1 turn, autoexplore, travel, autofight, pray, find, message log, character status


All tab icons:

newgui_tabs.png (5.7 KiB) Viewed 17056 times

Left to right: tab backgrounds (first three), inventory, memorization, skills, spells, monsters, commands 1, commands 2, abilities

Feedback welcome, as always

[TehDruid]

Beautiful icons, dd. I'm kinda thinking, though, couldn't the rest icon being represented by a sleeping person be misleading to newbies? One could probably think their character would go to sleep and face penalties if they were to be ambushed while sleeping. Also, resting for 1 turn in a sleeping bag/blanket is meh. Perhaps showing a person sitting down would be more appropriate?

This is really minor, I myself don't use any of these icons even though I only play tiles. Keep up the good work, nevertheless!

[dd]

Beautiful icons, dd. I'm kinda thinking, though, couldn't the rest icon being represented by a sleeping person be misleading to newbies? One could probably think their character would go to sleep and face penalties if they were to be ambushed while sleeping. Also, resting for 1 turn in a sleeping bag/blanket is meh. Perhaps showing a person sitting down would be more appropriate?

This is really minor, I myself don't use any of these icons even though I only play tiles. Keep up the good work, nevertheless!

Well I'm not sure if it's an issue, there's a text that shows up when you hover over the icons that lets you know what the icons do...

Anyway I can do alternate versions of them.

[dd]

I made a new tile for the gui / inventory icon backgrounds...

newguitile.png (791 Bytes) Viewed 17023 times

newguitilex.png (1.39 KiB) Viewed 17023 times

newguitilex2.png (4.88 KiB) Viewed 17023 times

[mageykun]

Hmm. No offense, but I don't much care for the inventory background. The rivets at the line intersections make it look too busy. And the line color / thickness pop too much. It also loses the subtle effect of the boxes being recessed the current set has going for it.

The other GUI icons look great, though I have to confess, I never click them either. The only thing I ever use the mouse for is inventory, and mouse-over text.

[dd]

I'll increase the beveling effect for it.

[dd]

Ok, I made adjustments to the icon background, to get the beveled effect more pronounced. I also remade the tab backgrounds to make them fit the style.

[dd]

Ok, here's the ability icons I've made so far. All that's left to do are the god invocations.

abilx1.png (22.83 KiB) Viewed 16999 times

abilx1a.png (26.49 KiB) Viewed 16999 times

[XuaXua]

Why is there a wand on top of half of the the blink icon?

[galehar]

Why is there a wand on top of half of the the blink icon?

There is the blink ability (from the mutation) and the evoke blink ability (from artefact property).

[dd]

Here's the rest of the new GUI icons.

[galehar]

Thanks, they are really nice. It's true that they are not used by most players, but they are very important for the android port.
Also, I agree with mageykun, the wait 1 turn icon should be different than the rest 100 turns. Maybe someone standing in a «ready» stance with a 1 in the corner. Standing still is not easy to draw of course.

[dd]

Well I just replaced it with a hourglass.

[white_noise]

I am the one who uses this menu alot. Basically because I don't remember shortcut keys. And I think that 'character's status' and 'character's overview' should be merged. As well as 'dungeon overmap' and 'traveling to distant levels'. Old 'autoexplore', 'hit closest monster' and 'religious status' seems to me little better, than new ones. And new exit is a bit blurry (compared to other icons). Also question marks can become too annoying with time (they are too big and there are too many of them). Actually I don't see any point in having them.

[XuaXua]

Why is there a wand on top of half of the the blink icon?

There is the blink ability (from the mutation) and the evoke blink ability (from artefact property).

There's the levitate ability and the evoke levitation ability too then, right?

[galehar]

Also question marks can become too annoying with time (they are too big and there are too many of them). Actually I don't see any point in having them.

Good point. I guess they all open a menu or something, but we can just group them. Or color coded backgrounds for types of commands?
And what about the eyes? Also the new wait is overloaded. It has the hourglass, the eye, the Z and the 1. How about just a big hourglass?
I think it's better to have a single big icon per button than to try to explain too much. The important thing is that they are easy to recognise, players will learn quickly what they do.

[galehar]

There's the levitate ability and the evoke levitation ability too then, right?

There is no levitate mutation, is there? Also, you can just look it up, I posted a link to the list of abilities a few posts above.

[dd]

I think that ... should be merged.

This can't be done since the icons correspond to commands, and merging them would require removing commands from the game.

Or color coded backgrounds for types of commands?

Seems a bit too cryptic - one of the reasons for redoing these was to make the icons more consistent and easier to understand. I think an interface should have a consistent "language" of symbols where you can predict what a button does by its icon, thus making it intuitive to use.

we can just group them.

Do you mean creating another tab for all menu commands? Or just grouping them so they sit next to each other...

How about just a big hourglass?

That could work.

[galehar]

we can just group them.

Do you mean creating another tab for all menu commands? Or just grouping them so they sit next to each other...

The latter.

[dd]

So, here's the update. This time with a fancy mock-up. Also my suggestion for the grouping of icons.

newgui_x.png (25.5 KiB) Viewed 16909 times

I left the question mark on the id:d items icon, as it makes sense there - it now simply signifies the un-id:d items. Also, for similar reasons I left the eye on the find items icon.

I also edited a few other icons. I made the skill screen different than use ability, since the function of the commands is so different it made no sense to have the icons so similar. I changed religion status and mut status into large, single icons. Oh, and I sharpened the savequit icon.

[galehar]

This is getting better. I wouldn't arrange them exactly like that, but we'll see about that later. Also, can you tell what are the ones on the second line? I'm not sure for some of them.
There has been a few additional commands in the android port too (which should be merged someday): inventory and butcher commands. Drop could be nice too.

[dd]

Top row, left to right: wait 1, wait 100, autoexplore, travel, autofight, pray, use ability, savequit
Bottom row, left to right: id:d/unknown items, find stash, message log, @, character stats, dump stats, branch map, religion stats, mutation stats, skill screen, player doll, help

inventory and butcher commands. Drop could be nice too.

I can do these.

[dd]

Ok, I added (last 4, top row) inventory, butcher and two different icons for drop, since I couldn't decide which is better.

[dpeg]

There is a command (D) for "drop item last picked up". I can imagine that an icon for that would be very convenient on a handheld.

[dd]

Ok, maybe the left drop icon could be used for that and the right one for regular (d) drop.

On another note, I'll finish up the abilities, then I'll upload all the icons on mantis, so they'll all be in the same place for once.

[white_noise]

I think that ... should be merged.

This can't be done since the icons correspond to commands, and merging them would require removing commands from the game.

I know this is work for coders, but I decided to state this idea here, as long as we talk about this menu. Pretty much offtopic.

Also separation to 'actions' and 'menus' is great idea.

[roctavian]

I don't know about that message log tile, if at the very least because it's centered kind of strangely.

I kind of feel like it should look like some sort of list or otherwise resemble the in-game message log. Like, lines of pixels as faux-writing on black, most of them white or perhaps light gray. Two lines in a row of green, maybe a line of red in there.

[dd]

I kind of feel like it should look like some sort of list or otherwise resemble the in-game message log. Like, lines of pixels as faux-writing on black, most of them white or perhaps light gray. Two lines in a row of green, maybe a line of red in there.

I don't think so... it would just look weird, without context it'd just look like a bunch of coloured lines. A log book serves the purpose better.

The centering I can fix.

[dd]

fixed book

[white_noise]

Maybe add little color to a cover. Any tint will be nice for contrast between cover and pages. Or it can be just darker.

[galehar]

The first thing that came to my mind when I saw the book icon was that it was either memorise or cast.

[galehar]

Or color coded backgrounds for types of commands?

Seems a bit too cryptic - one of the reasons for redoing these was to make the icons more consistent and easier to understand. I think an interface should have a consistent "language" of symbols where you can predict what a button does by its icon, thus making it intuitive to use.

I kinda disagree. Easy to guess is good, but it shouldn't be a priority over long term usability. Colour coding can be very useful and it's easy to learn. For example, we could have all evocable abilities to be glowing white (colour of artefacts). It's important to remember that this one has an evocations check. Useful to distinguish between blink and evoke blink.

[dd]

Ok, all the abilities are now done. I've compiled all the icons I've made into one image, I'll be posting it on mantis as well.

I'll be posting any further changes/amendments on mantis instead of here. Thanks to everyone for feedback.

[edlothiol]

If you have them as separate 32x32 (or smaller, for the tabs) images, that'd be a lot easier to integrate. Actually, the best way would probably be one image like you posted, for preview, and a zip file with each tile in a separate image.

[dd]

If you have them as separate 32x32 (or smaller, for the tabs) images, that'd be a lot easier to integrate. Actually, the best way would probably be one image like you posted, for preview, and a zip file with each tile in a separate image.

Thing is, I don't have them in separate images... I have everything in 3 GIMP xcf files, with each tile in its own layer group.

I'll have to see if I can find a script to export each layergroup to a different image... if it comes to that I could even write one but that'd take some time.

[dd]

Anyway, I posted this on mantis for now.... I'll see what I can do about getting them on separate files.

https://crawl.develz.org/mantis/view.php?id=6054

[galehar]

gimp has a nice tool to cut big images like that into smaller tiles: guillotine

[dd]

gimp has a nice tool to cut big images like that into smaller tiles: guillotine

Ok that doesn't really work, it only creates new files but doesn't save them, I'd have to save them each manually, and that is a lot of tiles... I'd rather see if I can automate it with a script.

[edlothiol]

Uploading the xcf file would probably also help. You don't need to do extra work, we're used to cutting up images; I just don't want you to unnecessarily glue the tiles together if you had them in a format that's easier for us to process

[dd]

Nah, I managed to do it pretty easily. I used the guillotine to split up the image, then I opened up the python console, and with a little bit of trial-and-error I figured it out. Then I just wrote this in console:

i = gimp.image_list()
for x in range(len(i)): pdb.file_png_save(i[x], i[x].layers[0], '/home/vesa/Documents/dctiles/Newgui/separate/i' + str(x) + '.png', '/home/vesa/Documents/dctiles/Newgui/separate/i'+str(x)+'.png', 0, 9, 0, 0, 0, 0, 0)

[dd]

The separate files are now available on mantis.

[dd]

Or color coded backgrounds for types of commands?

Seems a bit too cryptic - one of the reasons for redoing these was to make the icons more consistent and easier to understand. I think an interface should have a consistent "language" of symbols where you can predict what a button does by its icon, thus making it intuitive to use.

I kinda disagree. Easy to guess is good, but it shouldn't be a priority over long term usability. Colour coding can be very useful and it's easy to learn. For example, we could have all evocable abilities to be glowing white (colour of artefacts). It's important to remember that this one has an evocations check. Useful to distinguish between blink and evoke blink.

Well, if colour coding is really needed, I could make a few coloured backgrounds that could be used for the tiles. I personally don't think it's such a good idea, I feel it'd just make the interface messy and not offer much benefit. But that's just my opinion.

[edlothiol]

Hm. I should look into Gimp scripting.

By the way, I'll probably need tab icons for the Webtiles chat pane (ideally two, new messages / no new messages) sometime in the future, so if you're feeling bored... It's not urgent, though.

[dd]

Hm. I should look into Gimp scripting.

By the way, I'll probably need tab icons for the Webtiles chat pane (ideally two, new messages / no new messages) sometime in the future, so if you're feeling bored... It's not urgent, though.

I haven't played webtiles so I don't know what the UI looks like... should the tabs be similar to the tabs on the game UI?

Also, GIMP scripting is a lot of fun, but only if you use python... writing anything in scheme is a recipe for headache, you'll be seeing nightmares about parentheses for months.