Very Strange Graphical Anomaly. Bug or User Error?

  • Hey all, thanks for your time.

    So here's the issue: I'm making a low-resolution pixel-art game. For the entire time I've been working on it, it has been black and white pixels only. The camera moves with the player character, and no matter if things were standing still or moving around, everything looked great. Recently, I've changed some of the sprites to greyscale, and now any time the camera moves, any sprites with shades of grey flicker and distort, causing a very unpleasant visual effect.

    I can't even begin to imagine what would cause this, and am quite desperate for a solution, even if it's the knowledge that it's a bug- though I hope and assume it's an error on my end.

    What I've Tried:

    1: Letterbox integer scale is turned on.

    2. The camera following the player, which does have lerp in the function, is rounded.

    3. The sprites themselves have a 1 px transparent border around them.

    4. The X and Y positions of the sprites/tilemap are rounded integers.

    5. Pixel rounding is turned on.

    Here's the .c3p, try using the arrow keys (or gamepad) to walk around and compare the appearance of the differently-colored brick walls and objects. Thanks again for your time:

    https://www.dropbox.com/s/jynbsi1hr8h7swx/WitchTEST%20%281%29.c3p?dl=0

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • That is called Moiré pattern https://en.wikipedia.org/wiki/Moir%C3%A9_pattern.

    You can try to change the sampling to bilinear or trilinear.

  • Asmodean Thank you very much for your response, the article you linked is also very enlightening.

    That does seem to help a bit, but at the cost of a rather horrendous blurring effect on the pixel-art. Certainly there is a way to do this without compromising the image quality so heavily?

  • I don't think that you can avoid that without changing the pattern. The problem is as old as games are. This was allways a problem in old 8-Bit games, but it bothered nobody.

  • Asmodean Interesting. Not only does it bother me, I consider it completely unpublishable. I wonder how modern pixel-art games like Shovel Knight or Hotline Miami solved this?

  • You would use textures that don't have horizontal, or vertical lines.

    Or at least lines large enough not to merge with screen pixels.

  • newt Hello, thank you for the reply! Obviously I'm still a noob, so please excuse me if I ask a few more questions.

    How is it possible to make pixel graphics without horizontal or vertical lines? I thought that was all they were.

    Or at least lines large enough not to merge with screen pixels

    So could I theoretically double the resolution and size of the sprites, while keeping the same aesthetic? I was trying to avoid this as creating sprites that are true to size is seemingly much simpler.

  • How is it possible to make pixel graphics without horizontal or vertical lines? I thought that was all they were.

    > Or at least lines large enough not to merge with screen pixels

    So could I theoretically double the resolution and size of the sprites, while keeping the same aesthetic? I was trying to avoid this as creating sprites that are true to size is seemingly much simpler.

    Well the issue isn't that they are lines, the issue is that they are moving. You would have to get rid of diagonal scrolling, and make sure that you're not only rounding, but snapping to integers where it wont sync.

    Changing the scale is not that big a deal, but changing the texture is a better fix imo.

  • When I open your project at precise pixel resolution and play it on my screen (a 27" tft IPS panel at 2540x1440 pixels) the black and white pixel grid texture turns a fuzzy gray, and thin white lines turn down a notch in brightness too when the screen scrolls.

    The black thin lines in the right wall texture become fatter during scrolling (depending on the direction scrolled, either the horizontal or the vertical ones).

    The gray blocks are affected also, and seemingly change luminosity too.

    This has nothing to do with Moiré patterns: for a TFT screen it is a technical limitation, because alternating between (switching) full white and full black pixels is the worst case scenario for most TFT screens.

    It just can't keep up. Even at twice the zoom factor the walls are still being affected by this technical limitation (on my screen).

    In the old 8-bit CRT TV days this wasn't an issue. And dithering patterns were used to simulate extra colors, because the maximum number of colors on-screen was extremely limited and CRTs (TVs in particular) produced blurry pixels, blending and melting combos of pixel arrays in creative ways.

    Shovel Knight and Hotline Miami have colored pixel art graphics, so it does not affect those games visibly.

    Your black and white pixel art is a worst case scenario. You must avoid thin lines, pixel patterns such as the ones which you use, but even then you may still experience unwanted visual changes in apparent luminosity while moving or scrolling.

    One option is to replace dither patterns with grayscale tints. Or accept it the way it is. It will be worse or better depending on the screen on which your game is displayed. Or reduce overall contrast.

    This, btw, is also the reason why many web pages display text as #333 and not pure #000. It reduces black text on white flickering.

  • Delenne That is an extremely helpful answer, thank you so, so much for taking the time to look through everything. After reading your response several times, I feel a huge sense of relief now that I at least understand what the problem is. I'll test varying grayscale values, perhaps even monochromatic values, and see how that works out.

    Again, much appreciated for your time and excellent explanation.

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