Centering a texture in a GUI.Button

Question

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

Answer 1

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.

Answer 2

Answer by Litobyte_Softworks · Sep 15, 2011 at 01:05 PM

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.

Add comment · Show 2 · Share

HHameline · Sep 15, 2011 at 01:28 PM 0

Share

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.

jahroy · Sep 16, 2011 at 08:25 AM 0

Share

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.

Answer 3

Answer by squidbot · Sep 15, 2011 at 09:45 PM

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.

Add comment · Share

Answer 4

Answer by Owen-Reynolds · Sep 16, 2011 at 07:08 AM

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.

Add comment · Share

Centering a texture in a GUI.Button

4 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions