Construct 2/3 Screen Anti-Aliasing

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:

http://orig07.deviantart.net/16b0/f/2014/184/b/0/how_shovel_knight_is_rendered_by_aloo81-d7p4ud6.png

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.

• Has anyone used the 480x270 resolution before and found a work around to this? (having upscaled to 720p without cropping and without pixel distortions?)
• Or do you know of a way to add anti-aliasing as a filter, or plugin add-on or anything? (paid or free?)

Thanks in advance!

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.

01_1080p_Pixel_Perfect

https://ibb.co/mTUxDJ

This image shows the original intended design, with pixel perfect at 1080p, also applicable to 4k.

02_720p_Pixel_Distorted

https://ibb.co/cshTLy

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.

03_720p_Pixel_Perfect_Cropped

https://ibb.co/fvyJLy

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.

04_720p_Pixel_Perfect_Integer_Scale

https://ibb.co/corSDJ

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.

05_720p_Anti-Aliased_Intended_Result

https://ibb.co/i8dUSd

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 :)

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:

https://ibb.co/diE5ky

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

https://ibb.co/jHqaJJ

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!

https://ibb.co/gFOUdJ

Any further ideas will be very welcome! :)

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:

https://ibb.co/jpiXhd

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?

Carl.D

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

Letterbox scaling

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.