Jump to content

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: 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]);


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

Link to comment
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.

Link to comment
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 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 ?

Link to comment
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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...