Entity - set second bounding box

Recommended Posts

Using Melon JS 5.1, I want to have an entity bounding box for collision, and a separate box for click interactions. 

Meaning, the smaller thin red rectangle is collision for the tree. If the player's Y coords are less than the tree's red collision rectangle, the tree appears behind the player. If the player's Y coords are greater than the tree's red collision rectangle, the tree appears in front of the player:

Player in front:

Player behind:

game.TreeEntity = game.MapObjects.extend({
	 * constructor
	init: function(x, y, settings) {
		// super constructor
		this._super(game.MapObjects, 'init', [x, y, settings]);


		// Divide height by 10 because we want the collision box to be basically flat
		this.body.addShape(new me.Rect(0, 0, settings.width/2, settings.height/6));
		this.anchorPoint.set(0.5, -2);


                me.input.registerPointerEvent('pointerdown', this, (e) => {
			console.log('This is a ', this.type);

I've tried adding a second shape to the Tree. The idea, again, you have a large area to click on the tree and get information about it.

This new click rectangle is causing the original centered collision red rectangle to offset to the top left:

Problematic offset larger shape:

		// Clickable to get name
		this.body.addShape(new me.Rect(0, 0, 96, 192));
		this.anchorPoint.set(0.5, 0.5);

This is my desired end result: HXlIKuJ.png


Moreover, the registered click event, registerPointerEvent, bound to this (the tree entity) only fires on clicking the smaller collision rectangle, not the larger shape intended for clicks.


1) how can I add a second clickable rectangle on the Tree entity that doesn't interfere with the current smaller red rectangle collision shape?

2) how can I specifically bind the registerPointerEvent to the larger clickable rectangle, not the smaller collision shape?

3) On hover, how can I change the coloring and/or opacity (to indicate that the tree is clickable)


@obiot @Parasyte

Share this post

Link to post
Share on other sites

This sorts entities along the Y (vertical) axis. Use it in your initialization code to keep your tree and/or other entities in the foreground. The default is the Z (depth) axis.

I would also recommend updating to 6.4.0. There was some strange behavior with anchor points way back in those versions. I think you will appreciate the updates once you have time to review them.

Share this post

Link to post
Share on other sites

y-order sorting is a way to cheat with sprite draw sorting, especially in isometric games, so that (simply put) things at the bottom of the screen are properly overlapping thing at the top :) if you google it (game y-order sorting) you'll find lots of discussion about it, vs z-ordering and with some examples and pro&cons.

About changing colour, using the latest (6.4.0) version of melonJS and WebGL (tinting is not yet available with the Canvas Renderer), you can use the sprite tinting features (note that in the 6.x release cycle, WEBGL is not the default, you will have to force it in the video init method at least by specifying `renderer :`, this will change in the 7.x release as WebGL will now be the default).

about hovering, you can use the `pointerEventer` and `pointerLeave` event  (, see as well an example of a hover feature in the GUI example :

As for the bounding box, I did not really "deeply" think about your issue, but yeah definitely, on top of the y sorting (if that helps) you should really consider upgrading to the latest version if possible.

the changelog is quite huge since the 5.1.0 version : and except for all utility function that were moved under the me namespace, mostly all API changes since then were implemented in a backward compatible fashion, so updating should be relatively smooth :

hope this all helps !

and yes I would love to try your games, will send you an email right after, thanks 😛

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.