GUI: track selection highlighter

[mr_Spoon]

Hi everybody,

Firstly, thanks to all who've contributed to STK, it is absolutely great fun!

I've just a suggestion regarding the track select highligher in the GUI, as follows. The highlighting box that surrounds tracks when you are browsing them isn't really visible enough, especially when sitting a distance away from the screen using USB game controllers. It is not too bad when using the mouse because your eyes are following the mouse cusrsor anyway, but when using the controller the cursor isn't available as a visual guide, therefore it takes a few moments hunting around the screen to find the box! I've tried the 3 themes but they're all similar.

I think its visibility would be improved by being thicker, perhaps an alternating red/white colour like kerbs on a race track, or if possible an animated pulsing glow or something.

Also, a further GUI/gamepad issue is that once a track has been selected & you get to the bit where you chose the number of laps, there is no way to back out to the tracklist. This would be handy if you selected the wrong track by mistake, perhaps due to the above issue. Currently you have to using the Escape key on the keyboard because the gamepad has no options available other than to just start the race.

Thanks.

[Auria]

Hi,

I've just a suggestion regarding the track select highligher in the GUI, as follows. The highlighting box that surrounds tracks when you are browsing them isn't really visible enough, especially when sitting a distance away from the screen using USB game controllers. It is not too bad when using the mouse because your eyes are following the mouse cusrsor anyway, but when using the controller the cursor isn't available as a visual guide, therefore it takes a few moments hunting around the screen to find the box! I've tried the 3 themes but they're all similar.

I think its visibility would be improved by being thicker, perhaps an alternating red/white colour like kerbs on a race track, or if possible an animated pulsing glow or something.

I'm not against the idea but I'm not a graphist If you know someone that could help make the skin nicer looking, improvements would be more than welcome

Also, a further GUI/gamepad issue is that once a track has been selected & you get to the bit where you chose the number of laps, there is no way to back out to the tracklist. This would be handy if you selected the wrong track by mistake, perhaps due to the above issue. Currently you have to using the Escape key on the keyboard because the gamepad has no options available other than to just start the race.

Actually you can go in the options and configure a button for "back"

[hiker]

Hi,

I've just a suggestion regarding the track select highligher in the GUI, as follows. The highlighting box that surrounds tracks when you are browsing them isn't really visible enough, especially when sitting a distance away from the screen using USB game controllers. It is not too bad when using the mouse because your eyes are following the mouse cusrsor anyway, but when using the controller the cursor isn't available as a visual guide, therefore it takes a few moments hunting around the screen to find the box! I've tried the 3 themes but they're all similar.

I think its visibility would be improved by being thicker, perhaps an alternating red/white colour like kerbs on a race track, or if possible an animated pulsing glow or something.

I'm not against the idea but I'm not a graphist If you know someone that could help make the skin nicer looking, improvements would be more than welcome

There is already a ticket for this: #331

And yes, we would like some contributions here

Cheers,
Joerg

[mr_Spoon]

Ah, sorry, it has already been raised as an issue then. I don't have a clue how to fix this sort of thing myself but i think i found the image files in the folder, i might play around with them.

And thanks Auria, I'll see about mapping a gamepad button to 'back'!

EDIT: I see now that the glass_square_focused.png file is used for both the track and the character selection.

[mr_Spoon]

Hi, I've edited four of the existing Ocean theme's highlighting PNG files, please see below pictures (if they work):

The files (note: Photobucket duplication messed up the filesnames with "-n" appearing at the end of each):





Screenshots:





I've just swapped around the filenames of 4 & 2 on my computer as I don't think the pink/lime number 2 one is very clear. The fully pink one too isn't that great as I had to change the red corner arrows to black which is is a bit out of sync with the others, but I guess its okay. I think a simpler set of colours would be a bit better, e.g. red/green/blue/yellow. I was just working from the colours that were already on the Ocean theme's four files.

Design-wise I found that it wasn't feasible to do a racetrack kerb pattern around the edge of the highlighs because the image gets stretched differently on the X & Y axes when in the game. So, since the sides couldn't really have a pattern & the only area I could use was the corners. I put red corners which looks a bit like arrows pointing at the highlighted item. I hope you like them, sorry if they seem too simple, they certainly aren't as classy as the original files from the Ocean theme.

PS: There was already a button on my gamepad linked to 'back', but I just didn't know it. It would be more intuitive if the D-pad could be used to get to the back arrow somehow, knowing an extra button to simply navigate the GUI seems weird but then again the keyboard is in the same situation with the Esc key I guess.

[Auria]

Hi,

I must admit I'm really not convinced by the red-on-blue color scheme, I don't think these colors fit together, sorry

