Hello! I'm working on a Pixel Art game and I'm having an issue many of us know about, it's the pixel perfect scale to fit different Monitors and TVs.
To many pixel art games today the perfect solution is having a 640x360 native resolution, it scales perfectly to 720p, 1080p and 4k, but for some games like mine, this resolution don't work in terms of the look and feel of the pixel size, I went with 480x270 as native resolution, which scales perfectly to 1080p and 4K, but looks distorted on all remaining resolutions.
Cropping to make a pixel perfect image is not the best option for me because the closest crop will change the player's character scale much, and the levels design will need to be all changed and corrected to take this into account, so I'm really hoping to achieve having my same existing design on most monitor and tv screens.
After looking around much about this topic I'm thinking the best way would be to do like Shovel Knight did, their native resolution is 400x240, which does not scale perfectly to any of the common monitors or TVs, so they scale it perfectly to the closest resolution and then upscale the image to fit the screen with an interpolation effect. See image:
While it is not perfect, and some users do notice, I personally can't tell unless I take a screenshot and zoom in, and this would be the perfect solution for me as my main targets at 1080p and 4k are already pixel perfect, so I could have a small anti-aliasing for the remaining resolutions without having visible pixel distortions, and I would not need to change how my game works in terms of design.
Thanks in advance!
You could use "letterbox integer scale" mode, which preserves per-pixel scaling by adding black borders if the canvas doesn't exactly scale.
Thank you for your reply Ashley! Actually the "letterbox integer scale" is not what I'm looking for either, because while it keeps a nice pixel perfect image, the borders are too thick and the resulting image is just too small. I'm looking to have my game ported to Switch, it has 720p handheld, and 900p docked, I really need to fit those resolutions to the 100% of the screen size, and hopefully not having to crop or adjust the level design, so more like Shovel Knight by upscaling to the closest integer scale, and then interpolate the rest of the image to fit the 100% of the screen as I explain above. I will upload some screenshots later to explain better with visual references! Thanks :)
Please see these image references below for a better understanding, note that this all relative to a metroidvania pixel art game targeting PC and Console, probably that's why options like the letterbox integer scale are not too useful in this case whereas it was designed for mobile. Next I'm using The Mummy Demastered as an example as they also designed their pixel art assets and game in 480x270 as the native resolution.
This image shows the original intended design, with pixel perfect at 1080p, also applicable to 4k.
This is what happens in Letter Box Scale option, it is what I am currently using on my game to fit the whole screen, but it deforms the whole image, you can see how it makes some lines thinner and others thicker, it's specially visible on the ground's tilesets and on the player's character design. This pixel deformation effect is also a lot more noticeable in movement.
This would be a Pixel Perfect image zooming in a little, but it's enough to make dramatic changes in the UI but more importantly, in how the levels are designed.
I'm showing this image with the Letterbox Integer Scale for representation purposes, it shows pixel perfect image but imagine having a finished game on a Monitor or TV, or on the Switch handheld with this thick black frame.
And lastly, the intended effect with Anti-Aliasing, and what Shovel Knight do on their game, this would be the ideal solution for games like mine, where the native designed pixel resolution doesn't fit all resolutions perfectly, but in this way, it still maintains virtually the same pixel proportion throughout the image, if you play on a TV it's not noticeable at all, and on a monitor you have to really get close to see there's some smoothness between the pixels, which doesn't hurt because some users even prefer when the pixels are a little smoothed anyway. (Owlboy does anti-aliasing even though their native resolution is 640x360 which fits perfectly 720p, 1080p and 4k, just to achieve a slightly smoother pixel art look and result)
I'm bringing this topic to the community to see if anyone has a solution or idea to share, a custom screen filter maybe that could help with this, I know Construct has Anti-Aliasing permanently disabled, or maybe touch Scirra's team and have the option to enable it, in hopes to help towards this matter.
Anyway if anyone has an idea I'm all ears :)
in this case what I would do Is....
I now have game that is a pixel art game that...
The only thing you would need to take care of is rotating objects as they will rotate into 1080p. This might be ok for lasers bullets etc. but would look odd for key player or enemy sprites etc. in this case you will have to fully animate rotations.
Develop games in your browser. Powerful, performant & highly capable.
Thank you very much for your input NetOne! Really appreciate it
This is a great idea, the only thing is that if this works we will need to change all the game physics, player, enemies, items, and props platforming and gravity values, etc etc, plus re-scale and re-position everything in all layouts! but let's see, it may be worth it. We will try this method and see at least how this looks on different widescreen resolutions and get back to you :)
Actually after testing it there is another issue with this method, if the art is done in the native resolution and just scaled in Construct, the Linear Sampling smooth the assets entirely, instead of just smoothing a little the borders. See image below:
So to do as you recommended, we would need to change how the entire game is programmed and designed in the layouts, and also would need to rescale all art assets to 4X outside of Construct and then reload it in the game engine, changing also all the collisions hit-boxes.
To avoid this issue and follow this path I would ideally need to scale the layout in a way that Linear Sampling recognizes the art natively to the upscaled size and just interpolate the edges to keep the pixellated style.
I also tried with these events but ended up with the same too smooth results:
Set layout scale to 4
Set canvas size to 1920 x 1080
But you are right, even though it is a lot of work for us now, this path is feasible, preferably for when starting a new project. The final result effect when the native art is upscaled is very nice and accommodates well any screen resolution, but now that we have tried it it would be really nice not just to not need to basically remake our game, but also to have the option to turn on and off, see bellow what a nice anti-aliasing option would be for 1080p, this is with the art reisized 3x, and then Linear Sampling to fit the 4X to 1080p
Which by the way, to me this looks exaclty like Owlboy's pixel effect, so it would be really nice to be able to turn it on or off, and not need to reupload all our art assets at 3X or 4X to make this!
Any further ideas will be very welcome! :)
Yea . That looks pro.
Definitely the way to go.
But I understand that is no option for a finished game.
The only other things I can think of is
What about using the webgl blur effects very slightly
Or investigate if there is webgl AA effect/shader that you could get someone to program as an add-on.
Anyway keep us posted on that game it looks awesome.
If you add webgl blur effects to a distorted Point Sampling image, it's still distorted but with the addition of some blur, see image below:
Regarding a webgl AA effect/shader, that's what I was thinking in the first place, and have found nothing helpful so far, that's why I opened this thread :)
But thank you very much for your solution, it looks nice and it shows a good intended final result that fits many widescreen resolutions, though we may not go this path as it has many limitations: it is permanent, meaning it cannot be fine tuned per different resolutions, or turned on and off, it also brings new issues, it breaks the visual continuity of all tilesets, and at 4K makes everything blurry (unless we prepare the art at 8X instead) Plus this method requires a lot of work to adapt from an advanced project like ours. And also it's not as convenient to work with, as it's not the same having a metroidvania map of small 480x270px screens, than having each at 1080p height for a total of tens of many thousands of pixels per layout.
Let's see if someone else has anything to add to this topic as it will be very helpful :)
BTW does anyone know if there's a way to scale the screen/layers/objects in a way that Construct Linear Sampling recognizes the new scale as the native and not the original assets' scale?
This is a great idea and it would easily solve the black borders problem without having to change any of your assets or events.
This feature is in Construct 1. (Construct Classic) with its Resizing options under 'Window Properties' and there is a "Resize display to fill window" option with anti-aliasing that clickteam fusion has.
I just suggested this idea and you can vote to see it in construct here:
This feature may not get implemented because people thought it looked ugly and repulsive. See these threads:
Resolution noob here. Please don't be alarmed.
I am trying to understand resolution & ratio.
Below are the talked about resolutions, I think. (what you are using and what the switch outputs)
They are all exactly 16:9. Am I wrong?
So I think I do not understand why your game looks distorted in some cases. :)
480/270 = 1,777778 (16:9)
720p - 1280/720 = 1,777778 (16:9)
900p - 1600/900 = 1,777778 (16:9)
1080p - 1920/1080 = 1,777778 (16:9)
(Note: one entry in the wikipedia article has 720p using a resolution of 1366x768, which has not the same 16:9-ratio as the resolutions above. But I understand the Switch does not use 1366x768?)
(sources: 2 wiki articles: one about the switch and "list of common resolutions")
my last input on the subject would be.
Using construct engine directly
The ideal solution is
Viewport your 480x270 or similar
Full Screen Scaling High
linier sampling on
this will give you linier sampling into whatever size the user makes the game window and will look super clean. However using fullscreen scaling high comes with a performance hit depending on the target screen / window pixel density. But it is not that much. If you can use this then do it.
What is your performance if you do this?
However, this subject was raised regarding to you porting your game to Switch.
Which as far as i understand presently is not possible directly and would involve a compile/rewrite of your construct events and the engine rutime code into C++ or whatever the switch needs. In this case, the antialiasing is no longer a Construct engine problem as whoever is doing the porting for you will have full access to whatever graphics the switch uses and so will be able to add whatever AA you like.