Flickering pixels on starfield in TilingSprite

[systemx17]

Having a problem with a flicker effect I am having when creating a moving starfield in the background of a game I am working on. It's a bit hard to describe the effect so I will do my best without a video and hopefully someone can help. If needed I can create a recording of what's happening. Sometimes this flicker seems more like a pulse with the stars fading in and out. The faster the shift of tilePosition the faster this pulse seems to be resulting in a "flickering" effect.

 

My technique:

 

4 tiling sprites are created. The background one is a jpg with stars and a bit of nebular gas clouds here and there. It is 4000x4000px in size. The other 3 are transparent png files with random white pixels on an image 2000x2000px. Each of the 4 tiling sprites' tilePosition is incremented at a different rate to each other based on the spaceship (which remains fixed in the middle of the screen). My renderer is automatically set to the innerWidth and innerHeight of the window if that matters - but doesn't seem to with other projects I have been playing around with.

function updateBackground(x,y){	//console.log(x + ":" + y);	sprites.cloudstars.tilePosition.x += (x * 0.01);	sprites.cloudstars.tilePosition.y += (y * 0.01);	sprites.star1.tilePosition.x += (x * 0.2);	sprites.star1.tilePosition.y += (y * 0.2);	sprites.star2.tilePosition.x += (x * 1);	sprites.star2.tilePosition.y += (y * 1);	sprites.star3.tilePosition.x += (x * 10);	sprites.star3.tilePosition.y += (y * 10);}

The problem:

 

The stars seem to flicker (which sounds like it would be a good idea but isn't) when the starfield is shifted. It depends on the values of X and Y which are calculated by the direction and speed of the ship as follows:

function moveShip(){	var newX = 0;	var newY = 0;	if(player.speed > 0){		var newX = (Math.cos(sprites.ship.rotation) * (player.speed * -0.01));		var newY = (Math.sin(sprites.ship.rotation) * (player.speed * -0.01));	}	return [newX, newY];}

What I have tried:

 

- Reducing the size of the png files

- Making sure the white pixels in the png file are not transparent in any way, solid white pixels

- Moving the starfield at different rates in the first part of code I have linked

- Turning off antialiasing for the PIXI.autoDetectRenderer

 

I have spent about 30 hours of time trying to get this to work and am about to give up completely, hence turning to this forum for maybe some advice. If there is a better way to do it I am more than happy to give this a try. Thanks in advance.

[systemx17]

I am thinking this has something to do with me trying to adjust the shift as decimals. I understand this might be a factor but I am unsure how to handle it. I kinda feel like I am doing this the wrong way.

[xerver]

Sounds like this bug: https://github.com/GoodBoyDigital/pixi.js/issues/1683#issuecomment-95522996

 

Which should be fixed in the latest dev, basically during scrolling tiling sprites were "jumping" positions.

[systemx17]

Have checked out the post and replicated what was in there. However my tiles aren't jumping the same way. I have confirmed that it's because my white star pixels are 1px wide and I am incrementing the tiling position by a decimal (eg. 2.023 pixels). I have confirmed this as my stars stop flickering if I use Math.round on the tiling shift - however this also causes problems with the pixels not moving in a smooth path. They are more "stepping" east and south instead of diagonally as southeast. Sometimes the x shift rounds up when the y shift rounds down. Really limits my potential to do this as I am currently doing. Any suggestions?

[systemx17]

sprites.cloudstars.tilePosition.x = Math.round((player.gX * 0.05) % sprites.cloudstars.texture.width);sprites.cloudstars.tilePosition.y = Math.round((player.gY * 0.05) % sprites.cloudstars.texture.height);sprites.star1.tilePosition.x = Math.round((player.gX * 0.2) % sprites.star1.texture.width);sprites.star1.tilePosition.y = Math.round((player.gY * 0.2) % sprites.star1.texture.height);sprites.star2.tilePosition.x = Math.round((player.gX * 0.5) % sprites.star2.texture.width);sprites.star2.tilePosition.y = Math.round((player.gY * 0.5) % sprites.star2.texture.height);sprites.star3.tilePosition.x = Math.round((player.gX * 1) % sprites.star3.texture.width);sprites.star3.tilePosition.y = Math.round((player.gY * 1) % sprites.star3.texture.height);

The above stops the flicker but "staggers" the movement.

sprites.cloudstars.tilePosition.x = ((player.gX * 0.05) % sprites.cloudstars.texture.width);sprites.cloudstars.tilePosition.y = ((player.gY * 0.05) % sprites.cloudstars.texture.height);sprites.star1.tilePosition.x = ((player.gX * 0.2) % sprites.star1.texture.width);sprites.star1.tilePosition.y = ((player.gY * 0.2) % sprites.star1.texture.height);sprites.star2.tilePosition.x = ((player.gX * 0.5) % sprites.star2.texture.width);sprites.star2.tilePosition.y = ((player.gY * 0.5) % sprites.star2.texture.height);sprites.star3.tilePosition.x = ((player.gX * 1) % sprites.star3.texture.width);sprites.star3.tilePosition.y = ((player.gY * 1) % sprites.star3.texture.height);

This stops the stagger but returns the flickering

[xerver]

Can you put together a minimal example of it happening so I can debug it?

 

Thanks!

[systemx17]

Live demo: http://www.stellawars.com/starsample/

Attached: Source files

 

All of the images are created from scratch by me. The background is a solid jpg and the 3 star layers are transparent png files with stars on them.

starsample.zip

[george]

You're using 3.0.2 which was authored 3 weeks ago. You should provide an example with the latest build v3.0.5 (https://github.com/GoodBoyDigital/pixi.js/releases/tag/v3.0.5)

and see if it happens there.

 

Regards George

[xerver]

The flickering you are seeing is just the browser doing interpolation when you have non-integer positional coords. When your position calls for drawing "in between" two pixels it interpolates and gives it a faded look.

 

If you floor your tile positions when you set them it fixes the issue you are seeing. Though in your example the flickering actually looks intentional since they are stars

 

This fixes your flickering:

	sprites.cloudstars.tilePosition.x = Math.floor((player.gX * 0.05) % sprites.cloudstars.texture.width);	sprites.cloudstars.tilePosition.y = Math.floor((player.gY * 0.05) % sprites.cloudstars.texture.height);	sprites.star1.tilePosition.x = Math.floor((player.gX * 0.1) % sprites.star1.texture.width);	sprites.star1.tilePosition.y = Math.floor((player.gY * 0.1) % sprites.star1.texture.height);	sprites.star2.tilePosition.x = Math.floor((player.gX * 0.2) % sprites.star2.texture.width);	sprites.star2.tilePosition.y = Math.floor((player.gY * 0.2) % sprites.star2.texture.height);	sprites.star3.tilePosition.x = Math.floor((player.gX * 0.4) % sprites.star3.texture.width);	sprites.star3.tilePosition.y = Math.floor((player.gY * 0.4) % sprites.star3.texture.height);