GUISkin & Scripting

Thus far, I’ve created a new GUISkin and under the GUIStyle Button, I’ve imported and placed 3 png files under Normal bg, Hover bg and
Active bg.

I created a new Javascript with this codes:

var toolSkin: GUISkin;
var Button = true;

function OnGUI () {
	
	GUI.skin = toolSkin;
	GUI.Button (Rect (0,500,230,200), "");
}

This allows the button to appear and gives 3 different forms when it is untouched, when I get near to the button and when I click on it.

However, how do I reduce the space around the button so that it only changes when I hover over it and not when I’m hovering around the space of the button? Also, how do I allow the active bg to stay active once I clicked on it, and revert back to hovering state once I unclicked it?

Any help would be glady appreciated, thank you!

What do you mean by “unclicked”? a Button is not a Toggle.

And to your hover problem you don’t get “near” the button, you’re ON the button. You’ve made the button 230x200 … I guess the background texture is smaller than your actual button…

GUI elements are always rectangular so there’s no easy way around that fact (if your image is circle-shaped with alpha or something like that)

You can also draw a toggle button and use the button style that you already altered like this:

GUI.Toggle(Rect(0, 0, 100, 100), isToggleOn, "button");

You can apply any style you want to a gui control.

You can also make a small image stretch to fit the rectangle by using the GUIStyle.border property.

By setting the border to (1, 1, 1, 1) you tell the GUI to stretch everything but the outermost pixel of your texture to fit the rectangle.