Sprites, Button Images and Callback Actions

Questions
1

I’ve been studying the following example but I have 2 problems that I can’t seem to solve:

Question 1) the images on each button/sprite don’t work. I tested several .png files but the checkerboard remains with each image, and it’s covered with a semi-transparent white shade. Perhaps it’s an image scaling issue, but then why is the checkerboard still visible behind the image? Even better, is there a way to make the entire SPRITE an image? Like this playground? https://www.babylonjs-playground.com/#XCPP9Y#3281

Question 2) trying to pinpoint the BUTTON name or SPRITE name, so I can control the action in the onPointerDown callback. I’ve used the following format before to catch actions (see line #104 in playground above)

this usually works —> (pickinfo.pickedMesh.name == “button6”) or (pickinfo.pickedMesh.name == “b6”)

but it’s not working in this example above. How can I access the sprite/button and catch the action in the onPointerDown callback? The material line seems to work fine in the example…

thanks in advance for any solutions

2

the images on each button/sprite don’t work

They’re all 404 in the console for that playground, so I’m not sure what you’re seeing that makes them semi-transparent. I updated your playground to use the ‘textures/player.png’ sprite provided by the playground server and it looks correct.

is there a way to make the entire SPRITE an image? Like this playground? https://www.babylonjs-playground.com/#XCPP9Y#3281

I’m not sure what you’re asking for here. Maybe you’re asking how to use the BABYLON.GUI.Button.CreateImageButton function with a sprite? This might help: How to import Textures and Images from a sprite sheet? - #7 by earthendev

Question 2) trying to pinpoint the BUTTON name or SPRITE name, so I can control the action in the onPointerDown callback. I’ve used the following format before to catch actions (see line #104 in playground above)

this usually works —> (pickinfo.pickedMesh.name == “button6”) or (pickinfo.pick> edMesh.name == “b6”)

but it’s not working in this example above. How can I access the sprite/button and catch the action in the onPointerDown callback? The material line seems to work fine in the example…

There is a different function for sprite picking. See:
Picking Sprites | Babylon.js Documentation (babylonjs.com).

I updated your playground to show it:
my menu | Babylon.js Playground (babylonjs.com).

Does that help?

1 Like
3

Thank you, that is great! It seems that the sprite element overrides the button in this example. I thought it was the reverse. Final question then - How can I clear the entire structure?
is it something like this ? ```

spritemanager.getChildren().forEach ((element) => element.setEnabled(false))

4

You want to clear them definitely, or just make them invisible? If you want to clear definitely, you can use spriteManager.dispose(). If it’s just to make them invisible, you can set isVisible = false on each sprite.

1 Like
5

Hi - i want to toggle the visibility so I can open or close the menu on-demand. Turns out the solution was to access the sprite array AND meshes in the following way. Solution is unique to this particular playground:

                    1) meshGroup.forEach ((element) => element.setEnabled(false));
                    2) sprites.forEach ((element) => element.isVisible = false);
                    3) torus.isVisible = false;

Thanks!

6

removed