Buttons behaving wierdly

Questions
,
1

hi,

I am working on a scene where in I created 4 image buttons. They are using SVG images over a colored background. I am stretching them so they look nice. Well now they are looking nice, but the problem is that the click only registers in the last part of the button just
before border and not anywhere else. I tried all sort of stuff but doesn’t seem to work. Any suggestions ?

Button Creation
var yrect1 = BABYLON.GUI.Button.CreateImageOnlyButton(“grect1”, “assets/pawnimg.svg”);

yrect1.image.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
yrect1.color = "yellow";
yrect1.background = "yellow";
yrect1.width = .1;
yrect1.height = "160px";
yrect1.image.height = "100px";
yrect1.onPointerUpObservable.add(function() {
    grect1.children[0].detectPointerOnOpaqueOnly = true;
    pawnSelection("y")
});
yrect1.left = 300;

yrect1.alpha = 0;
const calpha = new BABYLON.Animation(“xSlide”, “alpha”, frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

const keyFrames = [];

keyFrames.push({

    frame: 0,

    value: 0

});

keyFrames.push({

    frame: 60,

    value: 1

});

calpha.setKeys(keyFrames);

scene.beginDirectAnimation(yrect1, [calpha], 0, 2 * frameRate, true);
advancedTexture.addControl(yrect1);

2

image
image1092×552 22.3 KB

3

Okay so the same thing is working fine in the sandbox. Ofcourse I used minimal code to reproduce. I think some or the other code is conflicting. Any idea if you split your code in multiple files does it causes any problems?

4

Okay so sort out the problem. I am also using a TextBlock in my code. Earlier I was attaching it to the advancedTexture component before attaching buttons . Everything was working ok . But as soon as I attach it after attaching buttons the whole code messed up. Something is not right there.

5

The TextBlock is probably catching the mouse events. All elements have the same zIndex by default, so the order in which you create them does matter: the last created elements will catch the mouse events if they are intersecting with elements created previously. You can try to set isPointerBlocker = false on the TextBlock or give it a lower zIndex than the other elements.