Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Flickering pixels on starfield in TilingSprite


systemx17
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :(

Link to comment
Share on other sites

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 :P

 

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);
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...