[PROPOSALS][PLAYER] New menu design

Started by namida, June 04, 2020, 04:17:18 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

One line or two lines for the menu? (See reply #144)

One line
3 (30%)
Two lines (spaced)
7 (70%)
No preference
0 (0%)

Total Members Voted: 10

WillLem

Thanks, namida!

I've tested the unfiltered DOS background and it does look way better than the current "blurred" version in terms of colour depth, clarity and resolution. However, like all of the other graphics derived from the DOS version it also has that horizontal stretching thing going on.

Unfortunately, I'm not sure of the exact ratio to which the graphics are stretched, but with a bit of trial and error I think making it 200px wide rather than 320px seems to be about right (I'll have a look at the logos at some point and try to get a ratio to work to for producing a final version).

In the meantime, here's a version at 200 x 104 and another at 400 x 208. The latter seems to fit a little bit better with the current menu generally, the former looks more hi-res.

All resizing has been done using Nearest Neighbour to avoid blurring. Resizing from 320 to 200 did result in some pixel loss, but due to the rubbled nature of the graphic it looks OK anyway.

Dullstar

I think I figured out the stretching: if I'm not mistaken, I believe what's happening isn't that the DOS version isn't stretched - rather, the Amiga version is stretched vertically, but some of the graphics weren't resized to accommodate for the DOS version's lack of stretching. I'm making the assumption that the Amiga version's appearance is intended.

Hopefully I'm not being fooled by emulator defaults here, since I don't have an actual Amiga to reference from, but everything seems correct. I believe the zoom is 100%, i.e. the emulator shouldn't be changing how big the pixels are.

First, screenshots of the Amiga version. In menus, the "pixels" of the image appear to be 2 pixels tall in all UI elements, while gameplay element (lemmings, terrain, objects) "pixels" are 2x2 pixels.
Spoiler



Here is the DOS version main menu:
Spoiler

Here is the Amiga version at 100% x 50% (i.e. undoing the suspected vertical stretch)
Spoiler

And here's the DOS version at 100% x 200% (i.e. applying the same stretch on the Amiga version to the DOS version)
Spoiler
This looks a lot closer to the Amiga version - even the font looks like it's probably the same, just with fewer colors.

The background image from the DOS version is therefore 320x104, but was most likely intended to be drawn at 320x208 when it was created.

I'm mostly neutral (leaning towards no) on whether we should resize the background in this way. Reasoning: the background and font don't have anything obviously wrong with them in terms of their sizing, even though both were likely originally intended to be drawn with the stretch.

A version of the background with this stretch applied is attached.


namida

Had a quick look at potential menu and font sizing.

The font is currently 16px tall. I did some quick testing, and - using a very quick-and-dirty resize - it actually looks a lot nicer at 18px already. (Or technically, 17px, as the "18px" measurement includes the blank row of pixels that the current version also has, for spacing between lines.) The blank line may not be needed depending on the exact design of any new larger-size font; in particular, if the top and bottom rows consist only of semi-transparent pixels, the gap is probably unnecessary.

For an 18px tall font, the internal resolution of the menu screens needs to be at least 450 pixels tall. This would correspond to an internal resolution of either 720x450, if keeping the existing proportions, or 800x450, if switching to 16:9. Both of these work out exactly, they are not rounded.

If we wanted to go to 19px tall for the font, we'd need at least 475 pixels tall. For 16:9, the smallest size we could thus use (without one of the dimensions being rounded rather than an exact 16:9 ratio) is 848x477, or 864x486 for one where the numbers "feel" nice. For existing proportions, 768x480 is the smallest and feels nice enough.

I don't think there's much need to consider 20 and higher, but if people do think it's worthwhile let me know and I'll crunch the numbers.

I think it would be very useful to decide on overall screen sizing + font sizing before going much further with anything else (other than the level select menu).
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

Dullstar

I'd suggest the following size-related changes:

- Change resolution to 16:9
- Increase the height of the cards and logos, preferably by 2x (this would allow drawing the DOS-derived ones in what was most likely their originally intended aspect ratio based on my previous post). Do not automatically stretch old cards to fit in this size; center them in the allotted space instead. Leave the width as-is.

I'm not sold on the font size change, but I'm also generally not a fan of upscaling that is non-integer and/or non-nearest neighbor, which makes an 16->18 pixel change bad, IMO. But increasing the font size to 32 pixels, or drawing it at 16x32 like the Amiga version would probably take too much space.

namida

