GUI Brainstorming

GUI Brainstorming

Postby Dakal » 24 Aug 2010, 09:16

Like my others posts i'm focused on GUI. It's just ideas. If you have one post yours below. ;)

-The backgrounds (red/green/blue) sucks but the idea is to keep a colour code
-Icons system on the top, like in "the sims" game. If you want to go on the previous menu simply click on the icon.
Attachments
network.png
challenges.png
course_exemple.png
Character selection
mockup2.png
Menu mockup
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby asciimonster » 24 Aug 2010, 10:45

Dakal {l Wrote}:-The backgrounds (red/green/blue) sucks but the idea is to keep a colour code.

Indeed they do suck, but the idea of colour coding the menus is nice. In 0.6 I always get confused in what game mode I currently am (normal, time trial, follow leader). Using colour coding there is really helpful.

We need a generic background that can be changed colorized to any colour you want. Het checkered flag logically is not the best option.

Dakal {l Wrote}:-Icons system on the top, like in "the sims" game. If you want to go on the previous menu simply click on the icon.

Nice idea, maybe add the text "Go to:" to show people the can click there. For me, that's not clear in the mockup.
asciimonster
 
Posts: 375
Joined: 03 Dec 2009, 18:24

Re: GUI Brainstorming

Postby rudy85 » 24 Aug 2010, 14:10

Nice work :D
STK 3D animation
My work is under the licence you want
User avatar
rudy85
 
Posts: 420
Joined: 06 Dec 2009, 13:44
Location: France

Re: GUI Brainstorming

Postby Dakal » 24 Aug 2010, 14:13

asciimonster {l Wrote}:We need a generic background that can be changed colorized to any colour you want. Het checkered flag logically is not the best option.
Nice idea, maybe add the text "Go to:" to show people the can click there. For me, that's not clear in the mockup.


Yes we need a great background like a 3D render of tracks or characters in action :D
Maybe for the icons system a tooltip under the icon like on the start menu.
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby Auria » 24 Aug 2010, 16:59

Dakal : not bad ideas :) I like the little bubble on hover idea. now of course we need someone to actually code that ^^ Which is not that easy since we need to decide if the bubble appears above or below (we can't always use above, e.g. in the first menu if you hover "challenges" the bubble should probably not appear over the STK logo)

Now, I agree that orange and green don't fit together; the peach skin probably goes in the right direction, and we're always open to more skins ;) Before release we will look at what skins we have and choose a default one.
Image
User avatar
Auria
STK Moderator
 
Posts: 2976
Joined: 07 Dec 2009, 03:52

Re: GUI Brainstorming

Postby vjuk » 24 Aug 2010, 18:08

WOW very nice kart selection and start screen i like it! the background is pretty nice too. if it would be made exactly like this that would be AWSOME
vjuk
 
Posts: 10
Joined: 07 Dec 2009, 13:35

Re: GUI Brainstorming

Postby Dakal » 24 Aug 2010, 18:16

vjuk {l Wrote}:WOW very nice kart selection and start screen i like it! the background is pretty nice too. if it would be made exactly like this that would be AWSOME


We can do something better like this, it's mockup but thanks. ;)
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby Arthur » 25 Aug 2010, 00:10

Dakal {l Wrote}:Yes we need a great background like a 3D render of tracks or characters in action :D

Something along these lines?
http://img291.imageshack.us/img291/2172/lighthouse.png
Hey pal, I took an oath for justice! "In happy days or tightest tights..." or something like that.
User avatar
Arthur
 
Posts: 1073
Joined: 06 Dec 2009, 00:49

Re: GUI Brainstorming

Postby rudy85 » 25 Aug 2010, 05:23

Character animation , I could
STK 3D animation
My work is under the licence you want
User avatar
rudy85
 
Posts: 420
Joined: 06 Dec 2009, 13:44
Location: France

Re: GUI Brainstorming

Postby xapantu » 25 Aug 2010, 10:10

Arthur {l Wrote}:
Dakal {l Wrote}:Yes we need a great background like a 3D render of tracks or characters in action :D

Something along these lines?
http://img291.imageshack.us/img291/2172/lighthouse.png

It is great :) Maybe you should add some subsurf to the top of the lighthouse ?
xapantu
 
