Controls: Z or Y- Jump, X - Shoot, C - Toggle Missile, Arrow keys - Movement


Toggle fullscreen

TI uploaded the second alpha version of the game today. As before you won’t be able to play for long until you run into limitations, mainly because of bugs in the map parser. Still, this version brings a couple of new features and news.

1. Complete world map
Thanks to the rom hacker Snarfblam over at the game now features the whole world map. The data was extracted from the actual rom-file and I’ve spent a lot of time parsing the json I got and inject the data into my map in Tiled format. The map now includes every single tile, enemy, item and stuff like secret passages. Since I haven’t added all enemies yet and other stuff missing you won’t be able to travel everywhere or battle all enemies anyway. You can bomb your way down in the room to the right of the first passage to find your way to Kraid’s hide-out though.


Three slots for you and your family to share.

2. Save games
The Japanese version of Metroid featured save games. I made a save game screen using screenshots from the game, replacing Japanese with strings used in the save game screen in Zelda. The data is stored in localStorage.

3. Elevators
I had to add it, because it would be kind of ridiculous to add all map data but still being unable to leave Brinstar. I added an optional “quick mode” because I find the elevators to slow in the original (possibly used instead of a loading screen while parsing the upcoming area).

4. dat.GUI integration
Why didn’t anyone tell me about dat.GUI before? With the help of dat.GUI you can now tweak stuff like Samus’ collected items and current energy level. I plan to add stuff like the possibility to warp between areas in the future.

ladda ned

Samus sister share her energy, items and missiles with her green sister.

5. Two player mode
I couldn’t resist. The box art claimed that Metroid has a two player mode, and now it has. The two player mode is highly experimental and the camera will ignore player two in vertical rooms, plus that player two are unable to enter doors. The second player is controlled by W,A,S,D-keys and V for jumping, C for shooting and B to toggle missiles. Yes, the keybindings are stupid but this is just an alpha. Let’s call it the hugging-version because you need to hug your friend to reach all of the keys. Two player mode is accessible from dat.GUI. I like the idea myself, and look forward trying to beat the game together with a friend. What do you think? (Read more about the two player mode in my previous post.)


I ripped this tiles from Brinstar in Super Metroid.

6. 16-bit mode
This is another experimental feature to allow alternative graphics. It’s possible to toggle between 8-bit and 16-bit version of a few tiles in this version. Sprites and most tiles are unaffected. All tiles will occasionally go black, but hey it’s an experimental feature in an alpha version :-). I would love to find a pixel graphics talent to collaborate with. My preferred style would be to use the full NES-palette to add more colors to otherwise unchanged graphics, like it was done in this blog post (just look at Samus!) or the beautiful Shovel Knight.

Other notes
This version is a bit slower than the previous one, which affects mainly mobiles. This is caused by the larger map size, and will be resolved by using Phaser Tiled Plugin (after making a PR adding Arcade physics) or splitting the map into one file per area (hope not).

In the next version, I hope to get the game up to speed again, fix the map parser bugs, add all enemies (except in Tourian), Kraid, Ridley and all items. Perhaps I’ll add gamepad support, 16:9-mode, minimap and a status screen. I might also upload minor updates with just some of these features.The development is quite straight forward at the moment, and my main challenge is to find time to work on the game.

I promised myself to stick to the original concept until I had a playable game, before adding custom stuff. I couldn’t resist the idea to add a two player mode to the game though. I’m bending my own rules, but I’m still in line with the original English cover (except simultaneous gameplay instead of altering):

This is how the two player mode looks like in the unreleased dev-version.

This is how the two player mode looks like in the unreleased dev-version.

The two player mode required a custom camera able to follow both players. In normal mode the camera will focus on the position of Samus, putting her in the centre of the screen as long it’s allowed by world bounds. In two player mode the second player would be close to the screen edges or on top of player one. Instead we want the camera to focus on the midpoint between the players. This feature was actually really easy to add to Phaser Camera.js source code. I uploaded a demo with source code for anyone interested here.

My aim was to release a new version a few weeks ago, but I’ve had almost no time at all to work on the project. A lot of internal stuff is rewritten, which means that some features that were available before need to be added again. I won’t release anything that miss features of earlier versions so this is stopping me. That said, I’m just 2-3 hours of work away from a new release. It will be quite a large step towards actually creating a full clone of Metroid, but it will still be obvious when you reach the end of what I have had time to do.

The Metroid HTML5 remake is written in ES6/ES2015 and transpiled to ES5 (today’s javascript standard). It’s less advanced than it might sound, especially when you can find boilerplates with task/build runners on Github doing all the work for you so that you can focus on your project. I’m using this excellent Phaser ES6 Boilerplat but there are a few to choose between. It comes with a Gulp-script that will listen to changes and build transpiled and concated versions of your code while working, plus serve it in a local server. The tutorial is still valid if you stick to ES5, but with a adjusted syntax.

Zoomers - Crawling Zebes since 1986.

Zoomers – Crawling Zebes since 1986.

Creating and destroying objects are quite expensive. Memory needs to be allocated for new objects, and their destruction will trigger the automatic garbage collector that may cause spikes in CPU usage. This might not be a problem if you’re creating a something like a board game. However, would you repeatedly create and destroy bullet sprite objects in a shoot ’em up with massive amounts of bullets, it would certainly affect the performance. The solution is called pools. Instead of destroying the objects, you just stuff it away until an object of the same type is needed again.

The Phaser.Group class can be used for various purposes like bulk actions (i.e. enabling gravity on all bodies in the group). It can also be used for pools. In the Metroid Remake, I use a custom pool class which is an extended Phaser.Group. All sprites, except Samus, is pooled. When an enemy is destroyed, its exists-property is just set to false, and when I need an enemy of the same kind I reset stuff like the health property and then I set the exists-property to true again.
Continue reading