QuoteI'm not sold on the font size change, but I'm also generally not a fan of upscaling that is non-integer and/or non-nearest neighbor, which makes an 16->18 pixel change bad, IMO. But increasing the font size to 32 pixels, or drawing it at 16x32 like the Amiga version would probably take too much space.

Stretching was purely for the purposes of a mockup. I'd do something better quality - Amiga rip if suitable + obtainable, or newly-made graphics, or at least stretched with purpose-made code. I'll also note that in the sample image, the bottom couple of pixels are cut off due to how NL works currently (ie: specifically expects a 16px tall font); this would of course not be the case with a proper size change.

If I can think of a decent idea on how to write some upscaling code here that works well for arbitrary sizes, I'll gladly produce some better samples.
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

Dullstar

While the upscale that you provided had some issues, my general views on upscaling means it would be difficult to create an 18 pixel version of the current font that I would find decent looking (I have very strong opinions about upscaling pixel art), though obviously it's possible others in the community might not care as much.

The Amiga font is exactly twice as tall as the dos version font: letters are up to 15 pixels tall in DOS, and 30 pixels tall in Amiga. That might be a large difference, but I don't have a problem with it if we can make it work. I'd say it's likely that the Amiga version stores them as 15 pixels tall internally, however, as the smallest image components in the Amiga UI graphics appear to actually be 1x2 pixels instead of 1 pixel. Thus, the main benefit of extracting the font graphics would be the recovery of the lost color information between the Amiga and DOS ports (the Amiga version's shape can likely be reproduced perfectly by stretching out the current one vertically 200% with nearest neighbor).

Zoomed into Amiga text sample from menu with overlain pixel grid

WillLem

Quote from: Dullstar on August 13, 2020, 01:51:30 AM
I think I figured out the stretching: if I'm not mistaken, I believe what's happening isn't that the DOS version isn't stretched - rather, the Amiga version is stretched vertically, but some of the graphics weren't resized to accommodate for the DOS version's lack of stretching. I'm making the assumption that the Amiga version's appearance is intended.

Agreed, it certainly does seem to make more visual sense. The mockups also look proportionally identical when resized vertically by 50% each way.

I'm very much in favour of stretching the DOS background vertically (so that it's 320 x 208) and using that one - the version Dullstar posted looks great.

Font-wise, namida's 18px version looks OK but it would obvs be good to see it without the bottom line missing before making any solid decisions. The Amiga font looks too tall if anything, so somewhere between the two would be the sweet spot.

namida

Earlier on Discord, one user asked about the title length limit. This of course is 40 characters, but it raises two relevant points here:

a) Any new screen size must also be capable of displaying at least 40 characters horizontally. Since there's no proposal to make text wider, but there is a proposal to move to a widescreen size (or at least to increase the size), this is very unlikely to be a problem, but should be noted.

b) Should the screen size increase, the title length limit would be increased accordingly too (unless there is very strong opposition to this).
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

namida

Here's a somewhat quick-and-shitty mockup of what a 16:9 menu (specifically, 864x486) might look like. This includes 19px tall font.

Note that again - it's quick-and-shitty, so the font / some of the graphics are stretched. The logo is specifically not stretched, as I envision using a "center it in the allowed area" system that allows for any size up to the maximum, rather than only one exact size.

Also, yeah, I accidentally used the old color text graphics. Just to be clear - the "Amiga Blue" color will be used in practice.
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

WillLem

This definitely looks better, size and layout-wise! I'm guessing that the game itself will also allow more of the level to be shown within the window as a result of this change...?

IchoTolot

With the 16:9 layout it the 1 row doesn't look that bad because of the additional space. I assume talismans are integrated in the level select window then as here is definitly no place for a 6th panel.

I am still interested to see a 2 row layout though to have a comparison.

The main thing I care about here is that existing panels/logo art still works and looks good.

namida

Quote from: WillLem on August 24, 2020, 03:52:25 AM
This definitely looks better, size and layout-wise! I'm guessing that the game itself will also allow more of the level to be shown within the window as a result of this change...?

In-game will not be affected in any way - unless you count a very indirect way, namely, that the window will be bigger for some people because the default size will be bigger. However, any window size that's valid now will remain valid (just possibly not default), and in-game will work exactly as it does now with regards to using as much space as it can.

QuoteThe main thing I care about here is that existing panels/logo art still works and looks good.

