[Solved] Texture issues

[TaxiService]

Problem 1

I use a DialogGUIButton and an image (weird target sight) to create an image button (code). However, the resulting button is not quite what I desire. The default state of the button is missing the button texture while the highlighted state is missing the image. It acts as if the button texture is changed instead of overlaying multiple textures. Can anyone figure out why it does this?

Problem 2

This image is explicitly set to 32 in both width and height (code) but the resulting image is stubbornly more than 32 in width as shown in the above picture (the green borders are drawn by DebugStuff). I do not understand why this particular image is stretched despite its width is locked to 32.

The interface engine has a free reign to how to draw bunch of GUI components. So I edited the DialogGUILabel object next to the DialogGUIImage to be excessive in its width so that it "steals" all the free space, leaving the image no space to expand in width.

Edited December 29, 2016 by TaxiService

[TaxiService]

I found the answer to the first problem. A UIStyle is necessary to point to a number of sprites if you want to override the DialogGUIButton's default skin (UISkinDef class) when creating an image button. 

UIStyle focusButtonStyle = new UIStyle(); // necessary for multiple button states
focusButtonStyle.normal = new UIStyleState(); // ? (not same as DialogGUIButton.image)
focusButtonStyle.normal.background = Sprite.Create(focusTexture, new Rect(0, 0, 32, 32), Vector2.zero);
focusButtonStyle.normal.textColor = Color.black;
focusButtonStyle.highlight = focusButtonStyle.normal; // when hovering your cursor over it
focusButtonStyle.active = focusButtonStyle.normal; // when pressing
focusButtonStyle.disabled = focusButtonStyle.normal; // when button is disabled (no reaction when clicking)

DialogGUIButton focusButton = new DialogGUIButton("", magicFunction, a, 32, 32, false, focusButtonStyle); // pass focusButtonStyle to this image button
focusButton.image = Sprite.Create(focusTexture, new Rect(0, 0, 32, 32), Vector2.zero); // when your cursor is not near it anywhere i.e. what you see

The downside is you cannot use the default button skin for your image button i.e. you better draw different images for different button states.

[HebaruSan]

Thanks so much! I don't think I would have guessed that on my own, but now my icon buttons look normal on hover.