gamercade-io / gamercade_console

A Neo-Retro Fantasy Console. Make WASM-powered, networked multiplayer games.
https://gamercade.io
Apache License 2.0
165 stars 10 forks source link

Add additional aspect ratios & resolutions #102

Closed RobDavenport closed 2 months ago

RobDavenport commented 3 months ago

I think it would be benefecial to explore a bigger variety of aspect ratios.

Currently, the console is using a 16:9 aspect ratio, but it could be benefecial to also support others such as 4:3, 1:1, or other common sizes, such as tall or portrait style ones.

This can be done a few different ways:

  1. modifying the Resolution enum to be a struct, and hold both a size (ultralow, medium, high, etc) and an aspect ratio (wide, square, standard etc).
  2. Just additing/appending more supported resolutions, like LowSquare or HighWide
  3. Opening it up to be completely custom, and have recommended resolutions via the GUI.
  4. Something completely different with an extended preset list of resolutions.

It's important to choose resolutions which scale up to pixel perfect sizes, or can display cleanly on 16:9 displays though, as this is currently the target platforms.

This would likely break older versions, but I think it's worth getting this done now as opposed to later.

RobDavenport commented 3 months ago

Some additional thoughts on this topic: The current resolutions were picked due to their ability to scale perfectly into either 1080p , 720p, or both.

The currently supported resolutions are: Resolution Width x Height Scale Ratio with 1080p Scale Ratio with 720p Total Pixels
UltraLow 128 x 72 15x 10x 9,216
VeryLow 160 x 90 12x 8x 14,400
Low 320 x 180 6x 4x 57,600
Medium 480 x 270 4x Not divisible (2.667x) 129,600
High 640 x 360 3x 2x 230,400
VeryHigh 1280 x 720 Not divisible (1.5x) 1x 921,600
UltraHigh 1920 x 1080 1x Not divisible (0.75x) 2,073,600

So with that in mind, we should target these resolutions Resolution Name Aspect Ratio Total Pixels
1440 x 1080 UltraHigh 4:3 1,555,200
960 x 720 VeryHigh 4:3 691,200
1080 x 1080 UltraHigh 1:1 1,166,400
720 x 720 VeryHigh 1:1 518,400

And work our way down.

Alternatively, we could just open up the resolutions and allow them to be input by the user, with some prevention of going over 1920 x 1080, and recommending those with pixel perfect scaling. Include useful data like aspect ratio, and some common recommended ones.

erlend-sh commented 3 months ago

Alternatively, we could just open up the resolutions and allow them to be input by the user

I think a stricter selection is better. An oft-cited benefit of developing for a virtual console is that it is helpfully constrained.

You may even consider determining a default resolution that’s already set for people who just wanna get going as quickly as possible. I reckon that ought to be either the Low or High resolution; can only be one though!

RobDavenport commented 3 months ago

The default resolution is currently the Low, 320x180 resolution @ 16:9 aspect ratio.

I think a stricter selection is better. An oft-cited benefit of developing for a virtual console is that it is helpfully constrained.

Yep exactly the reason for opening this up to discussion. Flexibility is good, but too much could let people shoot themselves in the foot and end up with huge black bars or bad scaling.. Consistency is good, but too much and everything is the same.

But I do think it would be great to add in some square resolutions, like Name Width Height Total Pixels
UltraLow 64 64 4,096
VeryLow 128 128 16,384
Low 256 256 65,536
Medium 512 512 262,144
High 720 720 518,400
VeryHigh 1024 1024 1,048,576
UltraHigh 1080 1080 1,166,400

And potentially some 4:3 ones... but there are ~12 decent resolutions we could use to cover flexibility back towards the 1920x1080 target with good scaling. Some of the iconic classics like 320x240, 640x480, would likely be OK, but 800x600, 1024x768, are too big and would end up with borders.

RobDavenport commented 3 months ago

Took a second pass at 4:3 resolutions...

Name Width Height 1080 Scaling 720 Scaling Total Pixels
UltraLow 120 90 12 8 10,800
VeryLow 160 120 9 6 19,200
Low 240 180 6 4 43,200
Medium 360 270 4 2.666666667 97,200
High 480 360 3 2 172,800
VeryHigh 960 720 1.5 1 691,200
UltraHigh 1440 1080 1 0.666666667 1,555,200

We lose those "iconic" resolutions from previous times, but make up for it with solid consistency and a similar distribution against the standard 16:9 ones.

Square resolutions can be: Name Width Height 1080 Scaling 720 Scaling Total Pixels
UltraLow 64 64 16.875 11.25 4,096
VeryLow 128 128 8.4375 5.625 16,384
Low 256 256 4.21875 2.8125 65,536
Medium 384 384 2.8125 1.875 147,456
High 512 512 2.109375 1.40625 262,144
VeryHigh 768 768 1.40625 0.9375 589,824
UltraHigh 1024 1024 1.0546875 0.703125 1,048,576

Squares are kinda a special case andI'm fine with them having borders around the edges. Also I decided against including 720x720 and 1080x1080 just to keep with the "powers of 2-ish" theme. I think in the farther future we could add something like "Exotic Resolutions" for advanced usesrs, and use things like 720 and 1080 squares, portrait resolutions, and those iconic 4:3 ones which just don't scale well these days.

Anyway, I think breaking this into a selection process of (1) Aspect Ratio, then (2) Resolution helps keep it simple. Instead of bombarding the user with 21 new resolution choices, they are presented with the default 16:9, Low, and can adjust to Square or Retro (or Classic, the name for 4:3), and are still presented with the familiar Ultra/Low/Med/High settings.

RobDavenport commented 2 months ago

Closing this as it will be resolved in #98