melonJS is a JavaScript games engine which uses HTML 5. melonJS allows you to create games which you can deliver in the web browser. It is easy to use and easy to get started. The engine is also open source under the MIT license, so you are free to use it commercially without any need to make any mentions of the creators AltByte. If you are worried about making a game which is only browser based, then you may want to check out node-webkit (now known as NW.js) which allows you to package up your game for distribution.
What does melonJS provide?
MelonJS has 6 cornerstone features plus many more. There are also many tool integrations including a great integration with the tilemap editor Tiled, more on that to come.
The first cornerstone is that melonJS is completely stand-alone, all you need is a web host and an HTML capable browser (such as Chrome, Safari, Firefox, Opera, Edge) plus there is plenty of support on mobile devices 📱.
meltonJS supports 2D graphics, using WebGL renderer for desktop and canvas rendering on mobile devices. There is auto-scaling allowing your game to look great on any screen size. It is compatible with sprite sheets as well as loading in graphics from single images. There are even some built-in effects for example tinting.
Sound support 🔊 using web audio support which provides both spatial audio and panning. There is also a built-in fallback to using HTML audio for legacy browsers who don’t yet offer web audio support.
A key aspect for many game engines is in-game physics. melonJS supports multiple shape colliders allowing for a high level of accuracy but also at a great speed.
Input can be provided from mouse, keyboard, and touch with support for both mobile devices and desktops. Touch is provided via mouse emulation. For mobile devices there is also support for motion detection and accelerometer.
One big advantage is the level editing. There is a large amount for tile map support from Tiled. It supports layers, animations, transparency, object support, moving tiles, tile collision to just name but a few of the integration features.
The final cornerstone is assets, they can be loaded asynchronously to save bloating during the load and there is also a pre-loader.
On top of this there is also a state-manager, a basic particle system, pooling, and an event emitter system. It is also worth noting that like other JavaScript games engine is that melonJS also has typescript too if you prefer type-based development. If you would like to understand the differences, then you can take a look at our Phaser games engine review post where we go into more detail.
Getting setup
The easiest way to get going with melonJS is using Python3 to host a web server locally and by using a good IDE. We’re fans of Visual Studio Code so would highly recommend it. There are also other options out there which you may prefer, if you take a look at our post on the Phaser games engine then we go into more detail.
Of course, you will first need to get Python up and running on your machine, luckily we have a blog article about that here. Don’t panic if you are thinking why are we talking about Python, I though this was a JavaScript games engine. Python simply comes with an easy-to-use http server, you could use any web server you like, for example XAMPP which is also free.
If you have Visual Studio Code, then the fastest way to get going is use the ES6 template which the developers at melonJS have kindly provided. Just one prerequisite is that you will need Node.js installed and running first which is very straightforward. You can just head over to the NodeJS website and download the installer at nodejs.org. It is then a case of cloning the boiler-plate repo which can be found here on GitHub.
You can then follow the simple instructions to get up and running which can be found on the read me on the repository.
Development community
melonJS has a community following which are readily active on Discord. Unlike some of the larger games engines it means that it can still offer the personal touch where people are happy to jump in and support. The engine is in active development with a good number of contributors making it well maintained with new features being added regularly.
There are now a lot of games out there using melonJS both commercial and non-commercial. For the full list check out their GitHub page which provides opportunity for all developers to post their games.
Like most JavaScript games engines, you won’t see any large commercial games being released. So, if you already know some JavaScript and am thinking of breaking in to game development then melonJS would offer a good pathway with lots of fun along the way. With lots of community support with a great community then it is ideal for the beginner. Not sure if this engine is right for you then head to our games engine review!
The icons in this page come from icons8.com which is a great source of icons for many purposes.
Leave a Reply