Looping background image?

[iShellz]

Is there a clean method or build in code for looping an image as a background 

[jerome]

look at the tileSprite starfiekd in this example : http://examples.phaser.io/_site/view_full.html?d=games&f=invaders.js&t=invaders

[Chimera]

Something like this is how tileSprite works, you use the tilePosition x/y coordinates to move the background which is automatically tiled. The important thing to keep in mind is the image you are using HAS to be in the power of 2 (eg. 256x256, 512x512x 1024x1024). 

 

function preload() {

 

game.load.image("background", "background.png");

 

},

 

function create() {

 

var background = game.add.tileSprite(0, 0, 500, 500, "background");

 

},

 

function update() {

 

background.tilePosition.x = 0.5;

 

},

[iShellz]

working awesome now, thanks for the help.

 

i was having some trouble because i forgot about the power of 2 aspect. 

 

working awesome now. 

[ZRT]

Does the image has to be bigger than the canvas or it doesn't matter?

 

I have a 1024x1024 image background, my canvas is w: 400, h: 600 and I have this set up but can't see any movement effect. What am I missing here?

  create: function() {    this.bg = game.add.tileSprite(0, 0, 400, 600, 'bg');

  update: function() {    this.bg.tilePosition.x = 0.5;

[iShellz]

 

Does the image has to be bigger than the canvas or it doesn't matter?

 

I have a 1024x1024 image background, my canvas is w: 400, h: 600 and I have this set up but can't see any movement effect. What am I missing here?

  create: function() {    this.bg = game.add.tileSprite(0, 0, 400, 600, 'bg');

  update: function() {    this.bg.tilePosition.x = 0.5;

I guess the first step would be where is the part of your background that is textured to loop while it moves ?

 

 

This one would loop no matter where the camera is

 

this may not because you wont be able to see the part that is moving 

[ZRT]

I tried with 512x512 image with the same canvas size. With an image that easily can be detected and still no movement whatsoever.

[iShellz]

As posted above. Have you looked at the examples? The space game has a scrolling background that is a great example

[ZRT]

Yes, but there are two backgrounds there. I put one background then the other? And I put a piece of what I want to move and set the tilePosition and it goes to a loop the whole time? Obviously I don't get how this works. :S

 

EDIT: I GOT IT!

It was suppose to be:

this.bg.tilePosition.x += 1;

With emphasis on +=

[farhan]

is there a reason why tiled images needs to be power of 2? while regular sprites can be in any size? is tiled sprites using a special feature that needs power of 2? if it is, then i guess i just have to make my own tiled sprites using regular sprites and manually move them etc etc