Jump to content

Continuously scrolling background


Recommended Posts

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).

Link to post
Share on other sites

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.

Link to post
Share on other sites

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?

Link to post
Share on other sites

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;    }}
Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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?

Link to post
Share on other sites

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() {  }};
Link to post
Share on other sites
  • 2 weeks later...
  • 1 year later...

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 2 weeks later...

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!

 

Link to post
Share on other sites
  • 11 months later...

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)

 

Untitled-1.png

Link to post
Share on other sites
  • 1 year later...
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. 

Link to post
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...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...