Implementation of a new UI

[hellcp]

Current UI is old, and is kinda boring. I would like to make a new one, so I went to drawing board. I thought about colours and shapes and stuff, you can dismiss all this and directly go to what I drew, but I would rather explain motivation of every element incorporated in designs

Colours

Orange and greys, mainly because Logo is orange and checkered flag is black and white
I chose a very saturated orange to make activated buttons more recognizable

Icons

Something that Arthur rightfully called "Comic SNES", icons based on stylistic of the logo, with triangular shadows and thick black outline.

Font

I went with free font, Inter UI, because I wanted a heavy variant of a font, which will be readable (and visible on smaller Android screens)

Backgrounds

Game environments and waving checkered flag in the background

As you can see I used just one image to represent all game action, but that was out of laziness and that I had that screenshot on hand

Animations

Those are static images, but selection would have pulsing animation (visible as half-opatique background behind selections), as well as animated scenes in the background and animated checkered flag.

Mockups:

There are 9 of them, but only few are visible due to layout of the forum, https://i.imgur.com/lsm47gb.jpg to see them in detail:

[Auria]

Hi, these mockups look good, but as is often the case, what we lack is not ideas but people to make them happen. A polished game UI can take several months of development and art work, and we are short on both at the moment, so it doesn't seem too likely that major changes will be able to happen soon

[hellcp]

Auria: I'm not coming with showcase of what I can draw, I came with will and to lesser degree (but still) skill to help

[Alayan]

After all those years, the old UI is old and so, in turn, somewhat boring for those who have seen it too much. It also has its limitations.

But, assuming those mockups are supposed to be representative of the look-and-feel of the proposed UI, I'd much prefer to keep the old. The UI in those mockup feels, for me, more boring than the current one.

The solid colors are simplistic and worse looking that something with a luminosity gradient and noticeable borders (aka, the kind of buttons of the current UI).

Also, in some screens, your layout don't make an efficient use of the available space at all.

That's not to say there is nothing at all interesting in your proposal - having pulsing for the focused button would be nice, and having nice screenshots in the background could be cool for the computer version (for the android version, they would probably take too much APK space) . And I'd be intrested in having the possibility to use your cartoonish icons ; but more as an option in a separate theme.

[hellcp]

Alayan, I wouldn't even ask and would start implementing it for myself if I didn't want this to improve, and frankly, those are good ideas to implement into the concept. I will try to go through them to let you better understand reasoning on why I didn't necessarily think or did anything in the current concept:

Solid colour is a placeholder, frankly, most things are (I'm really not proposing to replace all the character icons with Konqi), I just didn't come up with correct gradient/pattern to put there, but I still wanted a striking colour which would contrast well and still fit with the rest

It's a good thing not to overdo it too. Parts which will be shown as representative of the game, should in fact be representative of the game. Current UI doesn't show current game, it shows the game that doesn't exist anymore (or at least isn't the current version). To be fair, difficulty screen on mock-up has exactly that problem that you are talking about, it's way too empty. Otherwise, pause screen and main menu are supposed to show current game and the game as a whole respectively.

Cartoonish icons hopefully will happen soon enough, I'm working on those

But if you want to criticize the whole concept: do it! Nothing is official until it's in the game, and as Auria said, it will take months of work, so it's good to criticize it before and if it lands in the game. I'm not perfect, nobody is. That's why it's a mock-up and not a PR

[tux_peng]

It looks kinda boring to me, too much empty space. It also screams "Mariokart 8 clone" to me

https://duckduckgo.com/?q=marokat+8+men ... &ia=images

[QwertyChouskie]

IMO it's actually an improvement on MK8's GUI, their GUI is WAY too cluttered. This GUI mockup uses a nice blur effect on the non-important parts (like the background image) which reduces clutter (and just looks nice), and the slants on the buttons give a nice sense of motion.

[QwertyChouskie]

Also, I'll try to update https://jacobspctuneup.tk/STK/newgui2/mainmenu.html to match these mockups over time.

[Auria]

Also very important to consider, is that in open source development, it's often much better to iterate than to try to huge overhauls, since you can never predict who will be around when and how much time will they have. Improvements to the GUI are welcome, but incremental smaller improvements over the current UI that can be completed in a reasonable shorter time span have a much higher chance of reaching completion that "let's spend 6 months rewriting everything" - this would be important to consider in your mockups.

If you can for instance make an improved skin for the current UI engine, or take an existing screens and tweak it to be better over a few weeks, that is so much more likely to reach completion than overambitious mockups - and by adding up small iterations we can still reach large improvements over time

[QwertyChouskie]

A good start would probably be to add the new icons. This can be done mostly independent of the GUI layout/engine/etc.

[hellcp]

Well, yeah, I started dong exactly that, with icons, which are mostly done. I will write document on that style, so everybody will be able to recreate how that stuff is done (it's really not that hard to figure out how it's made, but I just like good documentation). As OzoneOne noticed, this art style is a close match to Sam's Hacienda style, which might be a good way to merge how 2D and 3D looks, so it's consistent. Mock-ups are useful, because they show the end goal to some degree. Obviously it will come in batches of changes

