Jump to content

Infinite World


Recommended Posts

Is there a Phaser function, or example, on how to create an infinite world?


I am new to Phaser and I'm recreating a Doodle Jump style game to learn this engine. I want to create a never-ending world so the sprite will continue to go 'up' into the world whilst jumping.


I would appreciate any help, thank you.

Link to comment
Share on other sites

Because you're going to deal with increasingly large x or y values on the player in an infinite world, the better course of action is to move the platforms down instead. You would continually create (or better, recycle using the kind of object pooling that this example uses for its bullets) platforms just off the top of the screen, and move them all downwards at a certain pace. I'd suggest not using velocity for this as you want control over the speed constantly. That speed can then be controlled by how far towards the top of the screen the player is, to get that doodle jump effect of the player increasing in upwards speed as it nears the top of the screen, and slowing down when it goes towards the bottom.


So the key things you'll need are:


  • A routine which creates platforms off the top of the screen, and then every frame moves them down by a certain speed.
  • To ideally have platforms killed when they move off the bottom of the screen, so they can be revived and used again at the top of the screen.
  • To have the speed the platforms move down be variable depending on how far up or down the player is on the screen.
  • To ensure platforms only detect collisions from above by using the method in this post.
  • To implement a way to make the player jump (usually via setting player.body.velocity.y to a negative figure in the hundreds) every time it collides with a platform.

You'll find a lot of help on the forums but especially in tutorials and examples. I'd take a good look around the following sites:

Link to comment
Share on other sites

  • 2 weeks later...

I was dealing with this issue recently. Getting the world to expand as needed can definitely be tricky. I'm sure lewster32's method would work just fine, but I had a hard time wrapping my head around the implementation personally.


I found a solution that takes a different approach. The code and demo can be found here: http://codepen.io/jackrugile/pen/fqHtn




This method has the camera following the hero as he moves up. His coordinates move up as expected (lower y value the higher you get). The platforms are stationary, and they keep their same coordinates the whole time. This allows you to use arcade physics without having to worry about any trickery to get it looking or behaving right. All entities behave as they would in the real world.


Then, the real magic happens with world.setBounds(). With that function, we can adjust the y offset of the world and height of the world. As long as we track how high the player has reached in relation to the starting point, we can use that value to adjust both the y offset and height of the world. It will expand to the exact height we need. As platforms fall out of view, they get recycled and added back above the highest platform that is offscreen.


I hope this helps, let me know if it needs any more explanation!

Link to comment
Share on other sites


  • Recently Browsing   0 members

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