Tools

I want to thank everyone involved in the development of all the great tools that made this project possible. The project is developed on a Linux machine (Ubuntu Gnome 15.04) with the following tools:

Phaser (2.3.0)
Not a tool but a really cool HTML5 game framework that the project is based on. A modified version of Phaser Virtual Joystick plugin is used for touch controls.

Gimp and Export layers plugin
The plugin allow you to export all layers as separate images witch is perfect for making an animation with a frame per layer. Just extract into a texture packer smart folder.

Texture packer
Really great tool to pack all your sprites. Efficient, quick and easy.

Tiled (and a couple of python scripts)
The map is made in the excellent map editor Tiled. I used the the scripts described here to convert a map image into a tilemap.

Editroid
Metroid specific rom-hacking. Makes it possible to dump all Metroid map as image, which I then use the scripts described above to convert to a tilesheet and tilemap.

Atom.io
A free hackable editor that just gets better.

ES2015/ES6
The game is written in ES2015/ES6 transpiled and package using this Phaser ES6 Boilerplate.

 

4 comments

  1. dear awesome creator of this awesome replica 😛

    I am new to the es2015 world and I would like to make a basic endless runner to learn es2015 and phaser and soon Laser 😉
    How did you go about learning make the metroid replica with phaser and es2015 because the game looks soo complex to make and you did an amazing job!

    Very Kind Regards,
    Cedric

    1. Hi! My first advice would be to browse http://www.html5gamedevs.com/forum/14-phaser for interesting threads. I learned a lot from just reading what kind of questions others’ have had and how it was solved. This way you will learn from questions you didn’t know you wanted to ask :-). I learned almost I know from this. Read a lot! Bring your smartphone to the bathroom and read a tutorial while doing your duties :-). You should also checkout tutorials at Phaser.io and download examples from the website to play with. Speaking of examples, that’s also a good place to start. Go trough all examples, and study the code of those you find interesting. My second advice is to try to make a simple game. Don’t waste your time on optimizing performance or anything. Just make something. Play with it. It can start as a top-down zelda game and evolve into a super mario-game. Even if it ends up as a complete mess you learned on the way. Finally, find a good way to organize your code (a successful example of mine is described in my generic enemy class-tutorial). When I managed to find out how I wanted the code to be organized I managed to take the step to create something more complex that’s still manageble.
      There is a lot of ES2015 tutorials out there. The good thing is that you don’t need to learn everything, just take the parts that you like. I’m not sure if I even use anything more than modules, class and the let-keyword that is ES2015-specific in the Metroid clone.
      Good luck!

  2. thank you so much for your wise advice 🙂
    But I am stuck at the es2015 part. I don’t understand how to write and actual game with Phaser and es2015. I succesfuly made pong with es2015 😛 . Where did you learn all that from? For example: Is there a tutorial you followed to understand the extending of the sprite things f.e.: class entity extends Phaser.Sprite {};

    1. You can extend any Phaser class (Full list: http://phaser.io/docs/2.4.6/index, check if you got the correct reference by writing “Phaser.Sprite” or “Phaser.Group” in the console). Actually it’s still prototypes as in ES5, but with an easier syntax. In my example I got everything Phaser.Sprite has, and then I just add (or replace) the stuff I need. You can try to extend something you already use, first by adding nothing to see it works like before and then try to add some custom stuff (like a property to all sprites). The boilerplate in the list above includes a good example to learn from.

Leave a Reply

Your email address will not be published. Required fields are marked *