Page 1 of 1

Fixing the block configuration screens

PostPosted: 25 Feb 2012, 09:03
by Edward_Lii
Hello all,

The menu/GUI overhaul is IMHO almost done.
One thing that still needs to be done before V0.3 are the configuration screens in the leveleditor.


Moving block configuration
First of all the moving blocks:
cfgMoving.png

Placing Enabled and Loop under each other made it look slightly better.
But the options "Clear path" and "Make path" don't fit, they would fit better if they used the smaller font, but then the consistency of GUIObjectButtons will be gone. :|
Perhaps replacing them with icons will do the trick?


Trigger block configuration
cfgTrigger.png

IMHO this is the worst one, everything is bold causing the OK and Cancel buttons to not stand out.
Only the text "Behaviour" is in the small font (since it's a GUIObjectLabel).


Conveyor belt configuration
cfgConveyor.png

This one doesn't look so bad, one small nitpick is that the content ("Enabled" and "Enter speed here:") is placed too high.
Causing the space between the title and the content smaller than the space between the content and the Ok and Cancel buttons.


Notification block configuration
cfgNotification.png

This screen looks all right to me, only the same as with the conveyor belt screen, the label and textarea is a bit off center.

Feedback and suggestions are welcome! ;)

Re: Fixing the block configuration screens

PostPosted: 25 Feb 2012, 11:31
by odamite
Hello Edward_Lii

I've worked on those dialogs but I just moved widgets around to fit the new style. I didn't think of the usability so thanks for taking it up. :D

I made some mock-ups so tell me what you think:
button.png

moving_block.png


I think that it improves usability to keep the dialogs same kind. There's always a title, two columns of label and controller widget and finally buttons in bottom.

Using icons was a great idea. Those "icons" what I'm using are just lower case letters Blokletters Viltstift. They could be improved but right now it isn't necessary.

Re: Fixing the block configuration screens

PostPosted: 25 Feb 2012, 11:35
by Edward_Lii
Hello odamite,

odamite {l Wrote}:I've worked on those dialogs but I just moved widgets around to fit the new style. I didn't think of the usability so thanks for taking it up. :D

I made some mock-ups so tell me what you think:

They are definitely better than it is right now.
I'm going to work on them straight away. ;)

Re: Fixing the block configuration screens

PostPosted: 25 Feb 2012, 14:56
by odamite
Hello Edward_Lii,

I see you've implemented my mock-up in code in rev. 279. It's great but there are some minor things:
  • There should be some kind of hover state for the button to give user feedback. Simply the color should be changed.
  • Icons could be a little bigger
  • I don't quite like the plus character from Knewave. So I created a new one in same style as the font:
    icons.png
    render
    icons.png (852 Bytes) Viewed 5821 times

    icons.svg
    source
    (6.16 KiB) Downloaded 385 times

    Unfortunately now images must be used so changes in GUIButton are required. Also my modification could be used for level editor's add level block.

Re: Fixing the block configuration screens

PostPosted: 25 Feb 2012, 17:14
by ctdabomb
i think it should be possible to change the direction of a conveyor belt. It is either not possible, or I can't figure out how to do it.

Re: Fixing the block configuration screens

PostPosted: 25 Feb 2012, 17:21
by Edward_Lii
Hello ctdabomb,

ctdabomb {l Wrote}:i think it should be possible to change the direction of a conveyor belt. It is either not possible, or I can't figure out how to do it.

This can be done by entering a negative value (e.g. -5).

odamite {l Wrote}:I see you've implemented my mock-up in code in rev. 279. It's great but there are some minor things:
There should be some kind of hover state for the button to give user feedback. Simply the color should be changed.
Icons could be a little bigger
I don't quite like the plus character from Knewave. So I created a new one in same style as the font:

The color changing on hover can easily be done.
I agree on you that the current plus isn't good, but replacing it with a static image will require some changes to the GUIObjectButton which I'd rather not do. :|

Perhaps we can change the plus sign inside the font?
Knewave is licensed under an open license, and this would also "improve" the plus sign in every other text (making use of that font).

Not sure what the restrictions are of the license knewave is under, but I think it should be possible.

Re: Fixing the block configuration screens

PostPosted: 25 Feb 2012, 18:59
by odamite
Hello Edward_Lii.

I modificated plus sign on the font with software called fontforge. It works but I faced some problems in the game. Fontforge gave me many errors while exporting TTF font and in game the font is out of place below original place. In level select blocks it's even worse but it's because my code which centered the number (can be fixed by changing function's 2nd attribute to "box.y-dy" at line 106 in LevelSelect.cpp).

I don't know how to fix all this in fontforge but should we change stuff in code instead. It might be that we have been using font with wrong metrics and everything. Other option is to create some FontManager class to handle these situating. Or we can leave the plus sign for now and focus on next release. :)

Re: Fixing the block configuration screens

PostPosted: 26 Feb 2012, 07:02
by Edward_Lii
Hello odamite,

odamite {l Wrote}:I don't know how to fix all this in fontforge but should we change stuff in code instead. It might be that we have been using font with wrong metrics and everything. Other option is to create some FontManager class to handle these situating. Or we can leave the plus sign for now and focus on next release. :)

I'd say focus on V0.3. :D

The configuration screens look a lot better now and the '+' sign shouldn't keep us from releasing 0.3. :p
I think we should start making a todo list with the things that still need to be done before the next release.
Either on the forum or the wiki.