koobas.hobune.stream
Centering a texture in a GUI.Button
Hello, I'm trying to make a button with width and height of 585x400, in this button I want to center a 336x100 image for normal and one for hover. I'm doing it like this.
GUIStyle buttonContentStyle = new GUIStyle(guiSkin.GetStyle("myButton"));
if(buttonImage != null)
{
buttonContentStyle.normal.background = buttonImage[0];
buttonContentStyle.hover.background = buttonImage[1];
buttonContentStyle.fixedHeight = buttonImage[0].height;
buttonContentStyle.fixedWidth = buttonImage[0].width;
buttonContentStyle.alignment = TextAnchor.MiddleCenter;
}
if(GUI.Button(new Rect(0,0,585,400), "", buttonContentStyle))
{
}
This just makes the image the correct size but aligns it to the top left, not to the center of the button. Any help regarding this issue would be most welcome.
Thanks, Hans
According to the documentation the alignment property deals with text alignment.
I believe you might want to use the padding, margin, or contentOffset properties to align your image. You already know the width of the GUI element and the width of the image in your code.
GUIStyle also has an imagePosition property, but I've never figured that one out.
I would also recommend using a GUISkin in stead. It is very easy to assign a texture for each of the 8 button states using the Inspector (on and off: normal, hover, active, focused).
You can also change these images using code (like you already are). Here is the documentation for the normal property of a GUIStyle. As you can see, its type is GUIStyleState, which has two properties: a background image and text color. The onHover property would represent the background image and text color of a Toggle button that was turned on and has the mouse hovering over it.
You can also manipulate the border property of a GUIStyle to control how images will react if they are smaller than the GUI control they're used on.
For example: If you set the border to be (1, 1, 1, 1) the outermost pixel of the background image will remain unscaled at the perimeter of the control. The rest of the image (the inside) will stretch to fill the control.
I had a hard time finding this, but this thread from the forums covers how to use the border property to scale images on GUI controls.
It also shows you how to create your own custom GUISkin images.
Hope some of this helps.
The border numbers are when you want the image to stretch over the entire background, as usual, but an overall stretch looks bad.
Suppose you have a border image and the corners are rounded with little leafy things in them. You can set "borders" so the corners are always drawn "as is" (never stretched to long, skinny leaves) and only the middle, long lines, are stretched.
Give a look to the GUISkin component (Menu->Assets->Create->GUISkin), there are many parameters to make the button texture proper. From those parameters you have full control on how the gui button texture should behave/repeat/align.
I have looked :/ the buttonContentStyle is allowing me to update the GUISkin's properties for the myButton style in my GUISkin. However The alignment aspect only works for the content of the button such as the string/texture on the button face but I can not find where the control for the normal/hover textures is. I'm not sure if it is even possible. I've been searching the forums and have yet to find another question like $$anonymous$$e as well. :/ Thanks for the comment though. I appreciate you taking the time to help.
See my answer above/below about where to control the textures for the different button states.
There are many ways to approach the layout of your image.
Let me know if you have any questions after reading all the junk I wrote.
I think what you want to do is not make the image part of the style, because the style is always used to fill the entire controls rectangle. Instead, you would want to set the image as the GUIContent and use the style content offsets to center the image.
Conversely, if you really want to use the style, you could just make your art the full size of the control and put a transparent border around it in the art itself.
Setting OverFlow to negative seems to shrink the texture down and let the text hang over.
Squidbots's transparent border sounds like the more official way. "Everyone knows" that Button/GUI textures always fill the entire clickable area, even if they are a black border and transparent insides. That's probably why you haven't found a similar Q.
