Sauerworld Forum

Minimal / Flat UI Theme and HUD

pix

  • **
  • 85
  • +9/-1
    • A Cube 2: Sauerbraten Knowledge Base by pix
Minimal / Flat UI Theme and HUD
« on: August 27, 2014, 09:07:35 pm »
Here's my minimal UI & HUD mod I made a year ago (and originally published on Quadropolis)!



This is a re-styling of Sauerbraten. I modified both menu design and layout, server browser, plus the game HUD. Currently, some icons are still missing, such as red, blue and green icons for all playermodels except for ironsnout, mainly because I don't need them.

I also changed some color values in the source code and added a method to draw the one-line input field you see in the screenshot. The modified files are included, so if you want to, replace the original ones (after backing them up) and recompile as usual (on linux: make && make install in /src).

The current version requires you to recompile, unless:
  • you use the Community Edition client, which already includes this UI mod by default, or
  • you don't mind the flag blips on the radar to be shown slighlty off the flag base blips ot the right... ;)

In case you compile the source code of pisto's sdos-test client, do not just copy-paste my source files into the src folder of those clients! My source changes are made on top of the vanilla source of Sauerbraten Collect Edition! You can fix the flag blips for pisto's sdos-test client (or other clients based on sdos-test) like this:
Replace the following line in the drawblip() funtion in src/fpsgame/ctf.h:

Code: [Select]
xoffset = flagblip ? -2*(3/32.0f)*size : -size,
with:

Code: [Select]
xoffset = -size,
All other changes are not compatible with the source code of sdos-test, but you can have a look at the Community Edition source code which has those changes merged.

Some more pictures are here: http://imgur.com/a/foTYL#0

For a version history (up to update 5) and more information check out the Quadropolis node.

Update 6: http://sauerworld.org/forum/index.php?topic=3.msg71#msg71

Update 7: http://sauerworld.org/forum/index.php?topic=3.msg1456#msg1456
« Last Edit: April 12, 2015, 06:54:17 pm by pix »

alebrije

  • *
  • 16
  • +3/-0
    • JuGadores Latinos eXtremos
Re: Minimal / Flat UI Theme and HUD
« Reply #1 on: August 31, 2014, 08:01:48 pm »
nice work pix, that gui looks 'clean'.
Verba volant, scripta manent

piernov

  • *
  • 4
  • +2/-0
Re: Minimal / Flat UI Theme and HUD
« Reply #2 on: September 01, 2014, 06:34:21 pm »
Like it too, reminds me a bit of "SauerEnhanced".

Doko

  • *
  • 46
  • +3/-0
Re: Minimal / Flat UI Theme and HUD
« Reply #3 on: September 01, 2014, 06:42:27 pm »
I had to compare with the original and i noticed that the HUD are very different. I remember this menu's style... maybe is the sauerenhanced.

star

  • *****
  • 300
  • +18/-3
Re: Minimal / Flat UI Theme and HUD
« Reply #4 on: September 01, 2014, 07:12:41 pm »
It was once the first commit to the ComEd, but we had to scrap it. I also think it's nice, if you like to see this built into the ComEd, issue a request!

pix

  • **
  • 85
  • +9/-1
    • A Cube 2: Sauerbraten Knowledge Base by pix
Re: Minimal / Flat UI Theme and HUD
« Reply #5 on: September 01, 2014, 08:17:19 pm »
I had to compare with the original and i noticed that the HUD are very different. I remember this menu's style... maybe is the sauerenhanced.

Possible, but I actually made all the assets myself / based them off shapes and circles on the internet :)

I just updated the .zip file with the following features:

- radar blips (everything you see on the minimap)
- a few code changes
- small changes in color palette
- adjusted digit font for numbered bases to fit the colors

frosty

Re: Minimal / Flat UI Theme and HUD
« Reply #6 on: September 01, 2014, 08:23:25 pm »
It reminded me of this older minimal UI mod, which I currently use and love.



http://quadropolis.us/node/2261
« Last Edit: September 01, 2014, 08:26:20 pm by frosty »

Chaos

  • *
  • 13
  • +1/-0
Re: Minimal / Flat UI Theme and HUD
« Reply #7 on: September 03, 2014, 02:53:54 am »
I really like this; clean and simple. Have you considered 'rounding' the square edges of the GUIs?

Acuerta

Re: Minimal / Flat UI Theme and HUD
« Reply #8 on: September 03, 2014, 09:58:25 am »
gui background could use more transparency imo

Cocoa

  • **
  • 54
  • +4/-0
Re: Minimal / Flat UI Theme and HUD
« Reply #9 on: September 03, 2014, 11:12:08 am »
Acuerta, I think this could even be implemented to be adjustable via a variable. Haven't tried it so far, though.

pix

  • **
  • 85
  • +9/-1
    • A Cube 2: Sauerbraten Knowledge Base by pix
Re: Minimal / Flat UI Theme and HUD
« Reply #10 on: September 03, 2014, 12:10:43 pm »
Have you considered 'rounding' the square edges of the GUIs?

Nope, but to be honest I don't think it would look better :P

gui background could use more transparency imo

Mhm, haven't tried it. I'd be careful though with the white background, you need a certain contrast provided by the guiskin.jpg to keep white text readable (same with bright maps/skyboxes). I have a couple to-dos left anyway:

  • replace data/cube.jpg
  • redo/remove "campaigns" menu
  • maybe remake radar blips in larger resolution / vectors and scale down OR add antialiasing to current blips
  • make source code patches for SDL2 client (current flag blips are drawn next to flag bases due to hardcoded xoffset in fpsgame/ctf.h that assumes flag poles point to lower right corner >_<)
  • ...

I attached the GIMP .xcf files in case someone wants to play around with this stuff! All the GIMP stuff is by me and CC-BY-4.0 licensed unless otherwise specified in a readme.txt or license.txt.
« Last Edit: April 12, 2015, 06:57:21 pm by pix »

pix

  • **
  • 85
  • +9/-1
    • A Cube 2: Sauerbraten Knowledge Base by pix
Re: Minimal / Flat UI Theme and HUD
« Reply #11 on: April 12, 2015, 06:51:26 pm »
Update #7: Added CC-BY-3.0 license note for media files.