Tutorial For Endless Runner?

[MishaShapo]

I've searched the Community Tutorials and I've Googled around, but I haven't been able to find a tutorial for an endless runner like Jetpack Joyride.

 

I've seen the "Spring Ninja" tutorial but I am looking for something more complex. Specifically, I want to answer:

• How do I continuously load predefined tilemaps and unload them once they are off screen?
• Should I make the player traverse through the tilemap or make the tilemap move.

 

Thank you for reading and helping. =)

[MishaShapo]

I am sorry to have to do this but: bump.

[drhayes]

Apology accepted. But caveat poster: I've never done any of this.

 

Jetpack Joyride's levels are probably procedurally generated so you wouldn't have to worry about loading tilemaps from somewhere while the game was running.

 

First, don't let the player move beyond the confines of the screen.

 

Second, there's always a floor and a ceiling and they never move relative to the player or the screen, so you could make invisible sprites with physics bodies for those.

 

Third, the background changes as the player runs along... which could just be a background image whose position is tweened as the player's speed. Heck, a tween is probably overkill -- just "this.backgroundImage.x -= playerSpeed;" or something. It's up to you to figure out how to hide the seam between one image and the next, but I bet you could achieve that graphically with no code, e.g. make the graphics on the border of the image look like a door or something.

 

Then, you could generate platforms (Sprites) that move slowly from right to left (there's that "platform.body.velocity.x = -playerSpeed;" thing again). As they exit off the left side of the screen you can call kill on them to recycle them.

 

Under this scheme the player's position doesn't change much beyond the borders of the screen; it's everything else that moves. You don't have to worry about your ints getting to big for JS to handle or anything weird.

 

Et voila.

[ZoomBox]

I have personnally already done this using P2.

My floor was some P2 kinematic sprite and I continuously placed them on the right of (and off) the screen and then apply a velocity to them to make them move toward the player.

The player was applied a velocity too, to "counter" the ground friction and move forward.

[fariazz]

You can just keep the player fixed on the screen and move the level. Level elements like blocks or ground gets generated on the right side of the game and killed once it leaves the screen on the left side.

 

For the player to stay fixed you will have to give it a velocity equal to the opposite of the level items velocity.

 

Also, since you'll be creating and destroying lots of objects I'd recommend looking into using a "pool of objects" (find the object recycling example in the Phaser Examples page).

 

I include a game like this in my online course (Module 6) which does all of the above.