Back from holiday, and after having missed the release window before leaving, here is finally the latest 7.1.0 update for melonJS.

Some nice things in this release, including :

• Last but not least,  staggered hexagonal and isometric Tiled maps support
• More technical catch-up to align both the Canvas and WebGL renderer, and further improvement to the new me.GLShader class
• Various fixes and improvements in me.Text, Physic, Pointer, Audio and Sprite objects.

See full changelog here, and as always all changes are backward compatible with the previous version, and available here:

https://github.com/melonjs/melonJS/releases/tag/7.1.0

or on npm/jsdeliver :

https://www.jsdelivr.com/package/npm/melonjs

Tell us what you think !

-- the melonJS team

Here's my latest melonjs game! It's a very simple one.

Arch super-villain Poo Tin, which is literally a tin of poo, wants to blot out the colours blue and yellow from the earth! To stop Poo Tin, you have to paint Poo Tin out with a blue and yellow paintbrush! All net proceeds (i.e. after deducting all expenses incurred for this product and subject to the withdrawal being able to be performed in view of Microsoft and Google's minimum payment threshold) shall be donated for humanitarian causes. This game is a work of fiction for entertainment purposes only. Any resemblance to actual persons, living or dead, or entities or events, is purely coincidental.

https://play.google.com/store/apps/details?id=com.customautosys.pootin

It is quite expensive because the net proceeds will be donated to charity. Stay tuned for the Microsoft Store release which is coming soon!

Tried to add a HUD component with score on it. Obtained the font files from their github: https://github.com/melonjs/tutorial-platformer/tree/28425a946836e21e58e8fbc443f380b990e7f527/tutorial_step6/data/fnt

The text does show up, but it appears white, and I can't change the color on it.

This is what I've tried:

// 1
this.font = new me.BitmapText(0, 0, {
  font: "PressStart2P",
  fillStyle: "#000000",
  textAlign: "right",
  textBaseline: "bottom",
});

// 2
this.font.tint.setColor(255, 128, 128);

// 3
this.font.fillStyle = "#000000" (and "#000", and "black")

// 4
this.font.fillStyle = me.Color(0, 0, 0);

What am I doing wrong?

I have some experience writing 2d platform games via my own engine from scratch. Obviously, it takes a lot of time to maintain an engine from scratch (for me, at least) to the point of where I can easily reuse it in future projects. Also, I don't have too much experience in multiplayer games, but I want to give it a go.

My question(s): 

1. Is MelonJS the right choice for writing a nice multiplayer 2d platform shooter? I was looking into MelonJS because of it's ability to easily work with Tiled generated maps. That can come in handy a lot with the development of such a game. 

2. I've noticed there's not truly too much about the multiplayer side of things when it comes to MelonJS. A showcase here and there, but other than that, doesn't seem like too much support? Ideally, on a shooter, a lot fo server side things need to be taken into account to stop the risk of cheating as much as possible. Anyone have any input on things like that? Specifically, are there any examples of MelonJS being used as a multiplayer game?

In addition:

I realize writing a multiplayer game is a huge undertaking and can lead to me being way over my head. However, it's my goal to write a specific game and I am willing to learn as much as I can during that process. 

Any information is welcome and greatly appreciated.

Thank you!

Is it possible to use TypeScript with melonjs?

E.g. can I use a TypeScript class to extend from a Jay-extend class?

code for the three sections are below

the root object as from the ui example is a container

Not too long ago, I got vaccinated with my first Moderna jab. Hooray! My second one is coming up soon.

So the jab has given me motivation. Why not add in a new gameplay feature to The Viral Game?

Unfortunately I can't give you the vaccine if you haven't been vaccinated, but you can feel satisfied by simulating the effects of the vaccine on-screen!

To support the international push towards vaccination, we have added a Vaccination gameplay feature in The Viral Game!

You simply need to click the button, wait for the vaccination to build, then deploy it. It will then start spawning mRNA in the game, which does no damage. When attacked and killed by your white blood cells, it promotes your white blood cells, giving them a star at the top right-hand corner and higher damage against the real viruses in the game.

You can watch our video here:

Download The Viral Game here for Android: https://play.google.com/store/apps/details?id=com.customautosys.viralgame

Visit https://customautosys.com/products/covidgame for The COVID-19 Game for desktop and web (web version works on iOS).

Go on, support vaccination and play The Viral Game now!

I have read that it is possible to drawImage an SVG to canvas now: https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas. Seems like Three.js renders SVG using WebGL too: https://threejs.org/docs/#examples/en/renderers/SVGRenderer.

Because my image is not pixel art, i want the value of image-rendering to optimizeQuality or auto. So can melonjs achieve that?

here is my css :

I am doing a review on your game engine for my software engineering project, just wondering is there any documentation of UML diagrams or any other diagrams to get a high level overview of your project, if not could you suggest a way to do it, please.

Thanks,

Mahbub

I am trying to run the boilerplate tutorial on the local server at localhost8000 as it says in the "readme". I can run it and the tab title says 'boilerplate' so I know it is connected but it the screen remains black. I added the line

me.levelDirector.loadLevel("area_01");

to 'play.js'. I named my file with an underscore so it is not 'area01' like in the tutorial.

I added to the index.html, the most recent cdn <script> for melonJS and commented out the old one so you can still see it or make it active again.

I also have changed the value of property 'keepalive' to true from false in the gruntfile.js located at -> boilerplate/gruntfile.js

This made the local server display the melonJS logo/icon one time. Black again afterwards every time.

I have been trying to trace the problem and there is a single error but I cannot locate where it is:

Loading "asar.js" tasks...ERROR

>> ReferenceError: primordials is not defined

I have attached the boilerplate directory that I have been using.

boilerplate.zip

The two interesting hitboxes are the main character and the platform. The platform is an object drawn in the "collision" layer in Tiled according to the instructions the platformer tutorial. I can't figure out why the following things happen:

1. Why does the main character's hitbox leave the sprite? It moves faster to the right when the screen is scrolling.
2. Why is the platform fixed on the screen? Shouldn't it be scrolling like the other layers? What makes this layer fixed?

Here is the code for the PlayerEntity which shows that the camera should follow the Entity but it actually follows its renderable. Any help is much appreciated. Thanks.
 

game.PlayerEntity = me.Entity.extend({
    
    /**
     * constructor
     */
    init : function(x, y, settings) {
      this._super(me.Entity, 'init', [x, y, settings]);
      me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH, 0.4);
      this.body.setMaxVelocity(0.6, 4);
      this.body.setFriction(0.4, 0);
      this.body.mass = 1;           
      this.alwaysUpdate = true;
      this.renderable.addAnimation("walk", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 80);
      this.renderable.setCurrentAnimation("stand");
    },

    /**
     * update the entity
     */
     update : function(dt)
     {        
        if(me.input.isKeyPressed('left')) {
            this.renderable.flipX(true);
            if(!this.renderable.isCurrentAnimation("walk")) {
                this.renderable.setCurrentAnimation("walk");
            }
            this.body.force.x = -0.6;
        }
        else if(me.input.isKeyPressed('right')) {
            this.renderable.flipX(false);
            if(!this.renderable.isCurrentAnimation("walk")) {
                this.renderable.setCurrentAnimation("walk");
            }
            this.body.force.x = 0.6;
        }
        else {
            if(this.renderable.isCurrentAnimation("walk") && [3, 9].indexOf(this.renderable.getCurrentAnimationFrame()) > -1) {
                this.body.force.x = 0;
            }
        }
    
        // apply physics to the body (this moves the entity)
        this.body.update(dt);
        // handle collisions against other shapes
        me.collision.check(this);
  
        // return true if we moved or if the renderable was updated
        return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0);
    },
  
    /**
     * colision handler
     * (called when colliding with other objects)
     */
    onCollision : function(response, other)
    {
      // Make all other objects solid
      return true;
    }
  });
  

