Pixel Rounding "On" & Layout/Layer Scale Zoom with lerp bug!

0 favourites
  • 12 posts
From the Asset Store
All popular touch mechanics - scrolling, zooming, swiping
  • Problem Description

    Please take time to review this bug. When I make a Zoom Scene in my game before, I noticed that white lines would appear if you use LayoutScale Zoom with lerp and with "PIXEL ROUNDING TO "ON". I used lerp to make a smooth zoom and I also used "Layer(Dialog) Scale Rate Set to (0)" system action to maintain Layer / s scale rate to 0 so it won't zoom. In conclusion, If you use Layout or Layer Scale Zoom and if PIXEL ROUNDING is set to "ON" it will cause a white line appearing at the borders.

    PS: The reason I set the zooming(Scene Mode) on the edges because the white lines (Bug) will only show if the camera(Scroll) is at the edge on smooth zooming.

    Attach a Capx

    https://onedrive.live.com/redir?resid=A ... ile%2ccapx

    Description of Capx

    If you use Layout or Layer Scale Zoom and if PIXEL ROUNDING is set to "ON" it will cause a white line appearing at the borders. The .capx is a fastly-made sample game I made to show the bug. Since it is a platformer game, move the player using the "left" and "right" arrow keys. If you reach the near edge of each side of the game then you will enter scene-mode and the white lines that are "bugs" will show.

    Steps to Reproduce Bug

    • Control the Player by using the "Left" or "Right" Keys .
    • Go to any edge(side) of the game.
    • When you reach the left or right near-side or near-edge of the layout, SceneMode(Zooming) will commence and white lines will show(THE BUG).

    Observed Result

    As I said, White Lines in the edge of the screen will show, like borders when Pixel Rounding is "On".

    Expected Result

    Smooth Zooming without White Lines that makes it looks very glitchy and non-well made game.

    Affected Browsers

    • Chrome: Yes
    • FireFox: Yes
    • Internet Explorer: Yes
    • Node Web Kit : Yes
    • Exported Android Crosswalk : Yes
    • Chrome Mobile : Yes

    Operating System and Service Pack

    Windows 8.1 64-bit Updated Drivers (WebGL supported) - Used device: Ultrabook & Mobile: Android Device

    Construct 2 Version ID

    Construct 2 version r222 Beta Version & r223 Beta Version

  • Ashley - I've relinked the correct .capx file since the previous hyperlink directs to the backup .capx. Please check it again.

  • Ashley, have you seen this bug report? I have a feeling that this is the only bug report that has not been resolved from Feb. 19, 2016 to the previous date. This bug really makes my game look unprofessional or badly made or buggy. If you can fix this as soon as possible, I'll be very grateful.

  • Its because you are trying to go into the "bounding" of the layout.

    Set it to not bound and you will see why.

    Your fix is to make your own bounding on the lerp.

    clamp(lerp(),min value, max value)

    If you want the object to go all the way to the corner you will have to fake your own bounding with black bars.

  • I followed your way to fake the bounding with black bars but since my game is a rpg and has many layouts, which is a bit pain if I extend each background. I want to try your bounding fix.

    But I did not understand how to implement this (clamp(lerp(),min value, max value))?

    What would be the value for min val and max val?


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Actually, screw that.

    Select the background layer, and set its color to black.

  • Actually, screw that.

    Lol. XD

    Select the background layer, and set its color to black.

    This will only work for games that has a black background. Since my game that has the problem comes with different colors, then this is not applicable. I have no choice but to manually extend the size of the background of each layout.

    Btw. I think I can still say that this is a bug for which the layout scale only zooms not expand. So normally it shouldn't reach the outside edge of the window.


  • That would be a feature request.

    Bounded scrolling set to adjust to scale.

    I don't think that will have the desired effect.

    It would just knock the boundaries back.

    You still can't scroll to the corner.

  • Closing as not a bug. It is rendering correctly! I am not sure specifically which lines you are referring to, a screenshot would help to illustrate what you mean, but I see a horizontal line along the top of the terrain (TiledBackground2).

    The line is not white: it is the color of the terrain. The terrain is a tiled background object, so its image wraps. The bottom row of pixels is all opaque, and at some floating-point zoom levels, there is a row of pixels at the top that partly wraps round to show the bottom row of pixels from the image again. These kinds of "seam" issues are common when you enable floating-point zoom or scrolling, since nothing exactly aligns to the pixels in the images. The only way to guarantee perfect alignment is with letterbox integer scale, pixel rounding, point sampling and simply not setting any float zoom levels like you do in your .capx.

    An easier way to work around this though is just put a transparent row of pixels at the bottom of the terrain tile image. This means if it ever wraps to show the bottom row of pixels at the top of the image, they're invisible.

  • Ashley - You may have misunderstood the steps needed to show the bug. First, control the character using arrow keys to reach the end side of the layout(for example; right edge of the layout) then the Zoom will commence and on the edge of the window, white line will flash on the sides of the window, I think you are right that the cause of it is my floating-point zoom, but why does it "only show" when "pixel rounding" is "on".

    I can't post a screenshot properly because "on zoom" white lines on the edge of the window is flashing (when I reach the edge of the layout when the zoom is in progress). But this actually only happens on Pixel Rounding is "on", well apparent when Pixel Rounding is "On".


    Since Float zoom level in my .capx is not good, how do I zoom properly without getting it to floating numbers but rounded ones?

    Thanks for the check...

    After several tries, I finally got a screenshot. (The lines were flashing from right and bottom of the window so I had to make 2 screenshots for each because I can't time it properly to capture both sides simultaneously). The lines are white so please view in a black background.



  • Oh right, so yeah, that's just the same thing but happening with the viewport. The bottom layer is white, and the objects exactly fit the viewport, so you get a seam along the bottom. It's conceptually the same thing, and the workaround is similar: cover it up by moving the terrain 1px down.

    With floating point zoom/scroll/positioning and linear sampling, exactly adjacent objects will, in general, show seams. This is just how computer graphics work. You need to use tricks like overlapping by 1px or adding an extra row of pixels here and there to work around it. Or just disable floating point zoom/scroll/positioning entirely.

  • Ashley - I'll try that but is the event I used to make a scenematic zoom wrong or do I need to find a new one or do you have a better one that I can use?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)