Entity - set second bounding box

[Growler]

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: https://i.imgur.com/rDtjLeC.png

Player behind: https://i.imgur.com/86QTdWs.png

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

		this.body.removeShape(this.body.getShape(0));

		// 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: https://i.imgur.com/eOWfe9c.png

		// 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: 

-------------------------

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.

Questions:

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

[Growler]

@obiot any thoughts here?

[Growler]

@obiot Hi Obiot. Wondering if you can help with this?

 

Btw my game is ready if you're interested in trying it - please email me at [email protected]

[PLAYERKILLERS]

Are you using this?

me.game.world.sortOn = "y";

If you are you can simply change the anchor point for your sprite to offset the image. Hope this helps.

[Growler]

@PLAYERKILLERS What does sortOn "y" do? Can you elaborate a bit more on this answer and perhaps provide a couple examples?

[PLAYERKILLERS]

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.

[obiot]

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 : http://melonjs.github.io/melonJS/docs/me.Renderable.html#.tint (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 : me.video.AUTO`, 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  (http://melonjs.github.io/melonJS/docs/me.input.html#.registerPointerEvent), see as well an example of a hover feature in the GUI example : https://github.com/melonjs/melonJS/blob/master/src/renderable/GUI.js

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 : https://github.com/melonjs/melonJS/blob/master/CHANGELOG 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 : https://github.com/melonjs/melonJS/wiki/Upgrade-Guide.

hope this all helps !

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