Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

responsive: compute font size from screen size #1106

Merged
merged 4 commits into from Mar 3, 2019

Conversation

Projects
None yet
4 participants
@illwieckz
Copy link
Member

illwieckz commented Feb 14, 2019

This is an attempt to set default size relative to screen size.

Default libRocket font size is 12px, see StyleSheetSpecification.cpp:246:

	RegisterProperty(FONT_SIZE, "12", true, true).AddParser("number");

Since FullHD is the most common screen resolution today the game was designed against that resolution, so we must compute a default font size that is 12px on FullHD screen.

That is the compute:

font_size = min(width, height)/90

This PR is considered WIP because it relies on r_customWidth/Height cvars, it would be better to read the screen size directly, especially since that's possible those values are not correctly set if not custom size is set (does it exists anymore, though?). So I need a way to get a proper screen size at this place of the code, other wise it's ok.

Use this branch UnvanquishedAssets/unvanquished_src.dpkdir#6 on asset side (required to render it properly).

See also DaemonEngine/Daemon#161 for similar change on engine side (not required).

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 14, 2019

This makes the elements displaying the same way on SVGA, FullHD, QHD and 4K screens:

SVGA (minor differences because of 4:3 ratio when others are 16:9):
unvanquished responsive SVGA

FullHD:
unvanquished responsive FullHD

QHD:
unvanquished responsive QHD

4K:
unvanquished responsive 4K

An additional cvar may be added do scale down the default font size for people who have really large screen and want a smaller font.

@illwieckz illwieckz force-pushed the illwieckz:responsive branch from 30d39ad to ca99395 Feb 15, 2019

@illwieckz illwieckz changed the title WIP: responsive ui: compute font size from screen size responsive: compute font size from screen size Feb 15, 2019

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 15, 2019

So, I added a commit to switch circlermenu radius from px unit to em unit. In fact it's a pseudo-em as it uses the em size of the root document, not the inherited one. This enables to make responsive circle menus.

I think the code is ready on this end. We may do the same on game consele but I guess it's an engine thing.

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 15, 2019

Responsive circle-menu and hud:

SVGA (minor differences because of 4:3 ratio when others are 16:9):
unvanquished responsive SVGA

FullHD:
unvanquished responsive FullHD

QHD:
unvanquished responsive QHD

4k:
unvanquished responsive 4K

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 15, 2019

note that there is two kind of things I failed to made responsive

  • cursor, for whatever reason the game expects px.

  • check boxes and radio boxes, as they are pixmaps containing all their states (unchecked, checked, disabled…), and those states are set in rcss as absolutes coordinates. Perhaps we would need a game hack for this: loading the pictures using pixels then rescaling before rendering…

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 15, 2019

This is a showcase for the cursor and check box problem, you'll also notice that the slider bar length has fixed size too, this size looks to not be set in rcss, perhaps in game, or default size.

Otherwise you'll notice that except those known issues the menu is properly scaled.

SVGA (minor differences because of 4:3 ratio when others are 16:9):
unvanquished responsive SVGA

FullHD:
unvanquished responsive FullHD

QHD:
unvanquished responsive QHD

4K:
unvanquished responsive 4K

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 15, 2019

For the range sliders, it was just using the default width because it was undefined, once a width is set these input are properly scaled. 👍

@illwieckz illwieckz force-pushed the illwieckz:responsive branch from ca99395 to cd958f5 Feb 16, 2019

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 16, 2019

I managed to get the checkbox properly scaled, the only remaining issue now is the cursor… it looks like libRocket cursor only works with px or pt, so I don't know how to scale it…

@illwieckz illwieckz force-pushed the illwieckz:responsive branch from cd958f5 to 0d38bdb Feb 16, 2019

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 16, 2019

OK, I got the cursor scaled by making the engine rewriting its size.

I also removed the hacky code that was adding an extra space above the main menu only when there was enough space (that hacky code was read cg_customHeight). Well, the hack space is there but always there whatever the screen size since everything else scales.

Edit: don't mind the wrong horizontal dark lines added by GitHub on jpeg

VGA:
unvanquished responsive VGA

SVGA:
unvanquished responsive SVGA

XGA:
unvanquished responsive XGA

UXGA:
unvanquished responsive UXGA

SXGA:
unvanquished responsive SXGA

QSXGA:
unvanquished responsive QSXGA

HD720 (HDReady):
unvanquished responsive HD720

HD1080 (FullHD):
unvanquished responsive

QHD (~2K):
unvanquished responsive QHD

UHD (~4K):
unvanquished responsive UHD

LOL

CGA (not the CGA colors, though):
unvanquished responsive CGA

unvanquished responsive CGA

unvanquished responsive CGA

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 16, 2019

The console still needs to be scaled:

unvanquished responsive

unvanquished responsive

@illwieckz illwieckz force-pushed the illwieckz:responsive branch 2 times, most recently from f88d880 to 92020df Feb 16, 2019

illwieckz added some commits Feb 14, 2019