Last weekend I got my hands on a complete dump of the map data (enemy positions, false walls, item locations etc) from the original Metroid ROM. The data was provided to me by Snarfblam, the creator of the Metroid ROM-hacking tool Editroid. Instead of working on the game itself I spent the few hours I have to inject the data into a Tiled map-file. I was a bit harder than I expected. For instance, the enemy data has a type property (number) that I needed to convert to the name of the enemy and then to the tile-index number I use in Tiled which symbolizes the enemy and on top of that the type numbers means different things in different areas (type “0” in Tourian is a Metroid, but in Hideout1 it’s a Side Hopper). Very well, it’s all done now and I know for sure that I couldn’t have achieved this without the ROM-dump from Snarfblam (read more on Metroid Construction Forum). It’s also refreshing to be allowed to write poor code with stuffed with globals and countless hacks with no thought on performance. My script only spits out a map, and then it’s done. If the map-file is OK I’ll never need execute it again.


A interesting side effect is that Snarfblam’s and my scripts combined makes it possible to convert a ROM-hack to a map-file that could be run in my HTML5 implementation. (As long as there are no custom enemies and items, which shouldn’t be possible to support at some point).

The raw-data, Snarfblam’s custom scripts for dumping it, my conversion scripts (nodejs) and the resulting tilemap will be available for download as soon as I have tidied it up a bit.

The next public update is at least a week away. I might even publish a tutorial before that. Does anyone read this? Leave a comment to let me know :-).

I’ve made a few quiet updates. Unfortunately, I’ve been in a chain introducing new bugs with the updates. The last one fixed an annoying audio bug but introduced a bug making the map parser fail to detect vertical rooms. So much for exploring! The current state of the development version prevents me from uploading a quick fix so everything will stay in its current state until the code is in shape for a new public update. Speaking of which, this is what I’ve been working on:

New features to expect in the next update:
1. All areas including enemy and item locations
2. All items (wavebeam and varia)
3. Save games (localstorage)
4. Elevators

What not to expect:
1. Any updates to Samus and game mechanics (except new items).
2. New enemy types (unsupported enemy types will probably be replaced with others as place-holders).

Stuff you won’t notice:
1. Completely new tilemap parser that will run semi-asynchronously from boot state, which will speed up the game on mobiles. Also, it’s far more sophisticated than before both on CPU usage and on mapping the rooms correct. With the new parser it will be easy to add support for custom maps in the future. A completely new Metroid game could be built using just Tiled map editor without any coding :-).

The Metroid HTML5 remake is written in ES6/ES2015 and transpiled to ES5. It’s less advanced than it might sound, especially when you can find boilerplates with task/build runners on Github doing all the work for you so that you can focus on your project. I’m using this excellent Phaser ES6 Boilerplate but there are a few to choose between. It comes with a Gulp-script that will listen to changes and build transpiled and concated versions of your code while working, plus serve it in a local server.

This is my first tutorial. If it’s appreciated I will add more posts on different topics I think of while working on my Metroid remake. First up is how I decided code the enemies by creating a generic enemy class that extends Phaser.Sprite, and then add actual enemies as extensions of that class. This approach allows me to reuse code and to add new enemy types with limited effort focusing only on their uniqueness. I don’t want to clutter this page with full-length code from the game, but rather explain with stripped down and altered versions of the code. This is a tutorial focusing the topic in the tile, not on JavaScript (ES6/ES2015 or not) per se.

Continue reading

The response of my first release has been really encouraging! I decided to publish the game in it’s current state because I knew I would have very little time for it in the weeks to come.

I made a few tiny updates though such as fixes to the touch controls and better music handling (although I haven’t gotten around to convert audio files to fall back formats, and I really should try out audioatlas for the sound effects). I also decided to make a quasi multi-thread solution to a huge bottleneck that mainly affected mobiles. I will probably do updates quietly like this until I have something bigger that earns a changelog.

I’m strongly thinking about doing some blog posts on the development also. We’ll see.

First version includes:

  • Complete Brinstar map, but only populated with enemies in the path to the first missiles
  • All items except varia and wave beam. Keep right to reach a special room containing all of them.
  • All brinstar enemy types. They won’t behave exactly as in the original though. My aim was to add them all, and in some cases I just went ahead as I remember them without comparing with the original.
  • Doors, destroyable blocks and lava.
  • Touch controls on touch devices (and decent performance on at least my Nexus 5 mobile).

Shortcomings and bugs:

  • Highly inefficient parsing of the Tiled map-file causing weaker devices freeze after starting a game.
  • Room transitions are pretty bad. It should be on top of the todo-list.
  • Sometimes samus bounces on frozen enemies. I don’t know why…
  • Frozen enemies and destroyable blocks can cause samus fall through walls.
  • Items reappear if you leave a room and return.
  • Not all events are paused when items are picked.
  • Skree bullets are harmless.
  • You can stand up from maru shape (ball) even if there is solid tiles above Samus.
  • Samus animations needs work.
  • A lot of coding was done without checking the original.
  • No support for partial tiles (8×8 pixels).
  • Audio-files in mixed formats and no fallbacks for compability.

Next version:
I don’t really have a plan for this project, and priorities may change but this is what may come in the next version.

  • True to original room transitions.
  • Alternative audio formats
  • Save game and that picked items stays picked.
  • Complete world map
  • Elevators
  • Secret passages (bombs and non-solid tiles)
  • All items
  • Simulated 8×8 pixel tiles.
  • 16:9-resolution
  • A few more enemy types.
  • Gamepad support
  • Code clean-up and removal of quick hacks to rush the first release.