A wrapping map in PIXI?

[NanoWizard]

I wasn't able to find anything about this through Google, but I apologize if a question similar to this has been answered elsewhere.

 

I have a game map with several sub objects as a PIXI.Container, although it's not terribly large or complex. The map is panned by dragging, which updates it's position property. I would really like to have the map 'wrap around' so that when the view is at the edge, it would appear continuous with the opposite side. I initially thought about rendering the Container multiple times on each animation loop (if needed), at the necessary positions, but that doesn't seem to work. I also thought about creating deep copies of the map with only the positions changed and adding each to a larger container if they are needed, but that seems excessive and I'm sure it would be very slow if the map happens to be updating frequently. 

 

What would be the best way of achieving this functionality in Pixi.js?

 

I've been deep in web application development for several years, but only recently picked up PIXI, so I imagine there are probably better ways of doing some things than the way I am currently. Should I be setting up my display objects differently?

[ivan.popelyshev]

1) There's Tilemap object in rpgmaker: https://github.com/holywyvern/mv-pixi-upgrade/blob/master/js/rpg_core.js , look at how it works . They actually cache their map in canvas and draw new tiles on scrolling, also they draw 4 textures from it, so its cyclic buffer

 

2) Im writing a lib https://github.com/pixijs/pixi-tilemap , look at src/pixi-tilemap.js. You have to create a CompositeRectTileLayer, put RectTileLayer into it, then call "clear()" and "drawRect()" every time you need to update the map. That implementation is super-fast and it have no limit for map size or wrapping stuff. For now it works only with rpgmaker, but I can help to integrate it into your project

[ivan.popelyshev]

My gameofbombs.com isnt using pixi yet, but I can tell you how my map works if you show me what are you doing. It handles multiple types of wrapping: left<->right up<->down,  left<->up right<->down and others.