[DISC] Improvements to Skill Panel | Screen Sizing

[WillLem]

My maths is getting away from me with all this panel stuff tbh.

I keep thinking I've found a solution, but then I'm forgetting how tall things need to be. Is the panel 40px or 80px? Does this change as we zoom in? And what about the resolution? I very quickly get lost.

Ideally, we'd have a window that fits nicely on a 1366 x 768 screen with room at the side for streaming/speedrunning purposes. The same window should, ideally, also be proportionally about the same on a 1920 x 1080 screen.

And, the panel should have about 1-2cm of blank space either side of it when in fullscreen (as it currently does); this is my own personal preference, I'd like it if we can make this happen alongside the above (this is because I prefer to stretch the window edges almost all the way out to the side when I'm playing in windowed mode).

If better methematicians than me are happy to crunch the numbers, I'd be more than happy to look at a graphical redesign of the panel, if needs be.

In the meantime, the next release of SuperLemmix will continue with the panel the same size as it is now and the window will default to 1776 x 800*, with my apologies if you have a 720p display or prefer a 16 * 9 aspect in windowed mode. As a compromise, I'll look at tiling the background image in menus so it doesn't look so bad.


*FWIW, this is no arbitrary figure. It allows 2x zoom in hi-res (4x in low-res) for both level and panel, with no wasted vertical space on standard-height levels. It also fits very nicely within the centre of the screen on a 1080p laptop, with plenty of space at the bottom for the Windows taskbar, and at the top to access the menu bars of other applications/internet browser/desktop files/etc.


EDIT: 1332 x 600 would be the equivalent of my own preferred window size on a 720p display. Just making a note of that here in case it comes in useful later.

It's looking like we're going to have to go down the Lix route of having different panel graphics per resolution. This might not necessarily be a bad thing, though. Maybe it's long overdue. I'm happy to do the legwork to get the images we'd need.

[WillLem]

one of the reasons I modified your CPM replay icon is because the NeoLemmix introduction pack mentions this button as grey and pink.

Cool! It looks great I found a folder yesterday with a bunch of your panel icons and other graphics in as well, you've really done some great work. If you want to help with a new panel design, your input would be very welcome.

For a start, do you by any chance want to help me work on a new panel font? I'm looking at increasing the available width-per-digit from 7px (current font in SuperLemmix) to 10px (also reducing the height of each character a bit would be best as well). If you have time and want to try out a few different fonts, I'll have a look at trialling them in the next RC.

The red and blue R, icons for hatch, lems out, goal and time limit can also each be increased to 10px width, so there may be some room for improvement with those as well.

[Silken Healer]

If all skills end up being possible in the skill panel at once, will you show all skills even if they're not used and set it to "0" or blank like the original Lemmings? Even if just for classic mode?

[WillLem]

If all skills end up being possible in the skill panel at once, will you show all skills even if they're not used and set it to "0" or blank like the original Lemmings?

Yes, definitely. It would be way better than having a bunch of blank panels. I'd probably just not display a number at all if the skill isn't used in the level, to make panel browsing easier.

[Silken Healer]

Yes. I checked and it was blank not zero

[jkapp76]

I'm not completely sure if this Font will work with the height, but it's my favorite so far.

Every number is square and symetrical. No odd-shaped 6 or any off-height characters like some fonts. And it's a clean, narrow look that can be read quickly.

[WillLem]

I'm not completely sure if this Font will work with the height, but it's my favorite so far.

Every number is even. No odd 6's or any off-height characters like some fonts. And it's a clean, narrow look that can be read quickly.

Nice! Very clean-looking. Do you have any others?

I'm currently experimenting with an old computer-style font which I quite like. I like the idea of keeping it stylish and cartoony.

[jkapp76]

I've been through a few hundred. Most fonts look bad that small or won't get narrow enough.
Here's the only other one I like so far. I aimed for a more comic style with The Lemming font in mind too.

[jkapp76]

Also, since you seem to have an issue with the minimap, how about swapping it for a good old fashioned "Pan Screen" slider?

[Proxima]

I made this suggestion to WillLem in discord, but I'm reposting it here so that it becomes part of the public discussion.

The desire for more skills in the panel has made the panel wider than NeoLemmix's, so the width:height ratio is becoming a problem. To counter this, WillLem has suggested 4x zoom for the level and 3x zoom for the panel (as the default; users would still be able to set their own preferences). That doesn't work nicely for hi-res, so the proposal is to make a new hi-res panel that's 50% larger than before (i.e. 1332 x 120).

But then we have different window proportions in hi-res and low-res.

So, my suggestion is that both the hi-res and low-res panels should be 50% larger than before. In other words:

* The low-res panel is now 666 x 60. That means there is a lot more space available for the text.
* The level would have a minimum of 2x zoom, in other words, old 2x becomes the new 1x. That means the level area can be the same in low-res and hi-res, so we don't have to worry about making things work nicely in two different modes any more.
* The minimum level area is 666 x 320, slightly wider than the 640 x 320 "one-screen level" such as "Quote: That's a good level".
* The minimum overall window is 666 x 380, slightly smaller than a 16:9 ratio (which would be 676 x 380). Or we could bump it up to 676 x 380 by making the minimap slightly larger.
* Users with a 1366 x 768 screen can (just) fit the window at 2x zoom, if we're okay with only leaving 8 pixels for the title bar.

