search

TeamPorcupine / ProjectPorcupine

Project Porcupine: A Base-Building Game...in Space!
GNU General Public License v3.0
484 stars 279 forks source link

[WIP] UI Redesign #956

Closed alexfriesen closed 8 years ago

alexfriesen commented 8 years ago

I started working on a new UI Design.

I am aiming for a slim sci-fi look.

This is the current state of the main menu. what do you think?

pp_menu_closed pp_menu_open

vogonistic commented 8 years ago

That is pretty slick!

Tranberry commented 8 years ago

looks good, but how big are these buttons?

alexfriesen commented 8 years ago

The current menu will be max 90px in hight and the width depends on items in the menu ;) A single button is about 98x75px.

Yurgeta commented 8 years ago

this was something i was going to suggest / mock up in the near future because the amount of text buttons is growing fast its starting to clutter the screen a little so using picture representation for things now could save us some trouble later on.. maybe add a tool tip to the bottom so it gives the name above or something so people know what it is if they cant figure out the pictures

alexanderfast commented 8 years ago

Doesnt it kinda clash with the pixel art? Its so smooth. Hard to tell.

Ajapeu commented 8 years ago

@Mizipzor It might conflict a bit. That said... desperately needed, and getting to a more organized slick UI is really going to help when new features start coming in. Probably needs to happen now anyway.

@alexfriesen This looks really nice.

Tranberry commented 8 years ago

IMO that's pretty huge on any screen with less than 1080p resolution. It would be nice if it could scale..

alexfriesen commented 8 years ago

Thanks for the feedback. I made the borders thicker and less transparent.

With the thicker lines I would be possible to scale the menu down.

Here the reworked bottom menu pp_menu_main_closed pp_menu_main_open

The Options menu: pp_menu_options

And the build/furniture selection: pp_menu_build_selection

Full scene: pp_menu

Dormanil commented 8 years ago

Now all that's left is a font that feels proper in this look and feel, but I definitely enjoy the slickness of this UI.

vogonistic commented 8 years ago

Hey @alexfriesen, have you seen the #art room in Discord?

Tranberry commented 8 years ago

here is a link #art

dustinwloring1988 commented 8 years ago

Nice, cant wait for it to be done.

Raketfart commented 8 years ago

Oh man, I'd loove for this to be in the game. If we're going for a non-pixelated UI, I like this direction. I have a couple of thoughts. Whenever the gui shows text, I think we need to use elements that can stretch - maybe not 9 sliced, but at least easily stretch along x for localized text. Just so we avoid having to redo art for every size of dialogue box.

Maybe we could use less saturated colors, and some subtle gradients/glows can make this feel a bit more sci-fi. I made a crude example on top of yours, to show what i mean. modified

alexfriesen commented 8 years ago

Great Ideas!

I would love to use some gradients, but I don't really know how to do it in Unity when everything needs to be able to stretch. But I'm going to investigate in your glow idea.

Tranberry commented 8 years ago

Will you make UI elements for others to make their own UI for features currently not in the game?

alexfriesen commented 8 years ago

I could do that, if i have some time left.

TomMalbran commented 8 years ago

This looks great. For windows we could also have some transparency, while trying to keep the text readable.

alexfriesen commented 8 years ago

BTW: I think the Settings Button can go to the Options Menu

TomMalbran commented 8 years ago

@alexfriesen I agree.and if we keep adding test maps, maybe we need a debug/test dialog that can be open from the options dialog.

vringar commented 8 years ago

@alexfriesen would you mind creating a [WIP] PR so others could join/help/have a look at it?

kd7uiy commented 8 years ago

How is this going so far? I only ask because it looks like we are getting yet more furniture, and this seems to be required to keep them visible for the resolution impaired.

alexfriesen commented 8 years ago

Hi, this is still happening ;-) I have been very busy lately and didn't had a lot of time to work on this. In #999 I started with the settings menu.

The construction menu should sit at the left corner of the screen and contains a scrollable list of all furniture.

Feel free to start working on some of the pieces, I think the screenshots will show how I imagined the UI to look like.

sboigelot commented 8 years ago

We can come up with a temporary ui fix if we need. It would be easy enough to have 2 columns until @alexfriesen PR is ready

bjubes commented 8 years ago

see #1500 for UI redesign for version 0.1 -> 0.2