MASTERVONE

During the Music Hack Day Stockholm 2013 hackathon, me and mandy forked Deathtroid into Super Mutroid (full source code), added EchoNest and Spotify support, and made a Metroid music game.

You can download it here (requires Mac OS 10.8): Download from cl.ly

From the Hack project page:

Music/rhythm platform game with a Super Metroid theme

Description

Plays a song through Libspotify and downloads song data from EchoNest. Generates obstacles based on the beats in the song.

How to play

W - Jump

S - Duck

When you start the game, enter a player name to the left and your Spotify login details to the right. You can also enter a Spotify track url in the text field under the Login button.

Then just press "Create Game" and wait for the song to load! (The character will automatically start running when the song has been loaded. If nothing happens after several seconds, the song you entered probably isn't available on EchoNest.)

You die if the character runs into the spikes. If that happens, press any key to restart. If you want to enter another track url, you have to quit the game and restart it.

Known bugs

Sometimes crashes when you press Create Game

Flickering character

You switch to the Entity Editor with ⌘E. Ugly, indecipherable icons will now be visible. These icons represent "entity templates". These are descriptions of what kind of entities should be created when a player enters the room, and what attributes they will have. By double-clicking a template, or selecting it by clicking it and pressing ⌘I, you can reveal the attribute editor for that template.

In the room in this screenshot, there is both the template describing how a Zoomer could be spawned (left circle), and an actual Zoomer created from this description (right circle). You cannot edit entities: you can only edit templates. After you have made modifications to a template, you might want to test how your modifications look. You can remove the existing entity and replace it with a new one, freshly spawned, by pressing the "Reload" button (bottom right) or pressing ⌘R (Reload Entity). You can also delete an entity by selecting it and pressing ⌘⌫.

Editing attributes

Every entity (and thus every template) has four mandatory attributes:

Klass: The type of the entity. Is this a Door, Zoomer, SpawnPoint, Sidehopper...?

uuid: A unique identifier used when you need to refer to a specific entity

position:: X and Y values for the entity's initial position, in tile coordinates. Easier to set by just dragging it to where you want it.

rotation: Initial rotation of the entity

In addition to these, you can press '+' to add additional attributes. Depending on the klass of the template, different attributes will be available. Most have velocity, max health, and initial move and look directions.

Making doors

Drawing tiles to make your map looking like it has a door is not enough. You need to add a "Door" entity that actually transports the player when she hits it.

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.

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.