I have downloaded and tried the boilerplates platformer and space invaders. No matter what I do, nothing runs. Just a black screen.

I'm running them locally, using a Laragon apache server. The documentation seems to say that I don't need to use nodejs or grunt. But the boilerplate git says I need both node and grunt. I've been trying over and over, different ways, since yesterday, and I'm about to quit. Can someone help me get these things running? Thanks!

I have been playing a little with Melon JS and I really like it. I started with the platformer tutorial which works fine. Now I would like to add a parallax effect to the tile layers as well but I'm stuck. Here's what I tried so far:

1. Add the property "ratio" to the layer - OK it didn't work, it works for image layers only.
2. I have tried to update the layer's position like this:

var layer = me.game.world.getChildByName("Background1")[0];
layer.pos.x = layer.pos.x + 1; // move the layer by one pixel

But it didn't work, the layer didn't move. Funny thing is, if I add a value, say 600, the layer disappears (I guess it's outside the viewport then). If I reset to 0 it appears back again. I can also flip it using layer.flipY(true); So something is working, but I cannot get it moving for some reason.

Any suggestions are well apreciated.

I'm experimenting with shaders, and find it quite fun. But I'm running into a problem. I don't want the same shader for everything.

Currently I'm initialising the video with a custom compositor. This works fine, but is using the same shader for everything. Is there a way to use one compositor/shader for some of the 'Renderable's but not others? Or is the solution to somehow tell the shader which 'mode' it's in?

I'm testing to have my 2d map lit up by different lights, but that should not have an effect on the HUD..

then when the player moves left this code is called to create the emitter and draw a dust particles as the player moves over the ground

but when its added to the game world nothing is displayed no dust, but I have checked the code with examples and there seems nothing wrong, but no dust, image is loaded fine as no error when loading image so thats fine, but unable to see where the error is...it should work

The start point of the line and end point of the line should be checked for overlap. I.e., the center of the line overlapping the circle shouldn't count.

@obiot

at first it needs a bunch of grunt files installed, so I've done that now I just get a black screen (and melonJS won't load) on localhost:8000

the only error is see when running npm run serve is

"Local Npm module "grunt-asar" not found. Is it installed?"

can anyone help me? It's really unfortunate to see the MelonJS Platform broken like this.

I did install it a few years ago successfully, but something now is so wrong! Can anyone help me figure out what I'm doing wrong?

Thanks!

for NPM :

$ npm install melonjs

For delivery through jsdelivr content delivery network (CDN) URL  :

<script src="https://cdn.jsdelivr.net/npm/melonjs@7.0.0/dist/melonjs.js"></script>

or the following for the minified version :

<script src="https://cdn.jsdelivr.net/npm/melonjs@7.0.0/dist/melonjs.min.js"></script>

and of course the debug panel :

<script src="https://cdn.jsdelivr.net/npm/melonjs@7.0.0/plugins/debug/debugPanel.js"></script>

Note: "official" CDN and NPM install are only available from version 7.0.0 and onwards.