Seamlessly looping worlds in pixi.js?

[Vassildador]

Hello everyone,

A friend and I are currently working on a game with pixi.js as the renderer in our engine. The experience has been incredibly smooth so far but while developing some Camera features we ran into a roadblock.

Currently we're using a DisplayObjectContainer inside our stage to simulate a camera. The player entity moves relatively to the world/level and the camera follows it's position. We've also implemented camera zooming by altering the scale of said DisplayObjectContainer. On the stage itself we additionally add a couple of backgrounds (using TilingSprites) which move depending on the player's movement for a parallax effect. On top of that, a level can consist out of multiple zones with their own sets of backgrounds which are loaded when the player reaches the zone's coordinates.

Now, what we want to achieve is that when a player gets to the "end" of the whole level, the level will loop back to the first zone. An easy way to visualise this can be found at http://kirillmuzykov.com/wp-content/uploads/2014/07/looped_world.png

I'd like this to be seamless, but I cannot think of a solution how our current system could do this, as for instance half of the DisplayObjectContainer would need to be positioned at the very start of the world, while the other half would be at the end of the world.

Phaser has an example of this, but it "teleports" the player back to the start of the level when the edges are crossed, creating a poor gameplay experience when there happen to be enemies on the other end. The demo can be found at http://examples.phaser.io/_site/view_full.html?d=world&f=world+wrap.js&t=world%20wrap

Does anyone happen to have an idea of how we can create this effect? I'm happy to provide some pseudo code of our current camera implementation if necessary.

TL;DR: We want to seamlessly move our camera from the end of a level back to the start as if the level keeps scrolling infinitely. How can we achieve this?

[agamemnus]

It's very implementation-specific. If you are tile-based you could just draw (create) different sprites (per tile) every frame depending on where the character is. Then, well, you know... it is just a math problem at that point... you know... math mod..

 

Edit: might seem a bit wasteful but modifying the sprite data is nothing compared to actual draw operations.