[Alayan]

I think it would be interesting to make icons related to skins.

Maybe by being directly part of the skin, or maybe with a separate option, I'm not so sure about how it should be done.

This would allow different skins to use custom icons if desired, which would be nice.

Otherwise, speaking about GUI improvements, I'd like to have the skill bars in kart selection depending on difficulty (that is, if you select SuperTux the speed bar will be longer than in Easy, etc). However, this would require to select difficulty before selecting a kart, which is not really possible with the merged difficulty/race mode selection screen. If someone has an idea on how it should be properly done... The easiest way would be to separate difficulty and race mode selection, but they may have been merged for a reason (having one screen less to pass through on when not changing the difficulty ?), so I'm not so sure about it.

[MTres19]

You could have separate widget themes and icon themes, like Linux DEs have.

[Auria]

We're not really looking to have different icon sets - just having many skins is pretty unusual for a game. We'd rather have ONE really good looking ui than tons of options for passible ones

[Wuzzy]

WHY? Why must the GUI be thrown away?

You have given no reason except that it's “old” and “kinda boring”. “old” is not a good reason at all, “old” does not imply “bad”. And “kinda boring” is highly subjective and is lacking explanation. A good interface does not need to be exciting, it needs to get its job done. Current interface gets its job done just fine.

I really don't know why the GUI must be replaced. WTF is wrong with the current GUI? I think absolutely nothing is wrong, it works perfectly fine.

Don't fix what ain't broken! If you have criticism of the old GUI, please explain in detail what things are wrong. Then we can have a discussion. But if you just want to throw away the GUI because you feel like it, I'm heavily opposed.
I don't get why some people are so quick in just throwing away a GOOD, TRIED and TESTED GUI.

Seriously. The main menu is clearly one of STK's least worries at the moment. Actually, it's not a worry at all.

[QwertyChouskie]

There are a lot of structure issues with the current GUI as features were pasted in over time. This is especially an issue with user/achievement related screens. Plus if STK 1.0 were released with a new GUI AND networked multiplayer, it would bring a lot of good attention to the project. The old GUI is fine, but a new one could be a lot better. And if someone is willing to do the work, why not?

On a different note, my interactive mockup has been updated some more, it now uses some of the new icons: https://jacobspctuneup.tk/STK/newgui2/mainmenu.html

[Alayan]

There are a lot of structure issues with the current GUI as features were pasted in over time. This is especially an issue with user/achievement related screens.

This doesn't point out any specific issue, still : it's too general. What are those structure issues ? How do they manifest themselves ? Etc.

Plus if STK 1.0 were released with a new GUI AND networked multiplayer, it would bring a lot of good attention to the project.

Any reason to think that the GUI change would bring any significant increase in popularity ? (This hypothesis is not A/B testable anyway, so it's a guess). Any reason to think that this would be the (perceived ) n°2 feature behind networking, considering all the changes that are already in the dev version and those that are planned for the next version ? Ahead of track changes, ahead of gameplay changes ?

The old GUI is fine, but a new one could be a lot better. And if someone is willing to do the work, why not?

"Could be", sure. A new one "could be" worse, too. So, the obvious question is, what are the issues the new UI is supposed to fix in the first place, and how it is trying to fix them.

A GUI is supposed to look nice, be clear and easy to navigate to discover and use the game's options, game modes, etc.

A total overhaul is much more involved than targeted improvements, so why it would be a preferable approach needs solid justification.

[hellcp]

Well, alright, I was lazy with explaining it first time I guess, better reasons would be:
- It's impossible to play on small screen, button sizes aren't uniform and hard to press on smaller screens (and misclicks are annoying)
- Style of the game is different from style of interface, something that is quite natural in a game that has existed for more than 10 years
- Style of interface along isn't consistent, using elements of Tango as icons (which are way more detailed then the rest of icons)
- UI is optimized for mouse and keyboard and is hard to navigate with controller
- On-screen keyboard is a mess

To me it seems like SuperTuxKart grew out of that UI. While it was great during times when the only way to play the game was with mouse and keyboard on PC, STK has changed a lot. It adopted new technologies, appeared on Android, has much more defined artstyle in 3D, it's just that 2D and UI haven't caught up to it at all.

Have a 100 icons I made for it, I hope you like them:

stk.zip

Icons

(270.76 KiB) Downloaded 741 times

[Auria]

Hi, many of these icons are interesting, though you haven't included a license statement, we cannot use assets that are not released under an open-source license

Also, indeed we aware that navigation using a gamepad is not ideal, though fortunately Alayan has been working on some improvements in that regard, and more could be done in the future for sure

[hellcp]

Oh whopps, forgot about it, CC BY-SA 4.0 sounds fine?

[Wuzzy]

None of these points justify a complete overhaul of the GUI, however.

[hellcp]

Wuzzy, then why is UI not this now:

Add `Super` at the top, it will be perfect.

Why change anything if it works :/

IMO if STK wants interface that is easy to use with other input devices than mouse and keyboard, it would be way better to rethink it from scratch, because not much thought was given to that aspect before, and creating UI for controller for example comes at cost of repositioning a lot of elements (when with touch only scale matters really).

You are approaching my ideas like I'm trying to kill the fun, I'm not. I'm trying my best to help a game I love. And one of the ways I'm trying to do it with element which was the most problematic for me to adjust to. And I am not the only person complaining here about it. If we approach everything with attitude of "it's good enough, let's not improve it", there would be nothing to improve with a fork of TuxKart, just fixes so it builds on newer dependencies, that's not the point. People wanna help, don't discourage them.

[Wuzzy]

Wuzzy, then why is UI not this now:

Because it is crap. Duh! What a silly question!

But our current GUI is not crap. I think it is good.

I think the current GUI is good and works well. I definitely do not see the need to nuke the current GUI completely, this just seems insane.
Nuking the GUI needs SERIOUS justification. The reasons brought up so far were all far too weak.
Also, nuking the GUI is a serious investment with no guarantee that the new GUI is a major improvement. It's a risk of which I am sure the core devs are not easily willing to take, especially with such a weak justification.

Let me go through your points one-by-one:

- It's impossible to play on small screen, button sizes aren't uniform and hard to press on smaller screens (and misclicks are annoying)]

