Coder Social home page Coder Social logo

boilerplate's Introduction

melonJS 2

melonJS Logo

Build Size Tree-shaking NPM Package jsDeliver Boss Bounty Badge Contributor Covenant

A fresh, modern & lightweight HTML5 game engine

melonJS

melonJS 2 is a modern version of the melonJS game engine that was first released in 2011. It has been rebuilt entirely using ES6 class, inheritance and semantic, and bundled using esbuild for blazing fast build performance and provide modern features such as tree-shaking.

Note: migrating an existing project to melonJS 2 (version 10.0 and higher) will definitely break your game (ES6 semantic and inheritance, nodeJS event emitter, and no backward compatibility with deprecated legacy APIs), and you might want to read first this small step by step guide on upgrading to melonJS 2. If you are looking at the legacy version (9.x and lower) of melonJS, you can find it here under the legacy branch.

melonJS is open-source, licensed under the MIT License, and actively developed and maintained with the help of a small team of enthusiasts at AltByte in Singapore.

About melonJS

melonJS is a fully featured game engine :

Compatibility

  • Standalone library (does not rely on anything else, except a HTML5 capable browser)
  • Compatible with all major browsers (Chrome, Safari, Firefox, Opera, Edge) and mobile devices

Graphics

  • 2D sprite-based graphic engine
  • Blazing Fast WebGL renderer for desktop and mobile devices with fallback to Canvas rendering
  • High DPI resolution & Canvas advanced auto scaling
  • Sprite with 9-slice scaling option, and animation management
  • built-in effects such as tinting and masking
  • Standard spritesheet, single and multiple Packed Textures support
  • System & Bitmap Text

Sound

  • Web Audio support with 3D spatial audio or stereo panning based on Howler
  • fallback to Multi-channel HTML5 audio for legacy browsers

Physic

  • Polygon (SAT) based collision algorithm for accurate detection and response
  • Fast Broad-phase collision detection using spatial partitioning
  • Collision filtering for optimized automatic collision detection

Input

  • Mouse and Touch device support (with mouse emulation)
  • Device motion & accelerometer support

Level Editor

  • Tiled map format version +1.0 built-in support for easy level design
    • Uncompressed and compressed Plain, Base64, CSV and JSON encoded XML tilemap loading
    • Orthogonal, Isometric and Hexagonal maps (both normal and staggered)
    • Multiple layers (multiple background/foreground, collision and Image layers)
    • Animated and multiple Tileset support
    • Tileset transparency settings
    • Layers alpha and tinting settings
    • Rectangle, Ellipse, Polygon and Polyline objects support
    • Tiled Objects
    • Flipped & rotated Tiles
    • Dynamic Layer and Object/Group ordering
    • Dynamic Entity loading
    • Shape based Tile collision support

Assets

  • Asynchronous asset loading
  • A fully customizable preloader

And Also

  • A state manager (to easily manage loading, menu, options, in-game state)
  • Tween Effects, Transition effects
  • Pooling support for object recycling
  • Basic Particle System
  • nodeJS EventEmitter based event system

Tools integration

melonJS is supporting the below tools and frameworks natively or through our official plugin(s) :

Free Texture Packer TexturePacker PhysicsEditor ShoeBox Tiled Cordova Spine aseprite

Tools integration and usage with melonJS is documented in our Wiki.

Using melonJS

For your first time using melonJS, this is where you start

You may find it useful to skim the overview found at the wiki Details & Usage

When starting your own projects, checkout our ES6 x Vite boilerplate or the TypeScript x Vite boilerplate

Demos

A few demos of melonJS capabilities :

More examples are available here


Basic Hello World Example

import * as me from "https://esm.run/melonjs";

me.device.onReady(function () {
    // initialize the display canvas once the device/browser is ready
    if (!me.video.init(1218, 562, {parent : "screen", scale : "auto"})) {
        alert("Your browser does not support HTML5 canvas.");
        return;
    }

    // set a gray background color
    me.game.world.backgroundColor.parseCSS("#202020");

    // add a font text display object
    me.game.world.addChild(new me.Text(609, 281, {
        font: "Arial",
        size: 160,
        fillStyle: "#FFFFFF",
        textBaseline : "middle",
        textAlign : "center",
        text : "Hello World !"
    }));
});

Simple hello world using melonJS 2 (version 10.x or higher)

Documentation

Plugins

melonJS provide a plugin system allowing to extend the engine capabilities.

Here is the list of official plugins maintained by the melonJS team:

If you wish to develop your own plugin, we also provide a plugin template to help you get started.

Download melonJS

The latest builds with corresponding release note are available for direct download here.

melonJS 2 now only provides an ES6 Bundle :

build description
index.js a tree-shakeable ES6 Module Directory
index.d.ts typescript declaration files

Note: if you need your application to be compatible with ES5, refer to our boilerplate that provides automatic transpiling to ES5.

