GUI icons


If you are interested in helping with tiles, vaults, patches or documentation, this is the place for that.

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Sunday, 5th August 2012, 17:01

GUI icons

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

newgui_tabs.png
newgui_tabs.png (4.86 KiB) Viewed 17117 times


newgui_tab_x.png
newgui_tab_x.png (71.02 KiB) Viewed 17117 times


Feedback would be welcome.
User avatar

Ziggurat Zagger

Posts: 5832

Joined: Thursday, 10th February 2011, 18:30

Post Sunday, 5th August 2012, 17:07

Re: GUI icons

Sword is too dark, or it's not highlighted?
"Be aware that a lot of people on this forum, such as mageykun and XuaXua, have a habit of making things up." - minmay a.k.a. duvessa
Did I make a lame complaint? Check for Bingo!
Totally gracious CSDC Season 2 Division 4 Champeen!

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Sunday, 5th August 2012, 17:21

Re: GUI icons

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.
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Sunday, 5th August 2012, 21:05

Re: GUI icons

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).
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Monday, 6th August 2012, 05:24

Re: GUI icons

galehar wrote: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?
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Monday, 6th August 2012, 06:08

Re: GUI icons

dd wrote:
galehar wrote: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!
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Monday, 6th August 2012, 14:13

Re: GUI icons

Np. I'll get working on those ability icons shortly. Meanwhile, here's some more GUI icons:
newguiiconsx.png
newguiiconsx.png (8.17 KiB) Viewed 17068 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
newgui_tabs.png (5.7 KiB) Viewed 17062 times

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

Feedback welcome, as always
User avatar

Eringya's Employee

Posts: 1783

Joined: Friday, 7th October 2011, 19:24

Location: Athens, Greece

Post Monday, 6th August 2012, 17:14

Re: GUI icons

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!
MuCK;
  Code:
612 | D:1      | Xom revived you
614 | D:1      | Xom revived you
614 | D:1      | Slain by a gnoll

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Monday, 6th August 2012, 17:44

Re: GUI icons

TehDruid wrote: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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Tuesday, 7th August 2012, 15:37

Re: GUI icons

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

newguitile.png
newguitile.png (791 Bytes) Viewed 17029 times

newguitilex.png
newguitilex.png (1.39 KiB) Viewed 17029 times

newguitilex2.png
newguitilex2.png (4.88 KiB) Viewed 17029 times
User avatar

Vestibule Violator

Posts: 1459

Joined: Sunday, 19th December 2010, 05:45

Location: New England

Post Tuesday, 7th August 2012, 15:48

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Tuesday, 7th August 2012, 16:04

Re: GUI icons

I'll increase the beveling effect for it.

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Tuesday, 7th August 2012, 16:14

Re: GUI icons

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.
Attachments
tabx.png
tabx.png (8.32 KiB) Viewed 17017 times
newgui_tabs.png
newgui_tabs.png (5.58 KiB) Viewed 17022 times

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Tuesday, 7th August 2012, 21:21

Re: GUI icons

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

abilx1.png
abilx1.png (22.83 KiB) Viewed 17005 times


abilx1a.png
abilx1a.png (26.49 KiB) Viewed 17005 times
User avatar

Ziggurat Zagger

Posts: 5832

Joined: Thursday, 10th February 2011, 18:30

Post Tuesday, 7th August 2012, 21:54

Re: GUI icons

Why is there a wand on top of half of the the blink icon?
"Be aware that a lot of people on this forum, such as mageykun and XuaXua, have a habit of making things up." - minmay a.k.a. duvessa
Did I make a lame complaint? Check for Bingo!
Totally gracious CSDC Season 2 Division 4 Champeen!
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Tuesday, 7th August 2012, 22:53

Re: GUI icons

XuaXua wrote: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).
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 07:40

Re: GUI icons

Here's the rest of the new GUI icons.
Attachments
newguiiconsx.png
newguiiconsx.png (21.85 KiB) Viewed 16981 times
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Wednesday, 8th August 2012, 11:32

Re: GUI icons

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.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 13:45

Re: GUI icons

Well I just replaced it with a hourglass.
Attachments
newguiiconsx.png
newguiiconsx.png (22 KiB) Viewed 16954 times
User avatar

Spider Stomper

Posts: 246

Joined: Thursday, 19th July 2012, 11:07

Post Wednesday, 8th August 2012, 14:10

Re: GUI icons

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.
User avatar

Ziggurat Zagger

Posts: 5832