Posts: 283
Joined: 07 Dec 2009, 17:30

Re: GUI Brainstorming

Postby Arthur » 25 Aug 2010, 15:12

Thanks. :) Yeah, I thought about it, but it changed the shape a bit too much IMO.
Hey pal, I took an oath for justice! "In happy days or tightest tights..." or something like that.
User avatar
Arthur
 
Posts: 1073
Joined: 06 Dec 2009, 00:49

Re: GUI Brainstorming

Postby Dakal » 25 Aug 2010, 18:16

Something like this is good i think. (with better GUI of course) A bit of transparency to see the background.

I put a a black blur on each edge of the background because with this blur in high resolution you don't need to deform the image. Just put some black background colour and the image fit well.
Attachments
lighthouse_blue_blur.png
lighthouse blue
network_mockup.png
Network mockup
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby Arthur » 25 Aug 2010, 18:29

Wow, really impressive mockup! Do you want me to continue making renders of other tracks? And what do you think is a good resolution?
Hey pal, I took an oath for justice! "In happy days or tightest tights..." or something like that.
User avatar
Arthur
 
Posts: 1073
Joined: 06 Dec 2009, 00:49

Re: GUI Brainstorming

Postby Auria » 25 Aug 2010, 19:01

Your mockups are impressive, each of them looks very different from the others :/ We'll need to settle on a consistent look

I'm also not sure we want to associate the lighthouse with STK so much, doesn't have much to do with racing and perhaps makes the game look to serious? (at least to me a dark blue lighthouse is associated with a sad rainy day, not with karting ;) )
Image
User avatar
Auria
STK Moderator
 
Posts: 2976
Joined: 07 Dec 2009, 03:52

Re: GUI Brainstorming

Postby Dakal » 26 Aug 2010, 00:15

Agreed, i don't know where i'was going with my previous mockups. Something in this style i suppose?

The font (in mockup_source) is "Komika Axis" under GPL : http://apostrophic-labs.kernest.com/fonts/komika-axis
Attachments
mockup_source.zip
(2.72 MiB) Downloaded 380 times
mockup_test.png
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby hiker » 26 Aug 2010, 05:10

Auria {l Wrote}:I'm also not sure we want to associate the lighthouse with STK so much, doesn't have much to do with racing and perhaps makes the game look to serious? (at least to me a dark blue lighthouse is associated with a sad rainy day, not with karting ;) )

I agree with that. Having one particular track in the GUI means that we have to commit that this track will be with stk 'forever' (I mean we can obviously change it, but then would have to change the background image). It might be a lot easier doing this for a few karts, they are more likely to stick around (or only be updated with a better model). So perhaps a 'generic' kind of road section with a few karts?

But then: we had something like this - the original GotM SuperTuxkart branch, or:
http://supertuxkart.svn.sourceforge.net/viewvc/supertuxkart/main/branches/0.5rc1/data/textures/st_title_screen.rgb?revision=5781
http://supertuxkart.svn.sourceforge.net/viewvc/supertuxkart/main/branches/0.6/data/textures/st_title_screen.rgb?revision=3233

Cheers,
Joerg
hiker
 
Posts: 1435
Joined: 07 Dec 2009, 12:15
Location: Melbourne, Australia

Re: GUI Brainstorming

Postby Dakal » 26 Aug 2010, 07:25

About tracks, why not keep tracks for each character?

-Ice field (already in game): Penguin, Mr ice block
-Savannah: Elephant, GNU
-Jungle (already in game): Mozilla
-Aqua track (like in transparent tube): Puffy, Gooey
-Lake: Hexley, Adium
-Clouds: Pidgin
-Castle: Nolok
-Fir forest: Wilber

As you know i'm not a 3D artist so it's only words ...
Damn i want to be a modeler! :D
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby Auria » 26 Aug 2010, 16:11

Dakal,

I like your mockup. Now, it needs changes to the code, so I'd like if we could all agree on a direction to go before I code anything, obviously ;)

The download file includes names in the png images; obviously we cannot do that because of translations. So I'd prefer to stick with the "bubble" from your earlier mockups.
Regarding the bottom bar in your latest mockup, this may be hard to do too because of varying resolutions, the bar would need to stretch differently in widescreen resolutions and I'm not sure how to do that without the texture looking stretched. So the texture would need to be able to tile or something

