Remaking Metroid as HTML5-game

[nkholski]

I'm doing a remake of Metroid (NES) as a HTML5-game to develop my javascript skills, and to celebrate the 30th anniversary by revisiting the game I love. I just released a first demo to try out. It's very limited and has bugs, but I will be busy with other things for a while and felt that I wanted to share what I have. I haven't studied the original NES-version that much and mostly just went along as I remember the game, so the game mechanics will definitely need work.

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)

Next version will either be an expansion of the game coverage or something like support for 16:9 resolution or 16-bit graphics mode.

If anyone happens to have docs or data on enemy positions I'm extremely interested. The only way I thought of now is to make a map image with Editroid and try to scan for images and converting that to data, but it will be a bit time consuming to achieve.

I made it available at http://metroid.niklasberg.se

[Meeptroid]

I must admit this is quite well done and I am interested in later releases. Any plans to add new items to the mix?

[snarfblam]

While there is still clearly much to do, this actually looks pretty sweet. Do you have plans beyond remaking the original? (A Metroid equivalent of Zelda Classic would be amazing. Right? Right? :colonrightv:)

If you need help dumping the data from Metroid and/or converting it to a format that is friendlier with your engine, I should be able to lend a hand.

[nkholski]

I have no plans to add anything beyond the original at the moment, items or anything else. One reason I started this is that I wanted a clearly limited project so that I wouldn't fall for the temptation to add experimental code and unfinished features until everything is a mess.

However, it has more than crossed my mind. Depending how the basics turns out I've thought of allowing uploads of custom maps (including custom tiles) and throw in some more possible items to edit into the maps. The free map editor Tiled (Linux/OSX/Win) is used to create maps, so there is no need for me to create an editor.  It would be possible to tweak enemies and change sprites without any coding knowledge, and with some documentation it wouldn't be to hard to add completely new enemies. I'm far from taking this step and unsure if I ever will though.

@snarfblam, I would be really interested in dumped data. I've used Editroid to dump maps as images, then a script to identify unique tiles and another script to create a map for Tiled using the dumped image and generated tilesheet. I've only done Brinstar, but its quite quick. What I'm really interested in is enemy data. A json or any kind of textfile really with a list of enemies with coordinates and enemy type / variant. I put all enemies by hand in the released demo, but would love to avoid that for the whole game. I don't know if there is additional enemy data to dump, such as in which direction the Zoomers (crawlers with spikes) start, but if there is that will be used as well. Do you knowledge on how to extract this?

Edit: I realized that you're the creator of Editroid, so that answers my last question. As I wrote, help with the data would be appriciated. Maybe it would even be possible to add the possibility to export all enemy data as json / text-file from Editroid so this can be repeated by others and to dump even hacks in the future. I cannot promise anything on how this project will progress but having access to this data would rush the development and really encourage me to complete all areas and enemies.

[nkholski]

A tiny status update: Snarfblam provided me with a complete dump of all map-data except the tile layout (which I already had). It was a bit more complicated than I first though but I just managed to inject all data in the map-format I use (Tiled: mapeditor.org). I extremely grateful for the help with this. If I had to do this by any other way it would have been so tedious and imperfect that it could have been a show stopper. I will probably work for at least one more week until the next release, but then it will include the full map (currently unsupported enemy types will probably be substituted with supported) and some other features such as save game.

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).

Another interesting fact is that if someone just replaces the tiles png-file with another one (say with tiles from Super Metroid), it would be totally possible.

[frozenLake]

Aw man, you fixed the door glitch!  :grin:

This is... a rather interesting take on Metroid, and I hope to see this taken even further.

[nkholski]

@frozenLake: Thanks. I'll post updates here when a new version is released. What do you mean with door glitch? I had a few glitches that I fixed. Or do you mean the glitch from the original game that allows enemies to pass to other rooms? I found out that I had the same glitch, and decided to keep it for fun to match the original. :-)

[snarfblam]

I think he's referring to door jumping. In the original game there is a way to get yourself stuck inside a door, and then you can keep morphing and unmorphing to climb up into the wall, stopping periodically to jump a hundred times or so to scroll the screen up so you don't disappear into the void off-screen.

https://youtu.be/pii5spVG9FM?t=37s

[frozenLake]

Yes, Door Jumping (secret worlds) was the glitch that I was referring to.

[nkholski]

Ah. That one. I spent countless hours trying to exploit this as a kid. I wasn't aware it worked in my version too :-). 

A interesting thing during the development is that I realized why this bug exists in the first place. When you turn into a ball your sprite will be shortened from 24 to 16 pixels. With the coordinates placed in the upper left corner of Samus and without changing the Samus' y-value she will be 8 pixels above the ground immediately after transforming and then fall to the ground. When Samus transform back you need to adjust the y-value or Samus will stand up 8 pixels deep into the ground. If you do this quickly Samus won't fall the eight pixels, but she will be adjusted 8 pixels up without triggering collision detection. Perhaps not exactly what happens, but something like that. To simulate Samus little jump from the maru mari-state I initially added a some velocity upwards, but I later solved it by just changing the y-value directly.

[frozenLake]

It... doesn't work.

The doors aren't solid once they reform.

[nkholski]

I made an update today (Alpha 2) featuring the complete world map (thanks to @snarfblam), save game support, elevators, dat.GUI integration, two player mode (experimental) and 16-bit mode (experimental). Read more: http://metroid.niklasberg.se/2016/03/28/alpha-2-released and play the game: http://metroid.niklasberg.se/

[SMXM]

The only glitch I could find is that when I set my health low and set it high the beeping sound won't go away.