The latest version of melonJS can be installed through NPM :

$ npm install melonjs

And then import melonjs in your project using :

$ import * as me from 'melonjs';

Or it can simply be added to your html, using jsDeliver content delivery network (CDN) :

<!-- load the ES6 module bundle of melonJS v10.0 -->
<script type="module" src="https://esm.run/[email protected]"></script>
<!-- omit the version completely to get the latest one -->
<!-- you should NOT use this in production -->
<script type="module" src="https://esm.run/melonjs"></script>

Note: starting from the 10.0.0 version, the debug plugin is no longer provided as part of the melonJS library release, and has been moved to the official boilerplate

Contributing

For most users, all you probably want is to use melonJS, and all you need then is just to download the latest built release to get started.

If you want to start to be part and contribute to the project, make sure to read our Contributing Guide before starting submitting changes or new features.

Contributors

Sponsors

Support the development of melonJS by becoming a sponsor. Get your logo in our README with a link to your site or become a backer and get your name in the BACKERS list. Any level of support is really appreciated and goes a long way !

Melon Gaming

Altbyte Pte Ltd

boilerplate's People

Contributors

1e4 avatar agmcleod avatar ellisonleao avatar obiot avatar parasyte avatar tuzepoito avatar vibrantrida avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

boilerplate's Issues

Switch to Webpack or Rollup

Grunt is outdated, we need to move the boilerplate to something more modern and most of all maintained :)

add the new 'minimal-ui' tag

this is new in iOS 7.1 and allows to hide the URL bar, I have not yet tested it to really see how it behaves, but I believe that would nice to add in our boilerplate :)

Logo/Icon Proposal

Hi good day! Im Jibbie Eguna, a graphics designer, I would like to ask for your permission to propose a new designs of logo in your application/project. I would like to help projects in open-source .I would just like to propose new designs. Hoping for your positive response Thank You!

Add grunt task that builds application manifest file.

The application.manifest is a file that helps desktop & mobile browsers cache data for offline use. We can generate a manifest that contains the urls to the assets, compiled JS and any html. Store the a timestamp for when it was generated. That way when the person runs the grunt task again, the file will always get changed. It's the only way the browser knows to re-fresh the cache.

[Feature Request] melonJS lib as npm dependency

I would like to avoid including the melonJS library source code directly in my project repositories and I think that the proper way to do that would be to require MelonJS and MelonJS plugins as npm dependencies in the package.json, but as far as I know there is no official npm package for MelonJS / MelonJS plugins, right? You may need to register them I guess.

melonjs and melonjs-plugins names are available in the npm registry.

For the Gruntfile.js and the index.html I would just reference the js files from node_modules instead of lib.

What do you think?

provide basic tool for building and testing through grunt

