Continuously scrolling background

[Biggerplay]

What would be the best way to have a continuously scrolling background? I'm new to JS/Phaser, but the way I would usually approach it would to be have an art based background (not tiled) which is constructed on the fly so to speak from various elements (clouds, buildings, etc). Would that work with JS/Phaser? and if so how would I implement that with Phaser?

 

(Actually I guess tiled might work as well if I could have overlapping tile layers one with big objects and one with small platformy type objects).

[Heppell08]

I've done it with tiles but on the fly I wouldn't really know. Maybe some clever X position random spawn in? I just used tiles for mine but its not on the fly so to speak. I have elements added to it but custom with me telling it the X/Y and then again the X/Y with a group of sprites. Not sure if that's helpful but might be of some use. EG: car.x = game.world.randomX: cay.y= game.world.height - 64; random X is what it says, random, but you'll need to group them and recycle as you go depending on how many you want.

[Biggerplay]

I've done it with tiles but on the fly I wouldn't really know. Maybe some clever X position random spawn in? I just used tiles for mine but its not on the fly so to speak. I have elements added to it but custom with me telling it the X/Y and then again the X/Y with a group of sprites. Not sure if that's helpful but might be of some use. EG: car.x = game.world.randomX: cay.y= game.world.height - 64; random X is what it says, random, but you'll need to group them and recycle as you go depending on how many you want.

Are there any looping scrolling Phaser tile examples like you described anywhere?

[Chimera]

I have managed to make a constantly scrolling background by creating two identical background textures and resetting them once they go off screen. I don't like this method because it requires two full size background images to simulate a single scrolling background texture, but I did it for a quick prototype I am working on. I believe tileSprite is what most people are using for scrolling backgrounds because it automatically wraps the texture around the screen for you but I have not gotten it to work for me yet.

 

I am new to phaser, javascript, and HTML5 game development so I am still trying to learn myself . 

preload: function() {   this.game.load.image('shipSelectBackground', 'assets/menu/ship_select.png');}create: function() {    this.background1 = this.game.add.sprite(0, 0, 'shipSelectBackground');    this.background2 = this.game.add.sprite(0, -600, 'shipSelectBackground');}update: function() {    moveBackground(this.background1);    moveBackground(this.background2);    var moveBackground = function(background) {      if (background.y > 600) {        background.y = -600;        background.y += 1;      } else {}        background.y +=1;    }}

[Heppell08]

There is meant to be a fix in pixi.js 1.4 but phaser hasn't got that implemented yet. The backgrounds are called parallax and they loop constantly. The above method is the same as I use, 2 full size backdrops, rinse and repeat the code and you have a scrolling backdrop. The tilesprite parallax is 1 image that's looped with is the preferred method but phaser needs to adapt to pixi 1.4 and that not in the 1.1.4 dev to master update. But I suppose grouping 2 backdrops and resetting them for scrolling isn't too hard to code so maybe use that for now.

[rich]

tileSprites are really what you'd need to use. They work in 1.1.3 but suffer from some GPU corruption on certain devices in WebGL mode. This is fixed in 1.1.4. However the textures need to be power of 2 in size.

 

When we upgrade to Pixi 1.4 the only thing it will remove is the power of two restriction, although that's a great thing to no longer have to worry about

[Biggerplay]

tileSprites are really what you'd need to use. They work in 1.1.3 but suffer from some GPU corruption on certain devices in WebGL mode. This is fixed in 1.1.4. However the textures need to be power of 2 in size.

 

When we upgrade to Pixi 1.4 the only thing it will remove is the power of two restriction, although that's a great thing to no longer have to worry about

 

So the tile sprite would be one big screen sized image? otherwise I don't see how a tile which wraps within itself would work?

[rich]

It can be whatever size you want, and you could have any number of them. So a repeating skyline or cityline, which you then throw some buildings onto to provide variety.

[Chimera]

Is tileSprite supposed to behave similar to a sprite? I reviewed your example under exmaples/tile sprite/tiling sprite, and I am trying to use it the same way but the image does not show up. I am using 1.1.4 now, but have also tested in 1.1.3 which also did not work for me.

 

Am I missing something?