PS: There was already a button on my gamepad linked to 'back', but I just didn't know it. It would be more intuitive if the D-pad could be used to get to the back arrow somehow, knowing an extra button to simply navigate the GUI seems weird but then again the keyboard is in the same situation with the Esc key I guess.

Well the problem is of course that which button is the D-pad varies from gamepad to gamepad. So unless we built a huge database of all gamepads there's no way we can do that - and even then it wouldn't work on Windows since microsoft's gamepad driver doesn't tell us the brand of the gamepad

[mr_Spoon]

Thanks for the feedback, I can change the colour of the corners easily enough, I've made them black on the blue onem rather than red. I can't make them white because then they would disappear into the light coloured backgroud.

[Crendgrim]

I cannot see the images you posted..

[mr_Spoon]

yeah im, just moving them into a subfolder where they're hosted. should be visible now.

[mr_Spoon]

Playing around a bit more with these ones, the two corners on the left are the same, the ones on the right are both different. If I was just keeping it simple, I think even just the top right one with a little square is fine & doesn't get blended/stretched as much as the others.

[mr_Spoon]

Here they are with just a black dot in the corner.




And the simplest one, with no black bits & rounded corners (see the left two corners):



For reference, here's the original version:



Hmmm, I'm not sure mine make much overall difference to the visibility. They are thicker than the originals anyway. Any thoughts?

Here're some more, with a thick then thin black line running around it... kinda like the original but also thicker:

[Funto]

To me, the rounded corners are ok but I don't like those with the black dots.

To make something visible on screen, I think it should be animated. One can have something very small and discrete on a screen, but as soon as it moves, we remark it.
If you want to try animations, just to make a proof of concept, you can still create a GIF file (with The GIMP for example, that's done by having several layers).
I would go for some smooth blinking, and smooth movements of the selection quad when changing the current selection (like, having item 1 selected, you select item 2 on its right, and the selection quad accelerates and decelerates from the left to the right, until it arrives at destination).
Just an idea ^^

[mr_Spoon]

After going through all that, yes, I agree animation is probably required. The character selection isn't too bad the way it is, but the track selection is the main issue.

EDIT: I added a few more to the above post.

[mr_Spoon]

I've ended up swapping the filenames around so that the yellow one is what appears on the track selection screen rather than the blue one, its visibility is better I think, see attached.



Here're the files, the borders are thicker than the originals & have a thin black line running through them:





I like the idea of an animated thing as you've described it Funto; a blob that tracks around from one selection to another. Perhaps it could float/hover at the selected one and slide with smooth movements like you said from one to another.

I know how to do animated GIFs in GIMP but doubt I could make anything nice enough for the game, I may give it a shot but I think the above is a reasonable workaround for the moment. Perhaps the track selection page should use its own separate PNG file rather than being restricted to using the one for 'player1' on the character screen? This would allow a multi-coloured quad that would be more visible on both the dark & light coloured track mini-screenshots, whereas I think monocolour quads for the character screen work fine.

[Funto]

I know how to do animated GIFs in GIMP but doubt I could make anything nice enough for the game, I may give it a shot but I think the above is a reasonable workaround for the moment.

My suggestion was only for a proof-of-concept, NOT for the final game (that surely doesn't handle GIF animations anyway).
Just so you can make a prototype and see what it looks like when animated ^^

[Auria]

Maybe it could be animated like the highlight around the player's icon in-game?

[mr_Spoon]

My apologies in advance for this rubbish GIF:

Erm... if you then just imagine how that would look in the track menu in the game...
Ha, that was a waste of time & I've tried but the game can't load GIFs in the menu.
I think my eyes are going square.

PS: I'll try to make a better one.

[Arthur]

I think the ones with larger border and black line in the middle is good enough, don't you think?
Too many/non-subtle animations will make people dizzy.

[mr_Spoon]

Yeah, I'm happy enough with the thicker colured border with a thin black line, especially if the yellow one was swapped with the blue one to be 'glass_square_focused.png' so that it appears on the track select page, i.e.
old:
new:

[Auria]

Hi,

thanks mr_Spoon, and also quodobup for the selection on the tracker. I committed new focus rings, here is what it looks now :

[mr_Spoon]

Thanks Auria, could you please show us what the track selection page now looks like, i.e. is it blue or red or what?

[qubodup]

I will make a video

[mr_Spoon]

Oh, Auria I can see from your screenshot that the red one must be the player one focus ring and the blue focus ring for player two, which will make the red one appear on the track page, which is good. They are slightly different designs though but no real problem.

[qubodup]

I will make a video

http://www.youtube.com/watch?v=it9AaWvuoGs

[mr_Spoon]

Thats great, thanks for the video. The red one makes the track selection page better. Thanks again.