Skip to content

Making Maps

Jump to bottom Edit New page
jessykate edited this page Aug 21, 2012 · 7 revisions

using the Tiled editor

some notes on using the Tiled Map Editor to make a new map for particlequest (pretty general notes)

  • create a new map (command-N),
  • for our style of game, select the "orthogonal" projection type.
  • each maps is made of one or more layers.
  • those layers are comprised of tiles, and the tiles are imported from images outside the program (ie, they are not created inside the program). (png, bmp, jpeg even…)
  • different layers can have different properties. (base layer, objects, roads, etc.)
  • once done with the layers and properties, save/export it to TMX format
  • the browserquest/particlequest game takes the original imported image (ie, the png/bmp) PLUS the tmx file. the TMX file is basically an xml-formatted set of instructions about how to take the contents of the image, and generate the map in the game. (ie, coordinates of specific tiles etc.)

door, portals, checkpoints, static entities... these are all layers with specific properties.

cf. server/js/map.js: generateCollisionGrid: function() …

eg. i think the process to make collision tiles:

  • set a layer property (ie, in the existing game, property "c" gets processed as a collision tile). add this property to as many layers as you want to act a collision tiles.
  • those properties get processed via the processmap.js file.
  • we could customize the processmap.js file to change the property and/or add different properties.

processmap.js.

processmap.js recognizes the following property types:

  • "type" (property.name = "type" and property.value = static entity ID (possibly from the shares/js/gametypes.js file?)
  • "c" (collisions) (client and server)
  • if mode === "client":
  • "v" ==> map.high.push(id) (maybe this means that this tile is "high" or on top?
  • "length" - seems to relate to animation
  • "delay" - also for animation

processmap.js also recognizes Tiled layers named

  • "roaming" (server)
  • "chestareas" (server)
  • "chests" (server)
  • "music" (client)
  • "checkpoints" (client and server)
  • blocking (client)
  • plateau (client)
  • entities (server)
  • visible layers that are !entities (client and server)

the script adds info about each layer to the map object (which is defined differently depending on whether it is the client or server running the script).

and processes them as server-side map info. each of these "areas" is pretty custom to the properties/info that's been added in Tiled. so we should be careful in editing it to understand what the side-effects would be. naturally there are game dynamics that rely on each of these map layers, so the easiest thing would be to use the same categories. renaming them wouldn't be hard but creating our own or removing certain layers would likely be more involved (to varying degrees - TBD! haven't looked at this code closely).

test map creation notes

  • import a random jpg and save it as the tile layer

  • create an empty layer and put it at the bottom as per tools/maps/README.md

  • create a new layer called collisions, and put some tiles in it.

  • right click the collisions layer and select "layer properties..." create a new property with name "c" and value "true".

  • save the map. it saves as a .TMX file automatically.

  • create a new repo branch, eg. git branch maphack; git checkout maphack

  • if you haven't already set up (optionally, virtualenv, and) pip.

  • install the prerequisites in tools/maps/README.md. virtualenv is optional and definitely overkill if you don't use python for other things. but if you do any regular python development, it is completely indispensable. highly recommend taking the time to install it.

  • sudo easy_install pip

  • sudo pip install virtualenv

  • sudo pip install virtualenvwrapper

  • follow virtualenvwrapper initialization steps here

  • create a virtual env for particlequest (eg. $ mkvirtualenv pq), and enter that virtual env ($ workon pq).

  • pip install lxml (will install it in the virtual env if you are in it)

  • the tools/maps/export.py has been modified to take an input filename as an argument.

  • export.py filename.tmx [server|client]

  • the output of the command is to create/overwrite ../../client/maps/world_client.js/json (client) or ../../server/maps/world_server.json (server).

  • so MAKE SURE YOU SAVE/BACKUP ANY MAPS YOU DON'T WANT TO CLOBBER

  • assuming the TMX file was saved into the repository's media/ directory, cd into tools/maps/ and run

  • ./export.py ../../media/lhcmap_exp1.tmx client

  • ./export.py ../../media/lhcmap_exp1.tmx server

  • currently, running this gives me an error. it seems that the default map (tools/map/tmx/map.tmx) has a bunch of data layers. the tiled wiki page documenting the TMX format has a section the <data> tag. not sure how/if we want to create these yet!

  • to be continued... !

Useful/relevant articles:

Add a custom footer
Add a custom sidebar

Clone this wiki locally