Most panels exist as a single entire image, which would mean they aren't the normal height (I have increased the height here, by about 20%) if existing ones are used. This isn't an auto disqualification, but it might end up looking awkward, especially if any of the new panels are entirely new.

Rank graphics (not the whole sign, but the per-rank labels) are a special case where "keep existing height and center it" should not look too awkward and is likely a viable option.

Logos will work without modification, though redoing them in a slightly larger size might end up looking nicer (due to using more of the available space).


And of course - this is just a mockup, it may be subject to change. I'll make a two-row mockup later, although I have to say I'm quite liking the one-row setup for widescreen.
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)

zanzindorf

I have a suggestion for the main menu in the NeoLemmix player. The text is a little inconsistent in style when comparing the difficulty meter and the other elements like the "Play" and "Select Level" billboards, so I tried to redo the signs so they match. Also, I thought it would be neat to redesign the NeoLemmix logo to resemble the original style a bit more, which would also improve the overall consistency. I also took a crack at a new talisman design, which displays on the main menu and the talisman menu.

Changes:
* New logo
* New play billboard (text modified from original DOS menu).
* New level select billboard (text modified from original DOS menu).
* New settings billboard (Added a shadow to the gears and added a music note similar to the one from the original DOS menu).
* Added a shadow to the text on the Difficulty Step billboard.
* New talisman graphics and new talisman bilboard.
* New quit billboard (made from scratch because the letters weren't present in the original DOS menu).

I will attach the new graphics so anyone can mess with them if they want. Also, if you want to suggest changes to my designs, I'd be happy to work on them more! :thumbsup:

Comparison:

Original Menu (V12.06.05)

Quote

New Menu (V12.9.4)

Quote



zanzindorf

Late to this conversation, been reading through what's been shared, apologies if I'm missing anything.

After reading comments on cursors, I think my preference would be:

1: We use the existing cross hair. 3D Lemmings did this, and it didn't look out of place at all.
2: We use a standard pixel cursor. I think I prefer a pixel cursor over an HD cursor simply for stylistic consistency.
3: We use a lemming hand. Lemmings 3 and Paintball used hands. So did Lemmings 2, but that one didn't look great imo.

Below is a preview of what the three options could look like (The large red numbers highlight where the cursors are). Obviously the cross hair is from the game, the pixel cursor is something I drew real quick (tried to match the style of the text on the billboards), and the lemming hand is from Lemmings Paintball (but recolored to match the other lemmings on this menu).

This example is based on the menu changes I posted earlier. Also exampled here is how the menu buttons could look if the cursor was hovering over (note the yellow outline). This particular yellow outline makes the menu button graphic slightly larger than it's default size, so I don't know if that's a problem, but it does look kinda nice. Programming wise, you could just have two images per each button, one for normal, and another altered version for when the mouse is hovering over it.

In addition, we could have the cursor change colors or change animation while the cursor is hovering over a button (like the hand gives a thumbs up or something). Not only is this for looks, but it could also accommodate for older level packs which have custom menu buttons, but do not have the "active" version of the button. This way, if there is no highlighted version of the button to display, the game will still indicate when the cursor is hovering over a button.

Sorry if this has already been discussed. Hopefully this is somewhat helpful. :P




namida

The outline effect would not necesserially need a graphic file at all, given that it's a single, constant, solid color - it's probably possible to either do the entire outline as a programmed effect, or else to programatically generate the outline graphic (when loading the menu screen) based on the panel itself's graphic. Perhaps an algorithm would be needed to determine the optimal color against certain backgrounds, though - or alternatively, it could "color shift" similar to what objects do in Clear Physics Mode so it's always going to be visible at some point or other.

The logos / graphics do look nice, though one thing of concern is that NeoLemmix is trying to weaken the "oh hey it's like DOS lemmings" link. With that being said - the ideal goal is that it's similar enough to have the overall feel, but different enough to make it very clear that it isn't intended to be a direct clone (be it approximate or exact). I'd be interested to hear how other people feel - I'm quite open to adopting graphics like zanzindorf's (though first would have to see how well they fit with, if applicable, a larger panel size) if there's general support for them.
My projects
2D Lemmings: NeoLemmix (engine) | Lemmings Plus Series (level packs) | Doomsday Lemmings (level pack)
3D Lemmings: Loap (engine) | L3DEdit (level / graphics editor) | L3DUtils (replay / etc utility) | Lemmings Plus 3D (level pack)
Non-Lemmings: Commander Keen: Galaxy Reimagined (a Commander Keen fangame)