How to dynamically build a map for a LARGE world in a CraftyJS game

Question

I'm just getting started with Crafty and am building a game based on this tutorial: http://buildnewgames.com/introduction-to-crafty/

However my game will eventually have a very large world and I want to load only the map necessary for the player's current location. Does anyone know of any examples of doing this with Crafty?

(I'm slowly working my way through the api docs, but haven't found anything enlightening yet - I hope find some kind of built in functionality...)

what I'm specifically looking for is the Crafty code for 1) scrolling the map when the player moves near the edge of the map 2) dynamically changing the the map

I have a few ideas about how do do this, but none of them are appealing, so I'm really hoping it's a solved problem...

Thanks, Aerik

Answer 1

For questions about the library, I think you're best off at

https://groups.google.com/forum/#!forum/craftyjs

You can also search it to find existing answers to your question.

To paraphrase one of the answers here: you can divide your map into several sections, each at least as large as the screen. Make sure that the section where your player is, as well as the sections around it are always created. Once you move onto a neighbouring section, you destroy three old sections and create three new ones so that the player is in the center again.

How you do the bookkeeping is up to you. One way I could think of is to give all dynamically loaded entities a component to identify them as being on a certain map region (Crafty.e("MapRegionIndexX" + mapX + "Y" + mapY)) and store the way these components relate to the 3x3 region in a 2D-array. Once you move to a new region, you can delete the old ones by calling Crafty("MapRegionIndex to be deleted").each(function(){this.destroy()});

On the problem of scrolling when you move near the edge, Crafty has the possibility to automatically center the viewport on the player (check the API), functions in Crafty.viewport. You can probably achieve what you want by using the functions follow, pan, scroll, x and/or y.