Jump to content

Seamlessly looping worlds in pixi.js?


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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