#deathtroid

[mastervone]

MODDING: The Tilemap Editor

Room resources can be opened, created and edited directly from within Deathtroid. Just start a game and I'll step you through the different modes and settings.

Note that everything is available from the "Editor" menu, so just check that menu out if this post is tl;dr. You can save the changes you've done to a room by selecting the game window and typing ⌘S. There is experimental undo and redo support with ⌘Z and ⌘⇧Z.

Editing properties of the room itself

When you press ⌘T, you will enter the Tilemap editor. In addition, the game will automatically press ⌘I, revealing Tilemap Properties for the selected room and layer.

Each row in the table represents a layer. You create separate layers to control their settings separately, or because they use different tilesets. When you play the game, these layers will be composed, as so:

You can switch to a specific layer by clicking on its row, or just pressing the corresponding number key. You can toggle visibility of a layer (for debugging purposes) with ⌘1..9. The first layer that has "fg" checked (and all layers below it) will be the "foreground" layer, and be shown *in front* of Samus. Rep X and Y decides whether that layer repeats horizontally or vertically (if it is smaller than the other layers). Depth says how fast that layer should scroll relative to Samus: you can set a value other than 1 to get parallax scrolling. Finally, tileset lets you choose different tilesets. In the above example, there are two layers for the foreground and background of a Norfair room, while the third layer contains the door, which is part of the tileset 'doorsAndProps', which any room can use.

You can create and remove layers with the + and - buttons, and rearrange them depth-wise with the up and down buttons.

Finally, you can change the size of a layer. One screen-full is 16 tiles wide and 12 tiles high.

Editing tilemaps

With the layer that you wish to edit selected, you can "draw" tiles by clicking and dragging inside the game window. By default, you have the eraser selected. By holding down your right mouse button, you will reveal the tileset for the current layer, with the tile under the cursor selected by default. In the below screenshot, I right-clicked on the bottom-right tile of the teleporter, revealing the tileset for the save room with the teleporter platform selected. If I now release the right mouse button, my left mouse button will now draw teleporter platforms.

Note however that I selected the left half of a teleporter roof, not a floor. When I draw this tile, I can correct how the tile is drawn by flipping it both horizontally and vertically (making it a right half of a teleporter floor) by pressing U and then I with the mouse cursor over that tile. You can also rotate the tile 90° by pressing O.

Editing collision maps

In addition to the three layers rooms traditionally have, there is a special layer called the collision layer or collision map. You can display it by pressing ⌘D (Debug).

You then select it for editing by pressing '0' (numeric zero). You can then edit it just like any tilemap (although you should not use attributes (U, I, O), but should rather use the correct tile). Square tiles collide as expected. Currently only the 45° slopes work as expected, and the 22° slopes might work sometimes.

Editing entities

You can edit which entities should spawn in a room by switching to the Entity Editor with ⌘E. That will be the topic of a future article.

Opening and creating rooms, and connecting them

You can create a new room from File > New Room (⌘N). You can store it anywhere in your resources folder.

In the future, there will be a "level" resource, which is a collection of rooms, and the connections between them, together creating a single level, like a deathmatch stage or a clone of a specific Metroid game. For now, rooms are just loose, manually connected resources, and you need to manually create Door entities to connect different rooms. That will be covered in the Entitiy editing article.

You can also Open rooms (⌘O), which will teleport you to that room.

[mastervone]

MODDING: The resource system

Every resource that the game uses — images, levels, animation definitions, sprites and tilemaps — are stored together in the "resources" folder. To start modding, you probably want to grab a copy of this folder to make your own changes in. You can right-click the Deathtroid app icon, choose Show Package Contents, and navigate to it through Contents > Resources > resources. Alt-drag it to your desktop to make a copy.

Now that you have your own copy, you want to tell Deathtroid to use YOUR resource folder. When you start Deathtroid, you are presented with our ultra-boring placeholder menu. In the middle, you can choose Resource folder: click the drop-down, "Choose...", and select your own resource folder. This is saved in your settings, so you don't need to do it every time Deathtroid starts.

HOWTO: Make Samus run left

Every resource either HAS a .resource file, or IS a .resource file. For example, samus_run_left.png is a sprite sheet with the animation for running left. Adding this image to the resources folder is not enough to make Deathtroid pick it up: you also need to create a "definition file", a JSON file with the .resource extension. In this case, an Image resource is made by creating samus_run_left.image.resource. You can edit it with any programmer's editor, such as TextMate. The contents of samus_run_left.image.resource is:

{"file":"samus_run_left.png"}

An image can be used by different systems. In ordet for it to be displayable to screen, we also need to create a 'texture' resource, called samus_run_left.texture.resource. Its contents is:

{"image":"samus_run_left.image"}

… essentially just referencing the 'image' file. However, it's still just one big image file, Deathtroid doesn't know of the diferent frames in the image. For this, we need to create a Spritemap file, called samus_run_left.spritemap.resource. Its contents is:

{ "texture": "samus_run_left.texture", "frameCount": 10, "frameSize": [48, 64] }

This resource starts off by referencing another resource — the texture that contains our sprite sheet image. Then we simply define our frame size (the pixel size of a single frame) and the number of frames in the image.

Finally, we need to tell our Samus sprite which animations to play for different states that the Samus entity can be in. These definitions are contained in the samus.animation.resource definition file:

{ "animations" : { "walking-left" : { "size" : [3.0, 4.0], "center" : [1.5, 4.0], "fps" : 15.0, "spriteMap" : "samus_run_left.spritemap" }, "walking-right" : { "size" : [3.0, 4.0], "center" : [1.5, 4.0], "fps" : 15.0, "spriteMap" : "samus_run_right.spritemap" }, ...

One state that Samus can be in is "walking-left". When Samus is in this state, her entity will be 3 tiles wide and 4 tiles high, with a center-of-gravity at (1.5, 4.0) inside the sprite. (This data is not currently used, but will be soon). The animation will be played at 15 frames per second, and will use the different frames in the samus_run_left sprite map.

Other kinds of resources

Tilesets might become their own resources in the future, but right now they are just normal textures. They must be either 64x64 or 128x128 (any square power-of-two will be possible), and each tile is 16x16 pixels.

A "room" is a single room in Metroid. A room has a list of layers (for example a parallax scrolling background layer and a foreground layer), a special collision layer (defining which tiles Samus and other entities can collide with), and a list of entities that will be spawned once a player enters the room. You generally don't need to edit .room.resource files manually, as Deathtroid has a built-in editor for them. That will be the topic of a separate article.

[mastervone]