I am not familiar with STK on Android (does it exist?). Are small screens even targeted. Define “small screen”.

Let's assume you're right: This seems to justify a nuke at first glance. But maybe it would be more sensible to have a separate GUI for small screens. It might be too difficult to have a GUI which works both for small and big screens.

Also, we might want to hear more player voice here.

- Style of the game is different from style of interface, something that is quite natural in a game that has existed for more than 10 years

I don't really understand this one.
PLEASE be more specific about problems with the current GUI.

- Style of interface along isn't consistent, using elements of Tango as icons (which are way more detailed then the rest of icons)

Just fix the icons then, definitely not worth wasting a nuke. Do you know how expensive nukes are?

- UI is optimized for mouse and keyboard and is hard to navigate with controller

WTF?! I can absolutely not understand the criticism about controllers. I have played STK with controller extensively and I felt no inconvenience in the main menu at all. I can go through the main menu with only the controller just fine, thank you very much.
If you felt inconvenience with controller, again:
Please pinpoint SPECIFIC problems. Otherwise we are getting nowhere.

- On-screen keyboard is a mess

I have never used this, so I can't say much here.
This basically just sounds like a bug. Probably fixable without nuking.


Of course the current GUI can be improved, just in smaller steps. I agree with Alayan. I do not say the current GUI is untouchable.

[hellcp]

Because it is crap. Duh! What a silly question!

I like that TuxKart UI more, thank you very much. It had more testing (duh, people play TK to this day, 18 years and working fine), and would work fine on touchscreen as elements are bigger in scale than current UI. No idea about controller, but maybe we could make that work

I am not familiar with STK on Android (does it exist?). Are small screens even targeted. Define “small screen”(....) It might be too difficult to have a GUI which works both for small and big screens.

STK on Android exists, and its only weakpoint is UI, on 5.5 inch 1080p screen it's impossible to use without a needle. It really isn't hard to have UI that works on both big and small screens, it's just a matter of scale and positioning of UI elements in a sensible way. Maintaining two UIs will be a pain in the butt.

I don't really understand this one.
PLEASE be more specific about problems with the current GUI.

How do I explain style to you? It's a difference between Angry Birds and Cityville Facebook game style.

WTF?! I can absolutely not understand the criticism about controllers. I have played STK with controller extensively and I felt no inconvenience in the main menu at all. I can go through the main menu with only the controller just fine, thank you very much.
If you felt inconvenience with controller, again:
Please pinpoint SPECIFIC problems. Otherwise we are getting nowhere.

With settings addons and kart selection, where it either scrolls to all selectable widgets seemingly at random or direction in which to press d-pad to go to specific part of the interface.

This basically just sounds like a bug. Probably fixable without nuking.

Most certainly, keyboard is in a 3x10 table, always as qwerty layout without any regards to current locale. It needs a complete rewrite to work like it should.

Of course the current GUI can be improved, just in smaller steps.

Of course, because every single part I'm suggesting will be introduced at once. Do you really expect it being that different within few days? Every single introduced part will require testing for bugs, against humans and against hardware. It's not that easy. I'm offering help in both coding and design aspects for reason of not enough experts in both departments (meaning current contributors, not me as expert).

[QwertyChouskie]

Let's start with the new icons, that alone will be a big improvement. Although I rather like the proposed GUI, there's no need to debate this until the smaller improvements that can function with either a whole new GUI or with the existing one (e.g. the icons) are already in place.