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.
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.
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.
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.
The icons in this page come from icons8.com which is a great source of icons for many purposes.