Starlight.ShipSelect = function(game) {  this.game = game;  this.background1 = null;};Starlight.ShipSelect.prototype = {  preload: function() {    this.game.load.image('shipSelectBackground', 'assets/menu/ship_select.png');  },  create: function() {    this.background1 = this.game.add.tileSprite(0, 0, 600, 800, 'shipSelectBackground');  },  update: function() {  }};

[Chupup Games]

@Chimera: Because your textures need to be like 256 x 256 or 512 x 512 (power of 2)!

[Chimera]

Yeah I figured that out shortly after the post, forgot about the power of 2 rule with the tileSprite. 

[Olle]

I'll go ahead and bump this thread.

Is tileSprite a viable solution for larger backgrounds? I hear some devices don't like sprites bigger than 4096 px?
 
My current implementation make use of several 1024 wide sprites that are randomly chosen on the fly, every part fits beside any other. I am however having some troubles getting them to spawn in the exact correct position. There seem to be a small deviation that sometimes result in a small gap, about 1-10 pixels. perhaps depending on the performance?
 
I've tried two solutions. The first one was to use velocity to move the sprites and listening to the position of the sprites in the prototype.update for the moment to spawn the next image.
 

...prototype.update = function (){if(!this.spawnedNext && this.body.x <= -(this.width-this.game.width)){makeProp(this.game, 'seaBed', this.width+this.body.x);this.spawnedNext = true;}...

My current implementation make use of tweens and onComplete listeners. Both solutions suffer from the same deviation.
 

var pan = this.game.add.tween(this).to({x: -this.width}, this.speed); pan.onComplete.add(function(){makeProp(this.game, 'seaBed', this.width);this.destroy();}, this);pan.start();

I've tried both a fixed spawning location, and a dynamic location based on the position of the previous image, same result.
 
Any tips?

[rich]

Don't use physics (or even tweens) to scroll backgrounds. It's overkill and makes aligning the next piece next to impossible. If you need to tween them for some reason then put them into a container Group and tween that. Then you can place the new pieces pixel perfectly within the Group as it's not their coordinates that are being adjusted by the tween.

[Olle]

Don't use physics (or even tweens) to scroll backgrounds. It's overkill and makes aligning the next piece next to impossible. If you need to tween them for some reason then put them into a container Group and tween that. Then you can place the new pieces pixel perfectly within the Group as it's not their coordinates that are being adjusted by the tween.

 

Allright, no tweens and no physics. But I'm not sure what you are suggesting I use instead.

Would it be better to manually adjust the sprite positions in the update function?

[rich]

The issue you're having is that you can't place the next tile down correctly because you don't really know how far ahead the previous tile is, because it's being moved with physics (or a tween). The solution would be to use a Group and tween that - then all the tiles are placed within the Group. So in effect the tiles never actually move at all, only the Group does, and you can keep on placing new tiles at the back and moving old ones off the front as the Group moves.

[Olle]

Thanks for clarifying, that sounds like an elegant solution. 

[guy]

Hi guys,

I came across this post while trying to build my first game using phaser(which is amazing i must admit )

I'm having a hard time trying to achieve a large parallax effect with a pretty 'big' background (we are talking about 3 pieces of 1980x360 placed horizontally).

I can't use a one image as background because of the mobile limit of texture sizes.

Any chance to see working example of what suggested in this post? (having a group of 3 tile sprites next to each other and changing the group x Position ? )

Thanks in advance, you guys rock!

 

[Jon Goikolea]

Hi there,
I'm having the same issue. I need a scrolling background that changes as the game progresses. For the moment I have a tileSprite that I scroll endlessly using autoScroll but that's it.

Let's say I have two 300x500 px backgrounds and in a given moment of the game I need to change from background1 to background2 seamlessly. You talked about using groups but then I would't be able to use autoScroll. I'm a bit confused on how should I implement this. I need some help (Don't take into consideration the two backgrounds not matching in the image)

 

[Djloop]

On 2/22/2015 at 9:22 PM, rich said:

The issue you're having is that you can't place the next tile down correctly because you don't really know how far ahead the previous tile is, because it's being moved with physics (or a tween). The solution would be to use a Group and tween that - then all the tiles are placed within the Group. So in effect the tiles never actually move at all, only the Group does, and you can keep on placing new tiles at the back and moving old ones off the front as the Group moves.

Could you please elaborate on this? If I tween/move a group that contains multiple tiles then the group will move off the screen after the width of the group is moved.