Problems with UI example

[soulVampire]

have used the ui example to write code to add a floating map panel to the game but the buttons in the map panel don't respond to events, but have use the ui example almost as is just some changes to the way sprites are displayed, not hard coded by using a generic panel code to allow any type of floating panel graphic to be used as the code sows below, does any one have any clue as to why the buttons don't respond to mouse over event, but if i change the button from floating=false to floating=true the button responds to mouse over events

code for the three sections are below

game = game || {};

 

game.floating_generic_panel = me.Container.extend ( {

 

init: function (panel_posX, panel_posY, panel_width, panel_height, panel_image_name, is_floating) {

 

// call the constructor

this._super(me.Container, "init", [panel_posX, panel_posY, panel_width + 2, panel_height + 2]);

 

this.anchorPoint.set(0.0, 0.0);

 

// persistent across level change

this.isPersistent = true;

 

// use screen coordinates

this.floating = is_floating;

 

// give a name

this.panel_sprite_name = panel_image_name;

 

/********************/

/* panel background */

/********************/

this.floating_panel_sprite = new me.Sprite(1, 1, {

image: this.panel_sprite_name,

framewidth: panel_width,

frameheight: panel_height,

anchorPoint: new me.Vector2d(0.0, 0.0)

});

this.addChild(this.floating_panel_sprite);

 

// input status flags

this.selected = false;

this.hover = false;

// to memorize where we grab the shape

this.grabOffset = new me.Vector2d(0.0,0.0);

},

 

onActivateEvent: function () {

// register on the global pointermove event

this.handler = me.event.subscribe(me.event.POINTERMOVE, this.pointerMove.bind(this));

//register on mouse/touch event

me.input.registerPointerEvent("pointerdown", this, this.onSelect.bind(this));

me.input.registerPointerEvent("pointerup", this, this.onRelease.bind(this));

me.input.registerPointerEvent("pointercancel", this, this.onRelease.bind(this));

 

// call the parent function

this._super(me.Container, "onActivateEvent");

},

 

onDeactivateEvent: function () {

// unregister on the global pointermove event

me.event.unsubscribe(this.handler);

// release pointer events

me.input.releasePointerEvent("pointerdown", this);

me.input.releasePointerEvent("pointerup", this);

me.input.releasePointerEvent("pointercancel", this);

 

// call the parent function

this._super(me.Container, "onDeactivateEvent");

},

 

/**

* pointermove function

*/

pointerMove: function (event) {

this.hover = this.getBounds().containsPoint(event.gameX, event.gameY);

 

if (this.selected) {

// follow the pointer

this.pos.set(event.gameX, event.gameY, this.pos.z);

this.pos.sub(this.grabOffset);

this.updateChildBounds();

}

},

 

// mouse down function

onSelect : function (event) {

if (this.hover === true) {

this.grabOffset.set(event.gameX, event.gameY);

this.grabOffset.sub(this.pos);

this.selected = true;

// don"t propagate the event furthermore

return false;

}

},

 

// mouse up function

onRelease : function (/*event*/) {

this.selected = false;

},

 

// update function

update : function(dt) {

this._super(me.Container, "update", [ dt ]);

return true;

},

 

draw: function(renderer) {

this._super(me.Container, "draw", [ renderer ]);

}

});

 

game = game || {};

 

game.floating_map_attach_button = me.GUI_Object.extend ( {

 

init: function () {

 

this._super(me.GUI_Object, "init", [4, 4, {

image: "map_attach_button_normal",

framewidth: 18,

frameheight: 18,

anchorPoint: new me.Vector2d(0.0, 0.0),

}]);

 

this.setOpacity(1.0);

 

this.floating = false;

},

 

/**

* function called when the pointer is over the object

*/

onOver : function (/* event */) {

this.setOpacity(0.5);

},

 

/**

* function called when the pointer is leaving the object area

*/

onOut : function (/* event */) {

this.setOpacity(1.0);

},

 

/**

* function called when the object is clicked on

*/

onClick : function (/* event */) {

console.log("on click event")

// don't propagate the event

return false;

},

 

/**

* function called when the pointer button is released

*/

onRelease : function (/* event */) {

 

// don't propagate the event

return false;

},

 

draw: function(renderer) {

this._super(me.GUI_Object, "draw", [ renderer ]);

}

});

 

game = game || {};

 

game.play_screen = me.Stage.extend({

/**

* action to perform on state change

*/

onResetEvent: function()

{

// load a level

me.levelDirector.loadLevel("castle_level");

me.game.world.addChild(new game.player_plaque_display(), 100);

me.game.world.addChild(new game.player_hud_mana_health_sprite(), 100);

me.game.world.addChild(new game.main_game_interface_display(), 100);

 

this.screen_width = me.game.viewport.width;

 

this.floating_map_window = new game.floating_generic_panel(this.screen_width - 112, 5, 105, 125,"map_interface", true);

 

this.floating_map_window.addChild(new game.floating_map_attach_button());

this.floating_map_window.addChild(new game.floating_map_minimize_button());

this.floating_map_window.addChild(new game.floating_map_node_points_button());

 

me.game.world.addChild(this.floating_map_window,101);

 

 

},

/**

* action to perform when leaving this screen (state change)

*/

onDestroyEvent: function()

{

return;

}

});

the root object as from the ui example is a container

 

Edited August 11, 2021 by soulVampire
update