owen Posted August 5, 2014 Share Posted August 5, 2014 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 More sharing options...
lewster32 Posted August 5, 2014 Share Posted August 5, 2014 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/ wayfinder, quiphop and morosenerd 3 Link to comment Share on other sites More sharing options...
owen Posted August 6, 2014 Author Share Posted August 6, 2014 Worked beautifully thank you Lewster! lewster32 1 Link to comment Share on other sites More sharing options...
wayfinder Posted August 26, 2014 Share Posted August 26, 2014 Good to have you around, lewster tilePosition and tileScale are not in the documentation! lewster32 1 Link to comment Share on other sites More sharing options...
ZoomBox Posted August 27, 2014 Share Posted August 27, 2014 Actually, it is !http://www.goodboydigital.com/pixijs/docs/classes/TilingSprite.htmlHehe Link to comment Share on other sites More sharing options...
Recommended Posts