Implementation of a new UI

Re: Implementation of a new UI

Postby 0zone0ne » 06 Jul 2018, 11:39

Agreed. I'm a big fan of the new icons and would like to see them implemented. We can fix any potential issues they have first, and then make a decision on what should be done next.
0zone0ne
 
Posts: 329
Joined: 26 Aug 2012, 02:34

Re: Implementation of a new UI

Postby GeekPenguinBR » 08 Jul 2018, 18:57

Since hellcp himself has asked me to post my concept here, this is my attempt to contribute with ideas for a new UI.

01.jpg

02.jpg

03.jpg


Note that the yellow chessboard background and the icons were made quickly just for better understanding of my suggestion. This is not a graphic project for the remodeling of the UI. My focus is on the navigation or, in other words, on the sequence of actions to play locked and unlocked content.
"Making cool harmless games makes the world a better place".
User avatar
GeekPenguinBR
 
Posts: 364
Joined: 22 Mar 2014, 00:41
Location: Rio de Janeiro

Re: Implementation of a new UI

Postby tux_peng » 08 Jul 2018, 20:40

I like the new icons & hellcp's UI mockup does look good, but the current UI isn't bad.
The only menu I've had trouble controlling with a gamepad is the addons menu

I just think that this would take time to implement and there are many more important things ATM
User avatar
tux_peng
 
Posts: 77
Joined: 13 Jun 2014, 19:59

Re: Implementation of a new UI

Postby hellcp » 08 Jul 2018, 21:06

GeekPenguinBR: I really love bold help bubbles, they are awesome, although they need some bolder font to go with the style. Icons are not my favorite. Opening cutscene and track selection in story mode needs to be discussed, there were ideas of rotating globe as track selection and book introduction cutscene instead of current cutscene with Gnu being kidnapped. I feel like we need more options in main menu than this :D

tux_peng: ofc there are more important things, but I'm doing what I have capability of doing, while others do other things :D
User avatar
hellcp
 
Posts: 16
Joined: 24 Jun 2018, 01:52

Re: Implementation of a new UI

Postby Auria » 09 Jul 2018, 00:11

hellcp {l Wrote}:Oh whopps, forgot about it, CC BY-SA 4.0 sounds fine?


Sorry for missing this reply, there's so many posts it's easy to miss one. Yes, CC-BY-SA 4 is good. Obviously, assuming you made everything yourself and didn't get it from the internet

Please note that hiker (the STK project leader) is currently on vacation, so things might move a bit slower
Image
User avatar
Auria
STK Moderator
 
Posts: 2916
Joined: 07 Dec 2009, 03:52

Re: Implementation of a new UI

Postby hellcp » 09 Jul 2018, 01:23

Auria: Everything except fonts is original and I used Inter UI Heavy (mass, options_language, rename, screen32-1610), which isn't really a problem as its license (SIL OFL 1.1) allows for that use entirely ;).
User avatar
hellcp
 
Posts: 16
Joined: 24 Jun 2018, 01:52

Re: Implementation of a new UI

Postby Auria » 09 Jul 2018, 18:48

hellcp {l Wrote}:Auria: Everything except fonts is original and I used Inter UI Heavy (mass, options_language, rename, screen32-1610), which isn't really a problem as its license (SIL OFL 1.1) allows for that use entirely ;).


Thanks. Hiker, our project leader, is currently on vacation and we won't change the icon without discussing this with him of course - so there might a little delay. I'm keeping this in mind though, we should check that in a couple weeks perhaps
Image
User avatar
Auria
STK Moderator
 
Posts: 2916
Joined: 07 Dec 2009, 03:52

Re: Implementation of a new UI

Postby Auria » 17 Jul 2018, 01:29

So, hiker is back from vacation, and we've had a little chat, and we like the icons and would like to use them in-game! Now, these icons are currently in svg format, which is great as source material, though in-game we need PNGs. I wonder if someone here would like to help us by doing a little work and exporting the icons to a pack of PNGs that is ready to place in the "data/gui" folders? The exported icons would need to have the same names and image sizes as the original. If no one volunteers we'll be looking at it, though that would be a great way to help us that doesn't require intricate technical knowledge!
Image
User avatar
Auria
STK Moderator
 
