This is a cross post from the IRKALLA topic
. I thought it might be relevant here too.
Today I will tell you about...
Our Pixel Rules
As always, if someone has any suggestions to improve the amount of used screen space without penalizing the "balance", I would be very keen to know about them.
Super interesting read, I'm dealing with the exact kind of problem you have :D. We came up with almost the same solution
Our game renders to a small "screen texture" that is then zoomed and rendered to screen. Some other games scale up pixelart by scaling up each individual
sprite, which allows "bigpixels" to overlap eachother halfway. This also allows you to rotate individual pixels
, which Crawl does quite effectively. This all can result in smoother motion (especially in regards to the f@!$ing paralax jiggles
) but we decided against it. Crawl's rotated bigpixels.
Rendering to a low-res texture has performance benefits, since we're actually
rendering only the 512x256
pixels in our screen texture. Like you guys, we want "sharp" pixels, which means we can only upscale 1x, 2x, 3x, ... (Though there is a nuance here which gives a lot of flexibility! I'll get back to that later 
.) We define a minimum horizontal region of this screen texture that we always want to show, then we zoom up to the highest integer zoom factor possible that still shows this whole region.
Since our game is focused very much on a horizontal playing field, we letterbox the upper and lower regions of the screen instead of extending the view (which would just be filled with more sky / water). The whole "90° vertical screen orientation" thing is not something we even considered, haha.Layout of the screen texture. We always show the middle part, the "extensions" are optional for wider screens.Crop for a phone.Crop for a 1920x1080 monitor.
This method gives a nice visual balance on most devices, some players get up to a 33% extended view field on either side, but that doesn't interfere with gameplay. It is flexible enough to never have black bars left/right
. Top+bottom letterboxing is fine, but I really do want to fill the whole width of the screen. I don't think there are many devices with a 2:1 or higher aspect ratio, so I think we're good there.
We are rendering a few too many pixels (the ones outside the screen & under the letter box), but I don't think that will form a problem. @4x and up
So, there is a nuance regarding the rule that pixels can only zoom in integer amounts (1x, 2x, 3x). We all avoid non-integer zooms (like 1.5x) because it will either make bigpixels blurry
(with anti-aliasing) or cause a kind of aliasing
without it. At 1.5x, without anti-aliasing, what happens is that bigpixels on a line are zoomed by a factor of 1,2,1,2,1,.... However, I was surprised to see that at zooms of 4 or higher, this is not very noticeable at all. A zoom factor of 4.2x, for example, yields bigpixels that are alternatingly 4,4,5,4,4,... pixels in size, but this is not a disturbing sight. So, at a zoom of 4 or higher, we do not
cap the zoom to integer levels anymore. This allows us a little extra flexibility to fill screens that would otherwise have a bit of letterboxing.Upscaling by a non-integer factor is not so bad at high zoom levels. It's even less noticeable ingame where the contrast is lower. Parallax Jiggles
I was gonna rant about the "jiggles" that you get when moving objects are "discretized" onto bigpixels, but I'll save it for another time.