Jump to content

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


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...