Also, since you seem to have an issue with the minimap, how about swapping it for a good old fashioned "Pan Screen" slider?

While a nice suggestion, that doesn't work for vertical scrolling levels.

[WillLem]

Also, since you seem to have an issue with the minimap, how about swapping it for a good old fashioned "Pan Screen" slider?

I thought about this one, I'd probably do it as two large arrows either side of the panel. Maybe clicking and holding could fast-pan, whilst clicking and releasing could "jump" the screen a fixed amount (the amount could even be configurable to user's preferences)

Certainly, if we don't manage to get panel + minimap sorted and working is some format that we all think is decent, this idea could work.

So, my suggestion is that both the hi-res and low-res panels should be 50% larger than before.

Right, OK. So, the new low-res panel would be half of its current 3x zoom? (So, it's current 3x zoom would become its new 2x zoom) and the hi-res panel would be the low-res panel at 2x zoom anyway.

Yes, that could work. And it means we can look at rebuilding the panel from scratch, without the constraints of current graphics/proportions, etc. Tempting prospect, but a lot of work for a program that currently has a very small audience. SuperLemmix 1.1.1 has only had 2 downloads so far, and I'm pretty sure one of them was me!

Or we could bump it up to 676 x 380 by making the minimap slightly larger.

Yes, let's do this. Getting the 16*9 is worth it if it's as easy as making the minimap bigger.

Users with a 1366 x 768 screen can (just) fit the window at 2x zoom, if we're okay with only leaving 8 pixels for the title bar.

I'd suggest that if we're making a new panel, we should make one with slightly shorter buttons and/or a slightly shorter font, so this would allow more level area without compromising the title bar. If we're making the effort to sort all this out, we might as well make it fit nicely on the smallest standard screen size.

[WillLem]

OK, after a lot of thought about this, I've decided that the panel will be drawn to 450 x 40, doubling to 900 x 80, tripling to 1350 x 120, and quadrupling to 1800 x 160.

It will feature:

<<< -/+ RR 14 Skills Paws, Rewind, FF, Restart, Nuke Squiggle (hidden CPM button!) Minimap >>>

Instead of going off in-game resolution settings, the biggest possible panel will always be chosen based on the user's screen/window size, to allow for more dynamic resizing of the game window regardless of level resolution.

Rather than a "Panel Zoom" dropdown, I'll replace this with a "Window Size" dropdown to allow users to snap their window to the recommended settings for each panel (dynamic resizing will remain effective, of course).

OK, now to get cracking on it...

[WillLem]

Working notes.

The new panel code will have to look something like this:

New function "ScaleFactor"

If window/screen <= 450, ScaleFactor = 1
If window/screen <= 900, ScaleFactor = 2
If window/screen <= 1350, ScaleFactor = 3

For ScaleFactor = 1, use panel450.png
For ScaleFactor = 2, use panel900.png
For ScaleFactor = 3, use panel1350.png

(each panel graphic will have the icons pre-drawn onto the graphic itself rather than overlayed; there will be an unused blank button graphic in gfx/panel to help users with designing their own buttons)

procedure DrawPanel;

Step 1: Lay down the panel.png
Step 2: Draw the correct skill icons
Step 3: Make clickable areas
Step 4: Assign functions to the clickable areas
Step 5: Draw the minimap
Step 6: (use existing Minimap code for functionality)

(All code for drawing the panel will be multiplied by the ScaleFactor)

---

(To further add to the confusion, I'm looking at getting RR/SI onto one button; if this proves too difficult/not worth it, then it will remain as 2 buttons)

Then, there will need to be code to multiply the (correct) panel if the screen is a certain size; not sure exactly how to do that yet but there probably is a magic formula for the purpose, maybe even in the existing code

[WillLem]

Right, after letting this one sleep for a week, I've come to yet another decision about it.

Basically, I don't think it's worth the effort of managing 3 different sized panels. Bug potential and other programming headaches aside, it means that users who want to customise their panel have to do so 3 times. This is not very user-friendly, and undermines one of my favourite things about NL/SLX.

Meanwhile, whilst thinking about all of this, I noticed that the existing code can handle resizing graphics and clickable areas - in the menu screens!

So, I'd much rather go down the route of hard-baking a single-size panel to the bottom of the screen, and have it dynamically resize with the window. This way, the user can set the window size to whatever they like, and the panel will simply resize with it. From what I can see, NL has a minimum screen size which is smaller than the menu's background image, so it is absolutely capable of downscaling as well as upscaling. I wonder whether this code can be applied to the panel as well. If it can, then I'd say we have our solution.

Furthermore, given the multiple scaling solutions (namely zoom, bilinear filtering and pixel-art upscaling), I wonder if it would be possible to employ all 3 depending on how big the resizing is (so, if exactly double then zoom/pixelart, if somewhere in-between then bilinear). I also wonder if it would be possible to work in an even better scaling algorithm.

[WillLem]

I'm a step closer to achieving what I originally set out to achieve with the panel; what do we think of the different coloured buttons for RR, Skills, and General Functions?

Rewind works, but is very buggy at the moment:



I'm currently locating all code which might be intertwined with the panel zoom; this will all need to be changed to allow it to dynamically resize with the window. Watch this space.