Graphics Darker While Moving

[Taz]

My graphics object becomes darker while moving. Has anyone dealt with this or know what settings might fix or other ideas?

 

EDIT / MORE INFO:

I tried antialias and native lines but they didn't help.

If I slow the movement down enough the distortion doesn't happen anymore.. And when I take screenshots it looks fine too.

So far I haven't seen this happen with curved shapes, only for straight lines and for the lines of rectangular shapes (not the filled inside part).

When moving horizontally, only the vertical lines are distorted. When moving vertically, only the horizontal lines are distorted. When moving diagonally, all of the lines are distorted.

[Taz]

I made a CodePen demo to help show the issue. The background is moving horizontally so the vertical lines are distorted They're darker/bluer while the horizontal lines are lighter/whiter, but all the lines are drawn with the same lineStyle so they should be the same color. I get this problem on both my MacBook and iPhone, with WebGL and with forced-Canvas rendering. Any help or ideas appreciated!

https://codepen.io/Tazy/full/Kqpyvb/

[ivan.popelyshev]

resolution: window.devicePixelRatio,

try add "autoResize:true" . Resolution doesnt work properly if you dont set CSS manually or automagically.

[Taz]

Thanks for suggestion - I added autoResize option for the demo but the vertical lines are still darker/bluer than the horizontal ones. Anything else to try?

EDIT: I also just tried commenting out the line that sets the resolution but that didn't help either. The problem happens on my iPhone with 2X retina display and on my MacBook with 1X display (and 1X zoom). So I guess it's something else besides resolution issues, but IDK what it could be...

[ivan.popelyshev]

I think there's something wrong with your canvas size, canvas pixel isn't mapped 1:1 to screen.

[Taz]

1 hour ago, ivan.popelyshev said:

I think there's something wrong with your canvas size, canvas pixel isn't mapped 1:1 to screen.

I'm just passing window.innerWidth and window.innerHeight to app.renderer.resize

I also tried using Math.ceil on them and w/out doing that, but the distortion's the same.

And I tried "roundPixels: true" but that didn't help either..

 

Here's the CSS that I'm using for the game I'm working on (with "autoResize: true" and "resolution: window.devicePixelRatio" passed to PIXI.Application), but for the CodePen demo I didn't setup any CSS. Maybe there's something here I'm missing?

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #000000;
}

canvas {
    padding: 0;
    margin: 0;
    position: fixed;
    display: block;
    touch-action: none;
}

 

[Taz]

I tried making a square with graphics (and generateCanvasTexture) and used it for tiling sprite background, but the distortion is the same. I made a new CodePen here. It moves the tiling sprite right at 3 pixels per frame. I used a different color for the lines (0x000080). It's moving horizontaly, so the vertical lines are distorted. They're darker and have more of a pipe-like rounded shape, while the horizontal lines are lighter and more rectangular / straight-edged. Are there any other ideas on how to fix the distortion or is it a bug maybe?

[Taz]

So I upgraded to the new Pixi version 4.5.3, but no luck. It's been a few weeks now and still no closer to making and moving a simple grid background. The whole demo is only 27 lines of code, mostly boilerplate, so there's not a lot of hiding places for issues. Can anyone please help with this?

Note: If I increase the line thickness from 4 to 10 then the issue goes away and all the lines are the same shape and color like they should be.

Code Pen: https://codepen.io/Tazy/full/rwexzN/

[Antriel]

On 6/7/2017 at 5:29 PM, Jinz said:

And when I take screenshots it looks fine too.

I would say this is just a mix of optical illusion with display capabilities. That's why only small lines do it and why they need to be moving. Basically your eye sees black color then suddenly blue where the black was. Also the display has to change from black to blue. Other than having very good display and brain not susceptible to illusions, I doubt you can do anything about it.

[Taz]

2 hours ago, Antriel said:

I would say this is just a mix of optical illusion with display capabilities. That's why only small lines do it and why they need to be moving. Basically your eye sees black color then suddenly blue where the black was. Also the display has to change from black to blue. Other than having very good display and brain not susceptible to illusions, I doubt you can do anything about it.

That's interesting. Well there are some colors where everything seems to stay the same but I was hoping that the small dark blue lines on black could work with different coding somehow.. But I guess I'll try out more background and line colors and line thicknesses to try to find another combination I like, but one that looks the same color even when the movement changes directions. Thanks for checking it out, if there's prob no way to fix it I can move on to other backgrounds