After our review on melonJS we decided it is time to help you get started. The documentation is good but it can be a little challenging to get started.
There is a useful tutorial on the melonJS website as an introduction but this largely focuses on editing an existing game rather than the creation of a new one, which we are going to look at today. If you are wondering if melonJS is right for you then we have an exhaustive review [link].
One of the main benefits of TypeScript is the intellesence which comes along with it. As good IDEs/editors should understand the types you are using then it is able to give you some help along the way.
Before we start coding we need to cover some basic dependencies.
Firstly you will need a code editor, at code monkey club we always recommend Visual Studio Code. It is a free IDE from Microsoft with lots of functionality [link]. That said, if you already have an editor or IDE you are familiar with then you can use whatever you prefer. The tutorial will continue assuming you are using Visual Studio code but you should be able to adapt to your need.
The only other dependency is Node.js, you will need this installed to allow you to run your dev server no one wants to keep having to upload everything to a production environment to develop right? Node.js is a really simple install and can be downloaded for free from the official website. At time of writing 18.16.0 was the version used but future versions should remain compatible. When downloading we suggest you download the LTS (long term service) this will likely be shown after the version number.
We worked with melonJS to create a new boilerplate as a starting point using TypeScript. The boilerplate gives you a nice shell to start development without manually having to get all of the packages/dependencies etc. all that hard work has been done, so you can just focus on the coding.
For those already “in the know” the boilerplate uses:
- ES5 (by default)
For those who haven’t got a clue what the above means then don’t worry you won’t need to understand it for this tutorial.
The final step is to go and download all of the packages which the boilerplate uses. The good news is using then this is just a simple command. At the top level folder you an simply enter npm install in your terminal, sit back and wait. This will automatically download all of the prerequisites you need.
Now you have your repo cloned then you are ready to check everything is working as expected. To do this head over to the terminal (either in Visual Studio Code or PowerShell) and enter npm run dev. This will create a development server for you. Once it is up and running you should be able to head over to http://localhost:5173 in your browser. If everything has worked, you should see the below on the screen:
So, you are now all set to start with melon.JS to create your own game! Take a look at the next tutorial to add an animated character to the world.
The icons in this page come from icons8.com which is a great source of icons for many purposes.