Create a map using Tiled Map Editor - lzbk/BrowserQuest GitHub Wiki

The designers created the map using Tiled Map Editor v0.5.1. The output of this software is used in the tools/maps section. At that time (and thus in the export scripy), the tmx file was "all XML" (or was chosen to be so to facilitate data processing). But files are really big and by default some of the element are filled with a binary blob. Tiled map editor can either generate (see software preferences):

• XML (big files, interpreted by the export script);
• XML w/ base64 blobs (not handled);
• XML w/ base64 gzipped blobs (not handled);
• XML w/ base64 zlib zipped blobs (not handled);
• csv files (not handled). The gzipped versions can be 300 times smaller than their XML counterpart, yet to this day the only format handled is the all XML. Make sure the "saving" settings are right in order to be able to export the maps.

Once inside browserquest each tile can be identified either:

• by its (x,y) coordinates ;
• by a unique Id ((x+1) + map_width*y)

In tiled map editor, there are mainly two types of object layers that can be superimposed: areas and tiles.

• ← Areas/Objects Areas can store various information (right-click on a given area to get its properties). The default properties are name, type, position (x,y) and size (height, width). The user then can create ad hoc properties, giving them name and value.
• ← Tiles The meaning of each layer (and each object in each layer) is dictated by some info added in the file.

A map should have the following layers (see processmap.js):

• checkpoints
• music
• blocking
• plateau
• roaming
• doors
• chestareas
• chests
• entities
• Terrain (a variety of sprites and landscape tiles), only the ticked (✔) layers will be included in the final map
• don't remove this layer

The following layers seem to be used for the developer's convenience, but are not exported to the game :

• zones ← used to see screens in the map editor
• mobile zones ← used to see mobiles screen in the map editor (when the player pass a door, the framing can be different)
• portals ← used to see portal doors in the map editor

The map editor uses tilesheets to associate with every tile you select a certain pixel set. The tilesheets are linked to the map by means of a relative path. The original maps will use :

• tools/maps/tmx/mobset.png → relative path: mobset.png
• client/img/1/tilesheet.png → relative path: ../../../client/img/1/tilesheet.png Whereas mobset is not necessary (yet see below the use of the 'entities' layer), it is crucial that the tilesheet (called tilesheet) is indeed the same as the one in the above directory.

###Tile properties Each tile of each tilesheet in Tile Map Editor can be assigned a set of attributes. Depending on the concerned tilesheet, the set of attributes is different.

Mobset: Whether they are NPC or items, every tile in the mobset is assigned a "type" property. The name will be reused afterwards in the code to define the sprite associated and the properties of the object (NPC or item).

Tilesheet: terrain tiles can have various properties (valueless attributes)

• none : user can tread on the tile;
• 'c' → closed(?): for walls and other sprites which block the player;
• 'v' → visible(?): the user can share the tile with the object, but the object will remain visible over the player (typically used to allow the player to walk behind the top of the trees or houses).
• 'length' → animated : animate using the X sprites on the right of the tilesheet (the beach waves for example)

This is used to create zones of "roaming" enemies. They will be placed randomly in the area, and behave according to their class.

The type of the area will bear the name of the class of "mob" to place in the zone.

The nb property says how many enemies should be added. (NB: there might be limits regarding the density of population in the area, haven't checked that yet…)

Each screen is a 30 tiles x 15 tiles portion of the map. The zones layer contains a sum of such rectangle. It does not appear to be used when the map is processed, but just to show the screens to the user and where they overlap. In the game screen change when the user reaches the edge.

This type of zone is pretty self-explanatory. Each door teleports the user to another spot in the map, thanks to its properties :

• cx: camera position → (coordinates)
• cy: camera position → (coordinates)
• o: orientation → 'u' up, 'd' down, 'l' left, 'r' right
• x: exit position → (coordinates)
• y: exitposition → (coordinates)

In the following illustration, a 30x15 screen is displayed. By convention, the camera always is separated by 7x7 tiles from the bottom left corner of the screen.

In the following screen, the door is situated at mid screen and the room is centered. The door is on tile (126,143), hence the origin (bottom left corner) at (112,145) and the camera will be at (112+7,145-7) = (119,138). From the bottom-left corner we move right (x+7) and up (y-7). To sum up, a door pointing to this room will have the following attributes:

• cx: 119
• cy: 138
• o: u ← the character looks up when going in through the door
• x: 126
• y: 143

todo

todo

todo