Jump to content

A wrapping map in PIXI?


Recommended Posts

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?

Link to comment
Share on other sites

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 :)

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...