Growler

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

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

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

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 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 😛

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.