Now that we "master" grunt, I would like propose to add the required files for grunt and the following to the current boilerplate :

  • a grunt task to build a minified version of the game (still useful for deployment)
  • a grunt task to test the game using a local web-server (like grunt-phantom or others, i don't remember which other ones I saw so far).

Automatically update resources.js

It would be super cool to just populate the data directory and let the boilerplate update resources.js for you! It should be easy to template.

Loading "asar.js" tasks...ERROR

Cannot load asar.js I am not sure what it mean

% npm run serve

> [email protected] serve /Users/pagorn/Downloads/boilerplate-master
> npm run build && grunt serve


> [email protected] build /Users/pagorn/Downloads/boilerplate-master
> grunt

Loading "asar.js" tasks...ERROR
>> ReferenceError: primordials is not defined

Running "resources:dist" (resources) task
>> build/js/resources.js

Running "concat:dist" (concat) task

Running "replace:dist" (replace) task
>> 4 replacements in 1 file.

Running "uglify:dist" (uglify) task
>> 1 file created 4.29 kB โ†’ 1.51 kB

Running "copy:dist" (copy) task
Created 4 directories, copied 9 files

Running "processhtml:dist" (processhtml) task

Running "clean:app" (clean) task
>> 1 path cleaned.

Done.
Loading "asar.js" tasks...ERROR
>> ReferenceError: primordials is not defined

Running "resources:dist" (resources) task
>> build/js/resources.js

Running "connect:server" (connect) task
Started connect web server on http://localhost:8000

Electron on linux problem

Hi, I'm trying to execute the boilerplate on linux with electron.
I run ./bin/electron and a window opens but without melon logo image (like in the browser). It's all black.
No errors in console

grunt-asar returns error

After trying to npm install
follows the code:

npm ERR! git clone [email protected]:github:bwin/grunt-asar Cloning into bare repository '/home/yepan/.npm/_git-remotes/git-github-com-github-bwin-grunt-asar-992302ac'...
npm ERR! git clone [email protected]:github:bwin/grunt-asar fatal: remote error:
npm ERR! git clone [email protected]:github:bwin/grunt-asar is not a valid repository name
npm ERR! git clone [email protected]:github:bwin/grunt-asar Email [email protected] for help
npm ERR! notarget No compatible version found: grunt-asar@'github:bwin/grunt-asar#update-asar'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! System Linux 4.9.0-2-amd64
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /home/yepan/Downloads/boilerplate
npm ERR! node -v v4.8.2
npm ERR! npm -v 1.4.21
npm ERR! code ETARGET
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /home/yepan/Downloads/boilerplate/npm-debug.log
npm ERR! not ok code 0

Remove need to install grunt-cli globally

We can streamline getting started with this boilerplate by making a small addition to package.json that removes the need to install grunt-cli globally:

"scripts": {
  "serve": "grunt serve"
},

Then we can get up and running using npm run serve without any additional steps, which I think makes the readme even more pleasant.

Add toolset for minifying and packing javascript assets

Been meaning to start this with my own projects. I've been pretty lazy on not packing up my javascript files into one. It's a practice I need to get better at, and I'm thinking it might be nice to have in our boilerplate.

So I think it needs todo a couple things:

  1. Pack javascript files into one minified file. Should respect order in index.html somehow?
  2. Alter the index.html to include the one js file.
  3. A grunt task (or something else) to test the game using a local web-server (like grunt-phantom or others, i don't remember which other ones I saw so far).

This is much more than simply compressing and combining the files like our grunt script does in the main repo. Maybe it's a matter of "generating" a default index.html file, and have the user type up a manifest source file. But I think it would be nice to have to not have to manage both a manifest file & index file in development. One could use the grunt build to test in development, but it's much more of a pain to debug a compiled file :P.

add basic example with launch icon and loading screen on mobile

http://buildnewgames.com/mobile-game-primer/

1./ the ability to add a custom square launch icon with:

This works where launch-icon.png is a square 57x57 icon without any iOS gloss (iOS will add the gloss for you). If you already have an icon with rounded corners you can also use the precomposed version:

You can also specify three different sizes to handle newer iPhones, iPads and older iPhones (as well as Android 2.1+ thrown in for free)

 <!-- iPad (72 pixels square)-->
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-ipad.png" />

 <!-- iPhone4+ (114 pixels square) -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-iphone4.png" />

 <!-- older iPhones + Android 2.1+ (57 pixels square) -->
 <link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-iphone.png" />

2./ add ia startup image that is displayed while the browser instance loads. The default image should be 320x460 pixels in a portrait orientation and is added with:

 <link rel="apple-touch-startup-image" href="startup-image.png">

initial-scale 0.5, no good on mobile safari

Using my iPhone 4s with iOS 6.1.2, having the scale set to half as per the boiler plate causes it to take up half the screen. Does not work very well, so I removed that block of code on my own game.

V key for showing debug panel is not working

The S registered key for showing debug panel is not working:

me.plugin.register.defer(this, me.debug.Panel, "debug", me.input.KEY.V);

The debug panel suggest S to show and H to hide: S do nothing, H make rendering to stop completly.

Not sure if related, but sometimes the Melonjs logo is not draw.

how to fix problem the primodials is not defined

I tried to run distribution. But failed

I tried command "$grunt dist" but received the failed response

Here response

Loading "asar.js" tasks...ERROR

ReferenceError: primordials is not defined
Warning: Task "asar" not found. Use --force to continue.

Aborted due to warnings.

https://user-images.githubusercontent.com/16911517/86319158-cb369d80-bc6e-11ea-83c9-767245a4ba3a.png

How to fix problem the primodials is not defined

My system is

node -v : v12.16.1
npm -v : 6.14.5
grunt-cli : 1.3.2
OS : macOS Catalina 10.15.5

Please help me... Have a nice day~ ^^;

Grunt Cli not set as a dependency.

Thanks for the library I just noticed that grunt-cli wasn't set as a dependency so when its first downloaded if the user doesn't either npm install -g grunt-cli or npm install --save-dev grunt-cli then they won't be able to progress through the rest of the readme.

We could either add that to the readme docs or adjust the package.json to have a devdependency on grunt-cli.

npm install chromium-pickle

I have just cloned the repo, and as I try to do npm install I have the following error due to the chromium-pickle package:

CXX(target) Release/obj.target/native_mate/node_modules/native-mate/vendor/src/native_mate/arguments.o
c++: error: unrecognized command line option '-stdlib=libstdc++'

From what I could found online, it seems to be a problem related to OS X Yosemite. Any help would be appreciated.

this garbage crash on npm install

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/grunt
npm ERR! dev grunt@"^1.4.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer grunt@"~0.4.0" from [email protected]
npm ERR! node_modules/grunt-asar
npm ERR! dev grunt-asar@"github:bwin/grunt-asar#update-asar" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Sanic\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Sanic\AppData\Local\npm-cache_logs\2022-03-28T16_49_10_234Z-debug-0.log

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.