melonJS ES6 Webpack Boilerplate

A simple ES6 Webpack based boilerplate to create games with melonJS, built with :

• melonJS 2
• ECMAScript 6 structure and semantic
• Webpack
• Webpack Dev Server plugin for local development
• Hot Reloading dev server
• Basic Asset Build management
• Minification and Transpiling to ES5 using Babel
• Favicon support using the favicons Webpack Plugin
• a debug plugin to display stats on number of objects, memory usage, draw time, frame rate, etc...

Prerequisites

Ensure you have Node.js installed, then install all the build dependencies in the folder where you cloned the repository :

$ [sudo] npm install

Usage

• npm run dev to start the dev server on watch mode at localhost:9000.
• npm run build to generate a minified, production-ready build, in the public folder

if everything goes well, on running the dev server for the first time you should see this :

Note: when generating the production build, Webpack will attempt to filter files under the data folder to only copy final assets and ignore project files (e.g. .ftpp project files from Free Texture Packer). If you find your file being wrongly ignore you can easily add the corresponding extension in the webpack.config.js file

Folder structure

src
└── data
│    ├── bgm
│    ├── fnt
|    ├── img
|    ├── map
|    └── sfx
└── js
|    ├── renderables
|    └── stage
├── index.js
├── index.css
├── index.html
├── manifest.js
public
├── data
├── bundle.js
└── index.html

• src
  • the root folder for your game source code
  • The entry file is index.js.
  • index.css and index.html are default templates that can be customized
  • manifest.js is a list of asset to be preloaded by melonJS (these won't be automatically imported and bundled by webpack)
• src/js
  • add your source classes here
• src/data
  • where to add your game assets
• public
  • where the production-ready build files will be copied/generated when using npm run build

Debug plugin

In development mode, the boilerplate will automatically register and instantiate the melonJS Debug Plugin

the Debug Panel is hidden by default and can be displayed using the "S" key, it will then provide the below information :

• Amount of objects currently active in the current scene
• Amount of draws operation
• Amount of body shape (requires to enable the hitbox checkbox)
• Amount of bounding box
• Amount of sprites objects
• Amount of objects currently inactive in the the object pool
• Heap/memory usage
• Frame update time (in ms)
• Frame draw time (in ms)
• Current fps rate vs target fps

Note: Heap information requires starting Chrome with --enable-precise-memory-info

Additionally, using the checkbox in the panel it is also possible to draw :

• Shape and Bounding box for all objects
• Current velocity vector
• Quadtree spatial visualization

Questions, need help ?

If you need technical support, you can contact us through the following channels :

• melonJS developer forum
• gitter web chat
• melonJS wikipage
• Discord

For any other non technical related questions, feel free to also send us an email.