Tilemap Help (boxes flying for no reason)

Hello! I am trying to create a map using an array, like so:

let map = [
	[1, 1, 1, 1, 1, 1, 1, 1],
	[1, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 1, 1, 0, 0, 1],
	[1, 0, 0, 1, 1, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 1],
	[1, 0, 0, 0, 0, 0, 0, 1],
	[1, 1, 1, 1, 1, 1, 1, 1]

I’m able to create the objects successfully, but the objects go flying off, and only some remain on the ground.

  1. Is there any way to fix this?
  2. Is there a more efficient way to create a map?

Thanks in advance! :slight_smile:
Link: Babylon.js Playground

EDIT: I was able to solve the box flying issue by setting the position before adding a physics impostor. Now that this is solved, can anybody point me towards a more efficient method of implementing maps?

Hi BattleSquid and others.


Wingnut goofing around. Click on canvas… WASD keys impulse the sphere. But, something is wrong with BACK and RIGHT (S & D keys). I am still studying that.

Pretty fun! I modded lots of stuff… sorry about all the mods.

Update: PG #10 - no need to click canvas on this one. :slight_smile: More power, too. Using a continuously-set .lockedTarget on a standard ArcCam… with an altitude-boosting adjuster (a Y-offsetter). (Chapman camera crane/jib) :wink:


Here are some mapping options:

DIY editor that presents an editable grid and can save a map (json, buffer, etc)
Images: just draw pixel art and use the image as a map (after parsing the pixel data)
Tiled Map Editor (2D, but has layers) https://www.mapeditor.org/
Blender, etc

I recommend wrapping the map as an object or class and implementing functions like set/getTile(x, y) or set/getVoxel(x, y, z). Then the actual map data can be quite a few things behind that function.

Here are some options for representing the map and a little discussion on each:

array of array of numbers - this is what you have now, these are pretty intuitive to think about because x,y are the actual indexes of the arrays that access the data. There’s no real downside to these unless the maps become so large that they are a challenge to download or load into RAM. If 1 tile is not 1 unit in the engine, then conversion is necessarily, though this is true for all of the techniques.

sparse object - this is something like obj[someKey] = 1, where only the solid positions in the map are stored in the map, and if we access the map and don’t get a value we presume it to be open space. The key in this case can be a 1D index or a string like x${x}y{$y}. This is a (possibly premature) optimization for large maps whose space may be largely empty, and/or whose data per tile is large.

typed array - as a pretty heavy optimization for large continuous maps the value at each tile position can be stored as a typed value (e.g. 1 byte instead of javascript’s default 64 bit number). Typed arrays are 1 dimensional, so a little bit of math is required to convert between x,y coordinates and array indexes (I can share this if you want).

raw pixel data - very similar to the typed array, except pixel data is in the format of 4 bytes to one pixel (r, g, b, a). It can be used and read and then converted into one of the above formats, or just left as is.