DAME - First Steps

This tutorial will take you through the first steps to creating a tilemap and sprite layer with DAME.

A tilemap is a collection of tiles, some solid and others not, that a player can navigate through. All tiles need to be the same size in a single tilemap, though you can combine tilemaps of different sizes in the same DAME project. Tilemaps are usually used to create large spaces such as entire levels.

A sprite is a single object that can be placed anywhere on a map. Usually the player controls a single sprite, with enemies and things to interact with in the world being represented through sprites as well. Sprites usually have animation attached to them, while tilemaps usually don't. Sprites can also be rotated or scaled in size, while tilemaps cannot.

Creating the Project File

Open DAME and choose New from the File menu to create a new project file.

Creating the Group and Tilemap

First, ensure that the Layers tab is open on the left side of the DAME window, not the Sprites one. If not, click on the tab labeled Layers on the top left part of the DAME window.

Now right-click inside the Layers window and select Add New Group from the context menu:

First AddNewGroup.png

This will open a dialog that allows you to select what kind of layers you'd like to have your new group initially populated with. A group is just a way to collect related layers together; you can make as many as you like in a project file. For now, just select the Map checkbox and click OK:

First GroupCreation.png

A Layer Properties dialog will appear next, where you tell DAME more about the map layer you just asked for. Most of the values here can be left as-is, but you do need to tell DAME about the tileset file you plan to use. A tileset is just a graphics file (usually in PNG format) that contains the graphic for each tile immediately next to each other. (It is possible to create a tileset in DAME itself, but we won't do that here

  1. Click on the ellipsis button next to the Tileset field and locate the tilemap you want to use.
  2. DAME will guess at the dimensions of each tile, but make sure that the tileWidth and tileHeight fields are set properly. If you have multiple rows in your tileset file, the values that DAME guesses will almost certainly be incorrect.
  3. Enter the width and height of your tilemap. These are the number of tiles wide and number of tiles high for your map, not the dimensions of the map in pixels.
  4. Make sure the draw idx and collide idx fields are set properly. Tiles below the draw index will not appear; tiles below the collide index will not be considered solid during collision detection in your game. These values are based on the order in which your tiles appear in your tileset. Remember, tile orders start at 0, not 1.
  5. You can use the scroll x and scroll y fields to set a parallax effect on a tilemap you'd use as a background. These are set in decimals relative to the camera's motion. That is, a scroll value of 1 means that the layer will move normally, 10 pixels for every 10 pixels of camera movement. A scroll value of 0.5 means the layer will move at half speed: 5 pixels for every 10 pixels of camera movement. A scroll value of 0 means the layer will stay at the same position no matter how the camera moves.
  6. Click OK to create your tilemap layer. You can change any of the values you've entered here by right-clicking the new map layer and choosing Edit Layer Info.

First NewMapLayer.png

Rename The Map

Right now, your tilemap layer is named Map1. This isn't a very useful name when you have lots of maps in your project. To change this, right-click your map layer in the Layers tab and choose Rename.

First RenameMenu.png

Enter the new name in the dialog that appears and click OK.

First RenameMap.png

Do the same for the group.

Editing The Map

When you select a tilemap layer, the Tiles palette appears. This is mainly used to choose tiles to paint with your left and right mosue buttons, but you can also add and remove tiles using it, too. When you move your cursor over a tile, its ID (or order) will appear in DAME's status bar. If you ever get confused about the collide or visible index of your tileset, you can check it this way.

If you minimize the Tiles palette, it will appear in the status bar on the bottom-right. Click it again and it'll reappear.

First TilesPalette.png

There are two main modes when editing a tilemap layer: painting and selecting. The easiest way to switch between them is to click their icons on the toolbar:

First PaintSelect.png

You can also use the B key to switch to paint mode, and the V key to switch to selection.

Use the left mouse button to select a tile from the Tiles palette, then click in the map layer itself to start painting tiles. To draw straight lines with the paintbrush, hold the X key (for horizontal lines) or the Y key (for vertical ones) while dragging.

The right mouse button will erase tiles. If you'd like to change what tile is used when erasing, right-click it in the Tiles palette and choose "Set As Erase Tile".

The selection mode allows you to copy and paste tiles, or to erase large regions of tiles. When you click inside a tilemap layer in selection mode, it will create a rectangular marquee similar to those in paint programs. You can move a selection around by dragging it with the mouse, or you can use the usual menu items under the Edit menu to cut, copy, and paste it. To erase everything in a selection, hit the Delete key.

One important thing to keep in mind with selections is that they work as masking tools, too. That is, when a selection is active, you can't paint anywhere but inside that selection. To get rid of a selection area without deleting its contents, choose Select None from the Edit menu, or hit Control-D.

You can use the scrollbars to move around your map as you work, or hold down the Control key and use the arrow keys to pan around as well.

First Map.png

Hopefully, your finished tilemap will be a lot more exciting than this!

Adding Sprites

Let's add some sprites to this project. Sprites need to exist on a separate layer from tilemaps, so right-click your project's group and choose Add > New Sprite Layer.

First AddSpriteLayerMenu.png

Take a moment to rename this layer too by right-clicking it and choosing Rename. But we can't actually add anything to this layer without defining our sprites. Select the Sprites tab in the upper-left part of the DAME window, then right-click the Sprites header beneath the tab and choose Add Anim Sprite.

First AddAnimSprite.png

As you can see from the menu, there are several kinds of sprites that can be created. An anim sprite is the simplest. It uses a single sprite sheet image, where the animation frames sit side-by-side.

Once you've chosen to create an anim sprite, DAME will ask you for more information about it in the Assign Sprite Data dialog.

  1. The Name field sets what name the sprite will have inside DAME.
  2. The Class field sets the name of this sprite's class in the code that you'll export from DAME. Class names should only consist of letters and numbers, not spaces, and are usually capitalized like these examples: Player, KillerBee, Rhododendron5
  3. Click the ellipsis button beside the Image field to choose the spritesheet file. to select the image file. A preview image will appear once you do so.
  4. Just like with tilesets, DAME will guess the dimensions of a single animation frame. You can tweak this with the Width and Height fields. These fields use pixels for their units.
  5. The Index field on the left side of the dialog box lets you choose which animation frame to use as a preview.
  6. Click the OK button to create your new sprite.

First SpriteEntry.png

You can now paint your sprites just like you did with your tilemap. The paintbrush and selection modes work exactly the same as they do when editing tilemaps.

You'll probably want to keep your sprites on the same grid as your tilemap. You can set the grid spacing manually by choosing Change Grid Settings from the View menu, but you can also have DAME set the grid for you by selecting your tilemap layer, then choosing Align Grids to Current Layer from the View menu. In either case, you can toggle grid snapping via the Snap To Grid item in the View menu. Tilemaps are always aligned to their tile dimenions, obviously.

Here's what your project file might look like when you're done:

First FirstMap.png