responsive: circlemenu radius now takes pseudo-em
pseudo-em because it's the em value for the root of the document, not the inherited one
responsive: compute cursor size from screen size
rewrite the size set in cursor.rml

@illwieckz illwieckz force-pushed the illwieckz:responsive branch 6 times, most recently from efc4deb to a18a6e2 Feb 16, 2019

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 16, 2019

This is how the console looks now:

XGA:
unvanquished responsive XGA

HD1080 (FullHD):
unvanquished responsive HD1080

UHD (~4K):
unvanquished responsive UHD

People with very large screens can still leverage their big screen to display more stuff in console by setting a smaller font size by tweaking cl_consoleFontSize (using seta and entirely restarting the engine).

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 16, 2019

While I was at it, I fixed the boring displacement of cells in datagrid.

before (see the ping value under the ping header, same for other columns):
unvanquished responsive

after:
unvanquished responsive

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 16, 2019

I uploaded a backport dpk on my server, people can test this by joining. It features all the ui scaling changes I've done but the console one (since this one requires a modified engine).

I just noticed I forgot to scale one text (see the bottom left one):

unvanquished responsive

otherwise it looks good.

@illwieckz illwieckz force-pushed the illwieckz:responsive branch from a18a6e2 to 4e3ef07 Feb 16, 2019

@illwieckz illwieckz force-pushed the illwieckz:responsive branch from 4e3ef07 to 4156ab6 Feb 17, 2019

@DolceTriade

This comment has been minimized.

Copy link
Member

DolceTriade commented Feb 17, 2019

Why is the "g" on ping cut off? Was it always like that?

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 18, 2019

@DolceTriade what do you mean?

Btw, don't trust what you see on GitHub, it looks like they recompress pictures badly at a point they introduce artifacts, or perhaps it's my browser I don't know, but I clearly see artifacts there that does not exist in original pictures. If you notice something weird, click on pictures to be sure.

@slipher

This comment has been minimized.

Copy link
Contributor

slipher commented Feb 18, 2019

I tried it on the server and found the cursor was invisible at all times. Also the circle menu looked like this:

unvanquished_2019-02-18_154228_000

Well, maybe supporting 900x700 was not in the design goals... I don't see why the cursor should disappear though.

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 19, 2019

@slipher were you running a local cgame (shared lib)?

cursor being invisible and this circle menu issue are both expected while loading assets from responsive branch without running game code from responsive branch.

You clearly see that the circle menu things are correctly placed on a circle but that this circle has a very small radius (i.e. the scaling of this radius is not done).

Edit: you may connect with a vanilla client, the only thing not tested while joining my server is the console thing that is an engine thing.

Edit: in fact I'm not sure why the cursor would disappear, some early experiments made it disappear but current code may at least render it with a wrong size… don't know, but in anyway be sure to run a modified game code, either the one downloaded from server, either one you build

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 19, 2019

Custom ratios like 9:7 ratio may produce not very good looking results but must work, here is 900×700 (vanilla 0.51.1 unvanquished client connected to my server):

900×700

900×700

@slipher

This comment has been minimized.

Copy link
Contributor

slipher commented Feb 19, 2019

Yep, that's what happened. That's a bug: I shouldn't be able to load a cgame DLL when connecting to a server with a custom cgame.

Anyway, it works, great job!

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 19, 2019

I just noticed I made a mistake while doing the latest screenshots, I was not on my server so it was how it looked before on 9:7 ratio. 😁

That is how 9:7 ratio looks on responsive branch:

unvanquished responsive

unvanquished responsive

So, it looks fairly better.

So, it made me wanting to test more weird stuff that exists, but that exists like very wide screens like those curved ones that literally put the resolution of two screens side to side:

Here is UW-UHD (3440×1440, 43:18):

unvanquished responsive UW-UHD

unvanquished responsive UW-UHD

@mole99

This comment has been minimized.

Copy link

mole99 commented Feb 21, 2019

I've got one of those weird curved screens (3440x1440), it seems to work great!

Before:

bildschirmfoto vom 2019-02-20 15-29-30

After:

bildschirmfoto vom 2019-02-20 15-32-09

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Feb 22, 2019

Great! 💯

So, next release will be 4K ready and curved screen ready so we can put some catch words in release note! 😁

@slipher

This comment has been minimized.

Copy link
Contributor

slipher commented Mar 1, 2019

Any reason not to merge now?

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Mar 2, 2019

Yes, because of the mistakenly split "Resume action" string and menu width being shorter when there is no slider. Had to even find time to report it. 😁

responsive

responsive

@illwieckz illwieckz force-pushed the illwieckz:responsive branch from 4156ab6 to 81ef853 Mar 2, 2019

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Mar 2, 2019

OK, so I still don't know why it's a bit larger on the second case, but it now looks ok in any case:

responsive

responsive

@illwieckz

This comment has been minimized.

Copy link
Member Author

illwieckz commented Mar 3, 2019

let's go!

@illwieckz illwieckz merged commit f29e78d into Unvanquished:master Mar 3, 2019

2 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.