Skip to Main Content
Construct 3 suggestions 21H2 - ARCHIVED

This suggestions platform is now closed and will be shut down on March 1st 2024.

Please ensure any content you care about is backed up before that date.

Feature requests are now handled on GitHub here: https://github.com/Scirra/Construct-feature-requests

8 VOTE
Categories Effects
Created by Overboy
Created on May 13, 2022

New "Scrolling" Pixelate Effect (solving the issue of mixing Pixel Perfect & Smoothness for good)

A New "Scrolling" Pixelate Effect


The only thing we would need to achieve a nice mix of Pixel Perfect & Smoothness within the same project is a new Pixellate Effect but that would "scroll" accordingly to the Layer's position on the viewport and change its "pixel size" setting based on Layer's Scale.

Here is how it would work : if the Layer is at non-integer coordinates X=x,005 et Y = y,0.93 (little x and little y are integer numbers) then the "pixel grid origin" of the effect would match those offset to the integers value. This way, even if the Camera scroll, the pixel perfect layer stays clean, even if it is positioned at actual non integer coordinates.

Contrary to how the existing Pixelate Effect works, this “new Scrolling Pixelate Effect” would take only 1 parameter “Pixel Size” (default value = 1), that won’t need to be changed at runtime to support different scale (zoom in/out) or aspect ratio. Everything would happen as expected under the hood.
So if the Layer with Pixel Effect is zoomed out to 0.9 scale. Then actual pixel size used under the hood by the shader is 0.9 (while the accessible parameter stays equals to 1)
This way it looks nice with smooth zoom and scroll by default !

(Optional - enhancement ) : Even better, not sure if Construct can do that, but if the Effect is put on an Object instead of a Layer, “the pixel grid” would scroll accordingly to the Object’s coordinates (their offsets to integer value), instead of the Layer’s coordinates on the viewport
This way, even if the Object itself moves, there are no janky results at all.
That means there would be a difference between an Object placed on a Layer with this effect and an Object having the effect on it directly. Both situations serve different purpose.
If it's not possible, the position offset would be based on Object's Layer offset and the result would be the same regardless the situation.
However in any of all those situation, the pixel size need to be based on Object Layer's Scale (and not its own Object Scale).



Why ?

This issue to mix pixel perfect stuff with smooth scrolling/smooth zooming and in combination with high rez elements (UI like Celeste for example), has always been a really annoying issue for any pixel art game ! (while probably at least half of games made with Construct are Pixel Art games)

Finding a fix for it was one of the most wished features on the old suggestion platform, and right now it's the 4th most asked feature "Smooth Pixel Art Sampling Mode" https://construct3-21h2.ideas.aha.io/ideas/C321H2-I-37.

However, I think this new effect would be a simpler way to solve this issue :
No need to add a new sampling mode, or adding a per layer sampling mode setting as other people suggested.

Not only it would be easier to implement for Scirra but also more flexible for the user (can be Added per Object).


Why the current "Pixelate" effect doesn't work ?

Right now we already have a Pixelate effect build-in that is used as a trick on some projects to achieve pixelated look on specific layers or Objects

(within project with Fullscreen mode set to "high" I mean)

But it doesn't support smoothness and there is huge drawbacks :

  • As soon as the Camera scrolls or zoom in/out, there is a laggy/janky results
    (as the “pixel grid” is fixed while the Viewport is moving at non integers position, it draws different pixelated shapes at each frame even if they’re corresponding to an object that isn’t moving at all)

  • less an issue but just something that could be made better in a new “Scrolling Pixelate” effect : the parameter setting for the old “Pixelate” effect is really counter-intuitive to set up for the C3 user. Which is why the new “Scrolling Pixelate” effect works as described in first paragraph.

  • Attach files
  • +4