Posts: 2916
Joined: 07 Dec 2009, 03:52

Re: Implementation of a new UI

Postby QwertyChouskie » 17 Jul 2018, 01:44

A quick look in the folder shows most things as 128x128. gui_lock.png, nitro.png, notes.png, rename.png, and banana.png are 64x64, but that probably should be increased to 128x128. loading.png is 128x128, but should be 256x256 IMO. hourglass.png and search.png are 64x64, and karts.png and track_random are 256x256.
Not an official dev, but a huge fan of STK!
User avatar
QwertyChouskie
 
Posts: 235
Joined: 29 Jun 2016, 14:57

Re: Implementation of a new UI

Postby Auria » 17 Jul 2018, 15:25

QwertyChouskie {l Wrote}:A quick look in the folder shows most things as 128x128. gui_lock.png, nitro.png, notes.png, rename.png, and banana.png are 64x64, but that probably should be increased to 128x128. loading.png is 128x128, but should be 256x256 IMO. hourglass.png and search.png are 64x64, and karts.png and track_random are 256x256.


Indeed, some of them that are on smaller size could be made a little larger, so long as the size remains reasonable
Image
User avatar
Auria
STK Moderator
 
Posts: 2916
Joined: 07 Dec 2009, 03:52

Re: Implementation of a new UI

Postby hellcp » 17 Jul 2018, 17:36

I usually use variation of
for x in `ls | sed 's/.svg//g'`; do inkscape -z --export-png ${x}.png ${x}.svg -w 256; done
where 256 is size of output in pixels, I tested game that way and while in some places scaling is a little wonky, it worked pretty fine.
User avatar
hellcp
 
Posts: 16
Joined: 24 Jun 2018, 01:52

Re: Implementation of a new UI

Postby Typhon » 17 Jul 2018, 19:05

Hi, I created with Inkscape some pictures of my version of STK 1.0. It would be nice to get Feedback about it ;)
Attachments
SelectRace.png
Menue.png
KartSelect.png
Typhon
 
Posts: 14
Joined: 28 May 2018, 16:21

Re: Implementation of a new UI

Postby deve » 17 Jul 2018, 21:59

find -type f -exec sh -c 'file={}; file_out=$(basename $file .svg).png; convert $file $file_out' \;

Can be used with "convert -scale".

Honestly, I'm not a big fan of these icons. Indeed some of them are ok, but they don't fit well with current GUI. Here are some screenshots:
Zrzut ekranu z 2018-07-17 22-46-24.png

Zrzut ekranu z 2018-07-17 22-48-16.png

Zrzut ekranu z 2018-07-17 22-48-37.png

Zrzut ekranu z 2018-07-17 22-49-03.png

Zrzut ekranu z 2018-07-17 22-49-25.png
deve
 
Posts: 238
Joined: 23 Jan 2014, 13:45

Re: Implementation of a new UI

Postby deve » 17 Jul 2018, 22:34

And @hellcp regarding to the android port:
- it should be much better in current beta version (fonts and some buttons are bigger, checkbox is more visible etc)
- "misclicks" are a bug in guiengine and are easily reproducible with mouse too (you can highlight "options" in main menu, then move cursor out of the icon list and then click near the "close" button). It looks that it executes buttonbar click event instead of icon button click and it should be fixed.
- I'm aware that on-screen keyboard is far from perfect. But proper software keyboard needs a lot of work and the usage was very little so far (it could be used only to type your user name or search addons). Anyway it may need some love, because in next version it will be used for online chat.
deve
 
Posts: 238
Joined: 23 Jan 2014, 13:45

Re: Implementation of a new UI

Postby QwertyChouskie » 17 Jul 2018, 23:16

Typhon {l Wrote}:Hi, I created with Inkscape some pictures of my version of STK 1.0. It would be nice to get Feedback about it ;)


I really like that mode select screen :)
Not an official dev, but a huge fan of STK!
User avatar
QwertyChouskie
 
Posts: 235
Joined: 29 Jun 2016, 14:57

Re: Implementation of a new UI

Postby Auria » 17 Jul 2018, 23:20

As for icons fitting, I agree not all of them fit, I expect we'd start by replacing those that fit best the current UI.

