Nikow Posted April 14, 2015 Share Posted April 14, 2015 Hi ! I'm looking for create a speed runner like or a jumping game like Doodle jump. My question is : What's the better way to make the background parallax effect with Phaser ? Thanks ! Link to comment Share on other sites More sharing options...
Nikow Posted April 16, 2015 Author Share Posted April 16, 2015 Up ? Link to comment Share on other sites More sharing options...
MichaelD Posted April 16, 2015 Share Posted April 16, 2015 You could use a tileSprite and autoScroll function http://phaser.io/docs/2.3.0/Phaser.TileSprite.html#autoScroll if that doesn't work you could use a tileMap, pre-create the map in an editor and then load it to the game, with the right use of camera or .x movement it should play fine. drhayes 1 Link to comment Share on other sites More sharing options...
clark Posted April 16, 2015 Share Posted April 16, 2015 Yeah MichealD is spot on. I used a TileSprite with the texture offset X property (I think). You just set the offset to the speed that you want the texture to move. Link to comment Share on other sites More sharing options...
ZoomBox Posted April 16, 2015 Share Posted April 16, 2015 I'm used to simply use sprites that I move at different speed. Link to comment Share on other sites More sharing options...
srobertson421 Posted April 16, 2015 Share Posted April 16, 2015 MichaelD is correct. Here is an implementation if you need it: preload: function() { // Load our tilesprite image for the background this.game.load.image('background', 'Path/To/Your/Background.png'); // Load our tilesprite image for the ground this.game.load.image('ground', 'Path/To/Your/Ground.png'); }create: function() { // Add the tilesprite for the background to the game at position 0, 0 // params - Xpos, Ypos, Width, Height this.bg = this.game.add.tileSprite(0, 0, backgroundWidth, backgroundWidth, 'background'); // Add the tilesprite for the ground to the game just below the background this.ground = this.game.add.tileSprite(0, backgroundHeight, groundWidth, groundHeight); // Now add our ground to the physics engine for collisions with the player this.game.physics.arcade.enable(this.ground); // Make sure it doesn't react to gravity this.ground.body.allowGravity = false; // Make the ground immovable this.ground.body.immovable = true;}update: function() { // Create collision check for player and ground this.game.physics.arcade.collide(this.player, this.ground); // Finally we move the two tilesprites at different speeds to simulate parallax this.bg.tilePosition.x -= 0.5; this.ground.tilePosition.x -= 1.5;} clark, MichaelD and Pooya72 3 Link to comment Share on other sites More sharing options...
Recommended Posts