About associating a track with a character, this would be a good idea for a commercial game, where they have a team of modellers, but we're open source and we depend on contributions, so we just can't make this decision, since we don't know what contributions we will receive nor when.
Image
User avatar
Auria
STK Moderator
 
Posts: 2976
Joined: 07 Dec 2009, 03:52

Re: GUI Brainstorming

Postby stked » 26 Aug 2010, 17:33

Auria {l Wrote}:,

I like your mockup.

Ditto.
Gaming with Netbooks blog
gamingwithnetbooks.blogspot.com

STK editor website
stked.webs.com
User avatar
stked
 
Posts: 141
Joined: 07 Dec 2009, 16:42

Re: GUI Brainstorming

Postby rudy85 » 26 Aug 2010, 20:44

Dakal {l Wrote}:About tracks, why not keep tracks for each character?

-Ice field (already in game): Penguin, Mr ice block
-Savannah: Elephant, GNU
-Jungle (already in game): Mozilla
-Aqua track (like in transparent tube): Puffy, Gooey
-Lake: Hexley, Adium
-Clouds: Pidgin
-Castle: Nolok
-Fir forest: Wilber


I had the same Idea this is the work I started to make create character/world animation scene,
http://vimeo.com/user1575328/videos
It will be easier with character animation's work I already made ( now many charcters could be animated out of his kart )

It's an important point of making character wiki : Make characters and kart separated (problem exist for Audacity)
STK 3D animation
My work is under the licence you want
User avatar
rudy85
 
Posts: 420
Joined: 06 Dec 2009, 13:44
Location: France

Re: GUI Brainstorming

Postby Dakal » 06 Sep 2010, 20:30

Another image, i think it will make a better wallpaper than a background (too dark). I'm still searching a good idea for backgrounds.

EDIT: i made some coloured versions.
Attachments
bg_colors.zip
(6.69 MiB) Downloaded 357 times
background.png
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby Auria » 08 Sep 2010, 00:36

Hi Dakal,

I like the look of the images, but I have a couple concern :
1) there is a STK logo in the center of the screen. However, most of the time, the center of the screen is (partially) occupied by widgets. For instance on the title screen, the STK logo would appear within the icons. Same thing on the karts menu, or the tracks menu. I'm not sure this is a good idea
2) the sides are dark, the center is light; this means that dark text will be visible on the middle but not on sides, and that bright text will be visible on the sides but not in the middle. This might make things complicated
3) We must think of various screen sizes (square, 4:3, wide-screen, panoramic, etc...) How would your screens appear in wider screen sizes? If we add black borders on left and right sides, it will look strange IMO. If we scale the image and cut top and bottom, then it will also look strange :/
Image
User avatar
Auria
STK Moderator
 
Posts: 2976
Joined: 07 Dec 2009, 03:52

Re: GUI Brainstorming

Postby Dakal » 27 Dec 2010, 15:12

Merry Christmas! and congratulations for your release. :D

Time is really missing with work, family, ...
But i make a nitro-gauge. if you think it's good i'll make empty and full gauge for the game. ;)
jauge.png
nitro gauge
jauge.png (69.28 KiB) Viewed 15309 times
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Re: GUI Brainstorming

Postby Auria » 27 Dec 2010, 17:00

Hi Dakal,

I like the gauge :)
Now I'm not sure how well it fits with the speedometer but it's certainly better than what we have at this point, so I personally vote for inclusion
Image
User avatar
Auria
STK Moderator
 
Posts: 2976
Joined: 07 Dec 2009, 03:52

Re: GUI Brainstorming

Postby Dakal » 27 Dec 2010, 23:20

Here the gauge and a new concept of speedometer but it's not really done yet. I want to make buttons, like a red light for reverse gear and other things.
Attachments
speedometer.png
speedometer.png (216.01 KiB) Viewed 15285 times
gauge.zip
gauge
(300.47 KiB) Downloaded 351 times
User avatar
Dakal
 
Posts: 87
Joined: 02 Feb 2010, 15:44
Location: France

Who is online

Users browsing this forum: No registered users and 1 guest