Typhon, regarding your mockups, just my personal opinion, I know it's all the rage these days but I'm not big on flat color backgrounds. Otherwise, not to sound discouraging, but I do have some things to note. Your kart selection screen doesn't consider split-screen multiplayer, and it's not clear what happens if there's lot of addons and it needs to scroll; your main menu screen mockup only has enough room for english and translations would not fit in that space (if you want to make it dynamically sized based on the language that's a lot more work). I don't think we'll ever use a screenshot of the game as background, since we'd need to constantly update it as the game evolves
Image
User avatar
Auria
STK Moderator
 
Posts: 2916
Joined: 07 Dec 2009, 03:52

Re: Implementation of a new UI

Postby QwertyChouskie » 18 Jul 2018, 00:14

> created with Inkscape

Can you upload the SVGs? Also @hellcp can you upload the SVG of the new buttons you posted on the Discord? I want to bring https://jacobspctuneup.tk/STK/newgui2/mainmenu.html up-to-date :)
Not an official dev, but a huge fan of STK!
User avatar
QwertyChouskie
 
Posts: 235
Joined: 29 Jun 2016, 14:57

Re: Implementation of a new UI

Postby hellcp » 18 Jul 2018, 01:28

deve: Obviously, icons weren't created for this UI, that's precisely what I have been talking about since the beginning. But I did have to start somewhere :D

Typhon: while some elements seem weirdly sized and not putting enough focus to primary functions, there are some great ideas there :o

Auria: Agreed, it's good to keep those in mind, but not pollute whole interface at once with them, because they don't fit yet.

QwertyChouskie: attatched
button.svg
(3.15 KiB) Downloaded 25 times
;)
User avatar
hellcp
 
Posts: 16
Joined: 24 Jun 2018, 01:52

Re: Implementation of a new UI

Postby Typhon » 18 Jul 2018, 07:26

@Auria: You can scroll to the next Kart page if you
press on the three points (next to "Random Kart"). For the Splitscreen I didn't made a preview yet, but I'm working on it.

@QwertyChouskie: Thank you. Here are the files...

@hellcp: What do you mean with "great ideas"?
Attachments
SelectRace.svg
(1.43 MiB) Downloaded 21 times
Menü2.svg
(1.37 MiB) Downloaded 23 times
KartSelect.svg
(1.56 MiB) Downloaded 21 times
Typhon
 
Posts: 14
Joined: 28 May 2018, 16:21

Re: Implementation of a new UI

Postby Ludsky » 18 Jul 2018, 09:45

For me, i prefer the current interface. I think, this is not a priority.
User avatar
Ludsky
 
Posts: 663
Joined: 07 Aug 2011, 12:52
Location: France

Re: Implementation of a new UI

Postby Typhon » 18 Jul 2018, 10:36

I worked faster than I thought. Here is the Splitscreen as SVG and PNG
Attachments
KartSelectMulti.svg
(1.65 MiB) Downloaded 1226 times
KartSelectMulti.png
Last edited by Typhon on 18 Jul 2018, 19:09, edited 1 time in total.
Typhon
 
Posts: 14
Joined: 28 May 2018, 16:21

Re: Implementation of a new UI

Postby Pedroxz » 18 Jul 2018, 10:52

@Typhon I like the kart selection screen in splitscreen mode ;), but some words in other languages may not fit
Pedroxz
 
Posts: 13
Joined: 06 May 2018, 11:01

Re: Implementation of a new UI

Postby Typhon » 18 Jul 2018, 11:04

@Pedroxz In which languages?
Typhon
 
Posts: 14
Joined: 28 May 2018, 16:21

Re: Implementation of a new UI

Postby Pedroxz » 18 Jul 2018, 11:07

@Typhon I do not know what languages this can happen, it may not happen, but I think it's possible
Pedroxz
 
Posts: 13
Joined: 06 May 2018, 11:01

Re: Implementation of a new UI

Postby Typhon » 18 Jul 2018, 11:13

@Perdroxz I understand the problem, but I didn't like if there are so large Buttons with too small letters. This would be looking ridiculous.
Typhon
 
Posts: 14
Joined: 28 May 2018, 16:21

Who is online

Users browsing this forum: No registered users and 1 guest