Sign in to follow this  
Eric Naujock

Using NPM to build /compile melonjs in singe page app.

Recommended Posts

I am looking inside of npm and am finding that melon seems to only go up to version .0.3.0 Is melon something that I can manage though NPM is is the project one that I am not going to easily be able to build as a NPM based project. My main project is build using Melon 3.x and I am looking to upgrade it to 4.0.

Share this post

Link to post
Share on other sites

Whoops, I got confused. melonJS isn't currently on npm. I think the only thing it really needs is a small change to package.json to get it working. But once it's there, you won't be able to just `require('melonJS')` ... There's a JavaScript file in the `build/` directory that you can link in your web app with a <script> element.

For a quick workaround, you can install melonJS right now using bower; the same linking instructions above work for this method.

Share this post

Link to post
Share on other sites

Thank you for the reply. Part of my motivation for this would be to make is so I could compile a melonjs game into a single page app or Angular 2 type of application. Then be able to have the NPM libraries compile and optimise the loading of the game to make things start better. Or integrate the game into an Angular 2 object. My reason for doing this is that I am using the MelonJS environment to perform training functions for employees at a local food service provider. I like being able to make up levels that can work like a restaurant to help a salesperson better understand how the restaurant works with the company. I know this is not the conventional concept of a game, but it just fits in and works so well.

Share this post

Link to post
Share on other sites

I tried to use yo to install and build a basic niolerplate MelonJS app and found this was the versions available of melonjs in the system. 


npm ERR! notarget No compatible version found: melon@4.0

npm ERR! notarget Valid install targets:

npm ERR! notarget 0.4.6, 0.4.5, 0.4.3, 0.4.2, 0.4.1, 0.4.0, 0.3.10, 0.3.9, 0.3.8, 0.3.7, 0.3.5, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.2.5, 0.2.3, 0.0.1


This is how YO answered.


? 'Allo erlic! What would you like to do? Melonjs

Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo melonjs

O OOOOOOOOOOOOOOZ                      ?O
O ZOOOOOOOOO~                          ZO
OO                                     OO
OOO:                                  OOO
OOOOO                                OOOO
OOOOOOO~                            ZOOOO
Hi! It's time to build great games with MelonJS

? What's the name of your game? mygame
   create mygame/package.json
   create mygame/bower.json
   create mygame/Gruntfile.js
   create mygame/manifest.json
   create mygame/.jshintrc
   create mygame/.gitignore
   create mygame/index.html
   create mygame/css/index.css
   create mygame/build/game.js
   create mygame/build/game-min.js
   create mygame/js/game.js
   create mygame/js/resources.js
   create mygame/js/screens/play.js
   create mygame/js/debugPanel.js
   create mygame/data/img/melonjs.png
   create mygame/data/img/bg.png
   create mygame/data/img/icon-152x152.png
   create mygame/data/img/icon-192x192.png

I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated node-uuid@1.4.7: use uuid module instead
npm WARN prefer global jshint@2.4.4 should be installed with -g


Share this post

Link to post
Share on other sites

This is the version of melonjs that was installed using yo.

 * MelonJS Game Engine
 * Copyright (C) 2011 - 2014 Olivier Biot, Jason Oster, Aaron McLeod
 * a simple debug panel plugin
 * usage : me.plugin.register(debugPanel, "debug");
 * you can then use or me.plugin.debug.hide()
 * to show or hide the panel, or press respectively the "S" and "H" keys.
 * note :
 * Heap Memory information is available under Chrome when using
 * the "--enable-memory-info" parameter to launch Chrome


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.