Skip to content

Level maps

Jump to bottom
Hayden Schiff edited this page Nov 29, 2019 · 6 revisions

This page will show you how to work on tilemaps using the Tiled level editor. You may want to read Intro to Tiled before this page.

Table of Contents

Opening a map

To open a map in Tiled, select File>Open in Tiled and then navigate to the appropriate .tmx file (do NOT open the .json versions of our maps). From the game's main folder, the maps are located in assets/tilemaps/.

Layers

Once the map is open, you'll want to pick a layer to edit. The layers are listed near the top left of the program. The purpose of each layer is listed below.

Platforms

The Platforms layer contains all the tiles that make up the game world. You can see all the tiles near the bottom right of the program. The behavior of each tile and how the player can interact with it is defined by the tileset, which you can learn about on the Tilesets page. You can learn more about editing the Platforms layer in the Editing Tile Layers section of Tiled's manual.

Background

The Background layer is another tile layer. Unlike the Platforms layer, however, all tiles in the Background layer will not have collision, and they will be slightly darkened when they appear in the game (unfortunately, there is no way to make them show up darker in Tiled as well).

Mobs

The Mobs layer defines the starting positions of all the mobs that will appear in this level. A "mob" is basically anything that moves in a level (e.g. the player, enemies, etc). This is an objects layer, which you can learn more about in the Working with Objects section of Tiled's manual.

All the available mobs can be found in Mobs folder of the Templates panel. Make sure you have the Mobs layer selected, then just drag-and-drop the template you want into the map. To ensure that your mobs don't end up out of bounds, make sure that your mobs don't overlap with any solid tiles.

Here are the currently available types of mobs:

  • Player: The player's avatar (N.B. There must be precisely one of these in every map.)
  • Worm: A very simple enemy with no AI; it just sits there.
  • DinoDog: An enemy which patrols the area around where it spawned. It will turn around either when it gets too far from its spawn, or when it runs into a wall.
    • Custom properties:
      • goLeft: If checked, the DinoDog will be moving left when it spawns; otherwise, it'll be moving right.
      • range: The range defines how far DinoDog will walk from its spawn point (in either direction) before it decides to turn around. Note that DinoDogs are affected by ice physics, so they will slide a bit further out of the range when they're on ice. If you would like to disable the range (meaning it will only turn around if it hits a wall), set the range to -1.
  • BigButton: A button which can be jumped on to trigger events. It can trigger a message, warp the player to a different level, or do both in sequence.
    • Custom properties:
      • messageDuration: How long (in milliseconds) the message will remain visible. If there is no message, set this to -1.
      • messageText: A message to be display, if you want. You must also set a messageDuration if you set this.
      • playerOnly: If checked, only the player can trigger this button. If unchecked, any mob can trigger it (dunno why you'd want this, but it's there).
      • warpTo: The ID of a level to warp the player to. If there is a message, the player will not be warped until the messageDuration expires; otherwise, they will be warped immediately. If this is left blank, the player will not be warped.

Messages

The Messages layer contains invisible triggers for messages to be shown to the player. This is an objects layer, which you can learn more about in the Working with Objects section of Tiled's manual.

All the available messages can be found in Messages folder of the Templates panel. Make sure you have the Messages layer selected, then just drag-and-drop the template you want into the map. Once you've placed a message, you can grab the arrow-shaped handholds to resize it. All message types support these custom properties:

  • text: The text of the message to be displayed
  • repeat: How many times can this message be displayed before it is disabled? If you want a message to last forever, set this to -1.

Here are all the available message types:

  • AreaMessage: AreaMessages appear while the player is standing within the rectangle, and disappear as soon as they exit.
    • No custom properties besides the ones listed above.
  • TimedMessage: TimedMessages appear when the player enters the rectangle, and disappear after a set length of time.
    • Custom properties:
      • duration: How long (in milliseconds) the message should remain visible for

All text fields use the font Fool, which has a fairly limited character set, so you might not be able to use some punctuation (you can see the full character set at that link). In addition, the text fields also support displaying keyboard and gamepad icons; for example, you can do Press <button_a> to jump!. All the names of supported characters are listed in src/Utils/buttonchars.js; you must surround the names with angle brackets (<>) to use them. The corresponding icons can be seen in assets/fonts/foolplus.png (this image also includes all the Fool font characters, but in a jumbled order).

Saving and exporting

When you are ready to save the changes you've made to a level, you will need to both save the map and export it. Saving the map is just Command+S/Ctrl+S (or File>Save). You will then need to export it as a JSON file. The JSON file should be placed in the same directory (assets/tilemaps/) and should have the same name besides the extension (e.g. you should export level1.tmx to level1.json). You can export with Command+E/Ctrl+E (or File>Export). It may ask if you want to replace the existing file – as long as the filename is correct, you can click "Yes".

Creating new maps

The easiest way to create is a new map is to simply copy an existing .tmx file to use as the basis for your new level. When naming your new .tmx file, please avoid using spaces or unusual/special characters.

In order to play your new level in the game, you will need to add it to the assets/levels.json file. Open levels.json in a text editor (e.g. Atom, Notepad, TextEdit, etc) and add your level to the list array. All the levels in the list must be in quotation marks and separated by commas.

To manually switch levels, you can use the game.level = name command in the JavaScript console. See Playtesting § Using the JavaScript console for more info.

Go to wiki home page

Clone this wiki locally