Joined: Thursday, 10th February 2011, 18:30

Post Wednesday, 8th August 2012, 16:58

Re: GUI icons

galehar wrote:
XuaXua wrote: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?
"Be aware that a lot of people on this forum, such as mageykun and XuaXua, have a habit of making things up." - minmay a.k.a. duvessa
Did I make a lame complaint? Check for Bingo!
Totally gracious CSDC Season 2 Division 4 Champeen!
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Wednesday, 8th August 2012, 19:12

Re: GUI icons

white_noise wrote: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.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Wednesday, 8th August 2012, 19:14

Re: GUI icons

XuaXua wrote: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.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 19:35

Re: GUI icons

white_noise wrote: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.

galehar wrote: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.

galehar wrote: 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...

galehar wrote:How about just a big hourglass?


That could work.
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Wednesday, 8th August 2012, 20:22

Re: GUI icons

dd wrote:
galehar wrote: 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.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 20:23

Re: GUI icons

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

newgui_x.png
newgui_x.png (25.5 KiB) Viewed 16915 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.
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Wednesday, 8th August 2012, 21:52

Re: GUI icons

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.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 22:10

Re: GUI icons

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

galehar wrote: inventory and butcher commands. Drop could be nice too.


I can do these.

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 22:40

Re: GUI icons

Ok, I added (last 4, top row) inventory, butcher and two different icons for drop, since I couldn't decide which is better.
Attachments
newgui_x.png
newgui_x.png (29.09 KiB) Viewed 16898 times

Dungeon Master

Posts: 3618

Joined: Thursday, 23rd December 2010, 12:43

Post Wednesday, 8th August 2012, 23:05

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Wednesday, 8th August 2012, 23:35

Re: GUI icons

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.
User avatar

Spider Stomper

Posts: 246

Joined: Thursday, 19th July 2012, 11:07

Post Thursday, 9th August 2012, 04:53

Re: GUI icons

dd wrote:
white_noise wrote: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.
User avatar

Dungeon Master

Posts: 332

Joined: Friday, 15th July 2011, 22:43

Post Thursday, 9th August 2012, 06:40

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 08:17

Re: GUI icons

roctavian wrote: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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 08:31

Re: GUI icons

fixed book
Attachments
newgui_x.png
newgui_x.png (29.24 KiB) Viewed 16861 times

For this message the author dd has received thanks:
ontoclasm
User avatar

Spider Stomper

Posts: 246

Joined: Thursday, 19th July 2012, 11:07

Post Thursday, 9th August 2012, 09:02

Re: GUI icons

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

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Thursday, 9th August 2012, 12:36

Re: GUI icons

The first thing that came to my mind when I saw the book icon was that it was either memorise or cast.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Thursday, 9th August 2012, 13:18

Re: GUI icons

dd wrote:
galehar wrote: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.
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 14:05

Re: GUI icons

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.
Attachments
newgui_all.png
newgui_all.png (92.32 KiB) Viewed 16836 times

Dungeon Master

Posts: 125

Joined: Sunday, 8th May 2011, 21:54

Post Thursday, 9th August 2012, 14:15

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 14:24

Re: GUI icons

edlothiol wrote: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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 14:27

Re: GUI icons

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
User avatar

Dungeon Master

Posts: 4031

Joined: Thursday, 16th December 2010, 20:37

Location: France

Post Thursday, 9th August 2012, 14:34

Re: GUI icons

gimp has a nice tool to cut big images like that into smaller tiles: guillotine
<+Grunt> You dereference an invalid pointer! Ouch! That really hurt! The game dies...

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 14:42

Re: GUI icons

galehar wrote: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.

Dungeon Master

Posts: 125

Joined: Sunday, 8th May 2011, 21:54

Post Thursday, 9th August 2012, 14:44

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 15:09

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 15:19

Re: GUI icons

The separate files are now available on mantis.

dd

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 15:23

Re: GUI icons

galehar wrote:
dd wrote:
galehar wrote: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.

Dungeon Master

Posts: 125

Joined: Sunday, 8th May 2011, 21:54

Post Thursday, 9th August 2012, 15:30

Re: GUI icons

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

Shoals Surfer

Posts: 295

Joined: Sunday, 3rd June 2012, 20:05

Post Thursday, 9th August 2012, 15:43

Re: GUI icons

edlothiol wrote: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.
Next

Return to Contributions

Who is online

Users browsing this forum: No registered users and 22 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by ST Software for PTF.