Jump to content

simple background image question


owen
 Share

Recommended Posts

Enthusiastic newbie here with another dumb question!

 

I am creating a simple platform game and I want a repeated image in the background which ideally scrolls slightly slower than the scenery in my game. (ie. a subtle parallax effect).  I need to understand how to achieve this or if I should do it as part of the Tiled map or code it in the JS or both.

 

So far I have created a map in Tiled and I've got the camera to follow my player around as they move and I can jump between platforms etc. It all works quite well but it needs a background image instead of just plain black.  All I can seem to do is put a fixed size jpeg there but what I really want is to infinitely repeat an image of smaller size (eg. something resembling rocks or bricks).  Would I need to do this inside of Tiled or what?

 

 

Thanks.

Owen

Link to comment
Share on other sites

You sir, need a TileSprite - see an example here of how to use it: http://examples.phaser.io/_site/view_full.html?d=tile%20sprites&f=tiling+sprite.js&t=tiling%20sprite

 

In your case what you could do is make it the full width and height of the game canvas, set fixedToCamera = true and then do tilePosition.set(-game.camera.x,-game.camera.y) in your update function - this will make the TileSprite scroll in the opposite direction to the camera's movement, giving you an infinitely repeating scrolling background.

 

To scale the speed of the scrolling and emulate parallax and depth, try tilePosition.set(game.camera.x * -0.5, game.camera.y * -0.5) which will make the TileSprite move half as far as the camera does, and in the opposite direction. Instant parallax!

 

Here's a little fiddle that adds some camera smoothing too, just because we're not using the built-in rigid follow routine ;) http://jsfiddle.net/lewster32/5a866/

Link to comment
Share on other sites

  • 3 weeks later...
 Share

  • Recently Browsing   0 members

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