Data structure for levels in games

Question

I am building a platform game in JavaScript using canvas , which is completely tile based. What is the best way to store blocks of objects in a game (walls, floors, objects)? The fact is that each tile can be destroyed or created.

I currently have a 2D array, so I can quickly check if the item is in a specific position X and Y. The problem with this is when the user moves and the map needs to scroll, I need to reassign each block. And what happens when an element is at x = 0 ? I cannot use negative indexes.

I would prefer the scrollable counterpart to be used as a tile at a time. I also plan to randomly generate maps as the user moves and if he has not yet been generated. Therefore, as soon as something is generated, it must remain forever.

Another point that I should mention is that it will also be multi-user. So screen fragmentation is a great idea until the cached data gets dirty and needs to get the latest data from the database. Ha, I'm so new to all of this; seems impossible, any help is much appreciated.

Answer 1

Since you have infinite levels, I would suggest a structure similar to what you already have, with a little customization.

Instead of storing everything in one large array and moving things inside this array every time the user moves (ouch), instead, 9 fragments of the map (each of which is approximately equal to twice the size of the screen) are stored when the user approaches the edge of the current piece, delete the pieces that are off the screen, move all the pieces to the left and load new ones in the gap.

Hope this was clear, but just in case, here's a diagram:

The letter squares are the pieces of the map, and the red square is the viewport (I drew it a bit, I remember that the viewport is smaller than the black squares). As the viewport moves to the right, you unload pieces AB and C, move all the others to the left, and load new data to the right. Since the piece is twice the width of the screen, you have the time it takes the user to cross the screen to generate / load a level into these pieces. If the user moves quickly around the world, you may have a set of 4x4 pieces for extra buffering.

To return to previous map fragments. There are several ways to do this:

• Write fragments to your hard drive when they are no longer in use (or something similar in javascript)
• Expand your piece, set endlessly in memory. Instead of an array of pieces, there is an auxiliary array that takes the x / y position of the piece and returns a piece (or zero, which indicates that the user has never been here before, and you need to generate it).
• Generate your levels procedurally, this is difficult, but means that after a piece is disconnected from the screen, you can simply dispose of it and be sure that you can restore the same piece again later.

Answer 2

Obviously, there are many ways to do this.

If the levels are not too large, you can save the original design of the 2d array and use the variable to store the current x / y scroll position. This means that you always save all the information about the card in memory and get access only to the parts that you need to display on the screen.

When drawing, you determine which tile is visible at the current x / y scroll position, how many tiles fit on the screen with the current screen width and draw only the ones you need.

If you browse whole fragments at a time, then this is pretty easy. If its more analog scrolling, you will need finer grain control, where in the tile you are starting to draw, or you can trick and draw the entire set of tiles in the bitmap in memory, and then split it into a canvas drawing with a negative offset.

Answer 3

I somehow defined this in XML and JSON ... I think JSON serialization would be much faster and more efficient (not to mention easy) with JavaScript, especially since JSON lends itself so well to variable lengths as you will need for levels "N" in each game.

Using the standard format will also make it more reusable and (ideally) encourage more collaboration (if that's what you are looking for). You can check out my first attempt to create a video game scheme for a level structure .

As fileoffset says, there are many ways to do this, but I highly recommend keeping your level data (i.e. concepts) separate from your rendering (i.e. objects in motion, paths, speed, synchronization, x / y / z co - ordinate positioning, etc.).

Again, since the article said that the area is changing most rapidly, and there is no information if WebGL, SMIL + SVG, Canvas + Javascript, good ol 'Flash / Actionscript or something else will be the best way for you, depending on your needs and the type of game you are developing.