solved ImageOnlyButton, how can I make the image small than the button.

[DylanD]

Hi, I was wondering if there was a way to make the inner image smaller than the actual button, for example if my button is 90px by 90px how could I make the image 45px by 45px?

I have already tried the different stretch modes and auto scale on button1.children[0] but it did not work, I have also tried button1.children[0].scaling = new BABYLON.Vector3(0.5,0.5,0.5);  ,but that seemed to do nothing.  The Gui button docs don't seem to say anything about this.

Here is a playground I setup:  https://playground.babylonjs.com/#Q9TCC2

Any ideas?

[aWeirdo]

Hi @DylanD

You just have to use percentage values and center alignments (assuming you want the image in the center, of course).
https://playground.babylonjs.com/#Q9TCC2#1

[DylanD]

11 minutes ago, aWeirdo said:

Hi @DylanD

You just have to user percentage values and center alignments.
https://playground.babylonjs.com/#Q9TCC2#1

Thank you!  This worked really well!  

[Wingnut]

Hi D, welcome to the forum.  Hi aW!

https://playground.babylonjs.com/#Q9TCC2#2   (#3, too) 

In there, I use the .left and .top properties... after the align-to-center lines... to do some more adjustments.

Fun!  Negative numbers allowed... in pixel strings, too.

[DylanD]

On 6/5/2018 at 11:53 AM, Wingnut said:

Hi D, welcome to the forum.  Hi aW!

https://playground.babylonjs.com/#Q9TCC2#2   (#3, too) 

In there, I use the .left and .top properties... after the align-to-center lines... to do some more adjustments.

Fun!  Negative numbers allowed... in pixel strings, too.

Nice thanks!  

 

[DylanD]

On 6/5/2018 at 11:53 AM, Wingnut said:

Hi D, welcome to the forum.  Hi aW!

https://playground.babylonjs.com/#Q9TCC2#2   (#3, too) 

In there, I use the .left and .top properties... after the align-to-center lines... to do some more adjustments.

Fun!  Negative numbers allowed... in pixel strings, too.

Hey another question same topic but for a simplebutton

how can I make it so that when I hover over the button with the mouse or when I click it, it won't become more transparent.

as of right now when you hover over it, it becomes more transparent.

ImageOnlyButtons also do this but I only need it for a simple button.

[Wingnut]

Hi again, D.

Button pointerEnter "user feedback" like you are seeing... is called "Visual Animations" (in BJS GUI).

You can read about the 4 available visual animations... in the Button Section of the GUI docs...

http://doc.babylonjs.com/how_to/gui#button   (scroll down a little bit)  

The reason the button becomes more transparent when pointerEnter... is because button1.pointerEnterAnimation function is currently set to DO that (behind the scenes). 

You are allowed to make your own visual animations.  Here we go. 

https://playground.babylonjs.com/#Q9TCC2#5

In lines 36-51, I did some playing with the 4 visual animations.

Use ONLY line 36 (and maybe 37, too)... if you want to turn-OFF viz-animation for pointerEnter/pointerOut.

In lines 39-42, I tried programming a more-fancy pointerEnter viz-anim function. FUN! 

The random color changers in lines 41 & 46 are failing, because I have not provided the correct dataType of color value... for a GUI button.  GUI button.color does not accept Color3-type values... so I would need to do some studying and researching of Babylon Tools and playgrounds of others.

Hope this helps.