Hmm I don't know about this "set dialog item image thing", I've never tried using it.
What I do is I create another dialog image atop of it, a little smaller so you can see both button and image, and it works fine.
Ex : for a 100x100 button, use a 80x80 image.
I've been able to use the set dialog item image trigger successfully, but when it gets applied to a button, it seems to want an image twice as tall as it is wide (I was using standard 76² buttons, and 76x152 images). I don't fully understand how it was stretching them, or why, but using a rectangular image fixed it. I'm not really sure what the logic is with dialog buttons; there seems to be a way to also give them a border, but it's not clear to me how to do so. Using a correctly dimensioned image seems to make the button look normal, at least.
IMPORTANT: It'll use the top half of the image as the default picture, and the bottom half of the image as the "down" state.
to fix this, just set the button to be transparent, (can't remember where that setting is exactly) and place a dialog item image at the location. the click events still go to the button, but the dialog item image makes sure that the image is correctly shown.
this is where you use "Set Dialog item Image Type" in this case you should use Normal, which doesnt apply any special properties to the image so it displays normally, you can also use this to change the border of a button, by using Border, Horizontal Border, or the most used for buttons, End Cap, to figure out which to use just experiment, the image goes by a pattern so you'll know which to use in the future.
also, dont forget to use "Set Dialog Item Hover Image" and set that image to it also, or else you will get a different image when you hover over it.
Last time I checked that one was broken for the buttons. since it expects a button to exist out of 2 images. normal and clicked.
could be that they've fixed it.
We're all giving you differents leads.
Basically :
- Use what I said for square buttons and square image (that use the whole image)
- Use Helral solution to have an image that is able to be clicked on with no button frame.
- LinkD is explaining the borders function's utility : it only applies to certains cut images like frames, and you don't need it for icons like the one you have in your first post. One thing throught, imo the hover image is unnecessary on buttons.
I don't know if everybody knows this, but it is very important and I think a lot of people are missing the point:
That image that any button uses by default... That's not just a square picture of a button. It's a combination of two images (can't use editor due to downtime, so this name is just a rough guess) ui_defaultbutton_normalpressed and ui_defaultbutton_overpressed.
Now if you manage to find either one of those files you'll notice something odd. They're both bizarre cut-ups of different parts of the button. You've probably noticed these types of images before while scrolling through the list of Default Blizzard Images. If you think about that for a minute you'll realize that when the game tries to render that button it is actually taking that fragmented image, cutting it apart piece by piece and throwing them together to make that *ass-ugly* default button we have all learned to loathe.
Therein lies the reason you cannot use that picture of a missile turret as a button. It's because the game is taking little pieces of that image and throwing it together to create something that resembles a foggy day in Toronto. But armed with your new knowledge of button-rendering you can search through the images until you find *similar* images to the crappy ui_defaultbutton_overpressed. I mean it'd be easy to find them, all you have to do is type "pressed" into the search field.
Then to create your not-ass-ugly button you simply use "set dialog item image" after making the button. And into that you put the normalpressed image. Then in the button's "hover image" property you add the overpressed equivalent. You can then slide the picture of the missile turret in behind or in front and the nasty default texture wont get in the way anymore.
Use this method for every button. Square, wide, list, transparent, opaque.
I never want to see the default buttons again. You hear me?
Forgot about setting the image type to normal... indeed, this makes the image work normally, instead of cutting it up like the images Hikury mentioned. Using the "normal" type and a 2:1 aspect ratio image will give you a button that looks like whatever you want with a down state. Sure looks better than the default buttons... a lot better... but it might be a lot of trouble if you want to use default assets, which all seem to be designed to only fit in right in whatever way you'd normally see them in-game.
Get a dialog image with no value for tooltips,set size equal or slightly smaller, then attach it to 0,0 Center from Center of that button. Save you lots of trouble.
@Hikury:
That's all pretty interesting, but I can't see how you believe we don't know that / in what it relates to dre__'s question.
"Get a dialog image with no value for tooltips,set size equal or slightly smaller, then attach it to 0,0 Center from Center of that button. Save you lots of trouble."
+1
Reason I throw in the button change option when I see these types of questions is because I think it can give them a cleaner result. I think a lot of people use the default buttons because they try to use an image they like and then give up after it creates a result like dre_ stated.
And I think that a transparent button with an image underneath it reads better and takes away an unnecessary step: That is the additional overlay of a label for the numbers that dre_ requires on his buttons.
I researched this for 3 hours straight, more specifically the details that Hikury described. I have a clear answer for you on how to have an image with a button.
The answer is: Dialog Buttons were not designed to have an image on them the way you want it. It is, however, possible to do. I have two working methods, one using .dds files, the other using .tga files.
I plan(no promises) to make a tutorial of some kind on this, because I take a lot from this community and give very little.
But the short version is: Each button image is like a chipset, the one image contains corners, edges, and the middle. The dialogs we create all use .dds for their images because the .dds file can stretch its image according to the dialog size and it look normal. So pasting an image, like your missle turret, onto this .dds file would not work because the file is not sized specifically for your button.
This is a generic .dds button from the assets.
Youll notice the red lined grid, that is added to show you where each block is. The very top left square is what will be used for the very top left corner of any dialog button made. For this example image if the button was (62,62) then it would look like the first two squares across on top of the last two squares across. But dealing with anything larger it would have to start using the edges like in the 2nd square down.
This can get very complicated, so if you arent too disappointed with other peoples methods or you can do without having an actual turret image in your button then do that.
But in order for You to have custom button images you will have to crop any image and neatly place is where it is required in each of these blocks.
Here is a quick example..
I hope this helped at least a bit. I will go ahead and copy/paste this in an original thread of my own with some edits.
On a new note of discovery, dialog item - button can be set image type from Border, EndCap, Normal that decides how the image is formated. This also apply to the hover image you set.
For a good example, check the next and previous button on my Planet View library
I'm trying to add an image to a button, but the image gets messed up when I use the "Set Dialog Item Image" trigger.
Here's the image I'm trying to add: (Assets\Textures\btnbuilding-terran-missileturret.dds)
Here's the button I'm trying to add the image it to:
Here's the result after using that trigger:
What am I doing wrong?
I've been able to use the set dialog item image trigger successfully, but when it gets applied to a button, it seems to want an image twice as tall as it is wide (I was using standard 76² buttons, and 76x152 images). I don't fully understand how it was stretching them, or why, but using a rectangular image fixed it. I'm not really sure what the logic is with dialog buttons; there seems to be a way to also give them a border, but it's not clear to me how to do so. Using a correctly dimensioned image seems to make the button look normal, at least.
IMPORTANT: It'll use the top half of the image as the default picture, and the bottom half of the image as the "down" state.
@Chroyst: Go
to fix this, just set the button to be transparent, (can't remember where that setting is exactly) and place a dialog item image at the location. the click events still go to the button, but the dialog item image makes sure that the image is correctly shown.
@dre__:
this is where you use "Set Dialog item Image Type" in this case you should use Normal, which doesnt apply any special properties to the image so it displays normally, you can also use this to change the border of a button, by using Border, Horizontal Border, or the most used for buttons, End Cap, to figure out which to use just experiment, the image goes by a pattern so you'll know which to use in the future.
also, dont forget to use "Set Dialog Item Hover Image" and set that image to it also, or else you will get a different image when you hover over it.
@LinkD: Go
Last time I checked that one was broken for the buttons. since it expects a button to exist out of 2 images. normal and clicked.
could be that they've fixed it.
I don't know if everybody knows this, but it is very important and I think a lot of people are missing the point:
That image that any button uses by default... That's not just a square picture of a button. It's a combination of two images (can't use editor due to downtime, so this name is just a rough guess) ui_defaultbutton_normalpressed and ui_defaultbutton_overpressed.
Now if you manage to find either one of those files you'll notice something odd. They're both bizarre cut-ups of different parts of the button. You've probably noticed these types of images before while scrolling through the list of Default Blizzard Images. If you think about that for a minute you'll realize that when the game tries to render that button it is actually taking that fragmented image, cutting it apart piece by piece and throwing them together to make that *ass-ugly* default button we have all learned to loathe.
Therein lies the reason you cannot use that picture of a missile turret as a button. It's because the game is taking little pieces of that image and throwing it together to create something that resembles a foggy day in Toronto. But armed with your new knowledge of button-rendering you can search through the images until you find *similar* images to the crappy ui_defaultbutton_overpressed. I mean it'd be easy to find them, all you have to do is type "pressed" into the search field.
Then to create your not-ass-ugly button you simply use "set dialog item image" after making the button. And into that you put the normalpressed image. Then in the button's "hover image" property you add the overpressed equivalent. You can then slide the picture of the missile turret in behind or in front and the nasty default texture wont get in the way anymore.
Use this method for every button. Square, wide, list, transparent, opaque.
I never want to see the default buttons again. You hear me?
@LinkD: Go
Forgot about setting the image type to normal... indeed, this makes the image work normally, instead of cutting it up like the images Hikury mentioned. Using the "normal" type and a 2:1 aspect ratio image will give you a button that looks like whatever you want with a down state. Sure looks better than the default buttons... a lot better... but it might be a lot of trouble if you want to use default assets, which all seem to be designed to only fit in right in whatever way you'd normally see them in-game.
Get a dialog image with no value for tooltips,set size equal or slightly smaller, then attach it to 0,0 Center from Center of that button. Save you lots of trouble.
@Yaos01:
Reason I throw in the button change option when I see these types of questions is because I think it can give them a cleaner result. I think a lot of people use the default buttons because they try to use an image they like and then give up after it creates a result like dre_ stated.
And I think that a transparent button with an image underneath it reads better and takes away an unnecessary step: That is the additional overlay of a label for the numbers that dre_ requires on his buttons.
I researched this for 3 hours straight, more specifically the details that Hikury described. I have a clear answer for you on how to have an image with a button.
The answer is: Dialog Buttons were not designed to have an image on them the way you want it. It is, however, possible to do. I have two working methods, one using .dds files, the other using .tga files.
I plan(no promises) to make a tutorial of some kind on this, because I take a lot from this community and give very little.
But the short version is: Each button image is like a chipset, the one image contains corners, edges, and the middle. The dialogs we create all use .dds for their images because the .dds file can stretch its image according to the dialog size and it look normal. So pasting an image, like your missle turret, onto this .dds file would not work because the file is not sized specifically for your button.
This is a generic .dds button from the assets.
Youll notice the red lined grid, that is added to show you where each block is. The very top left square is what will be used for the very top left corner of any dialog button made. For this example image if the button was (62,62) then it would look like the first two squares across on top of the last two squares across. But dealing with anything larger it would have to start using the edges like in the 2nd square down.
This can get very complicated, so if you arent too disappointed with other peoples methods or you can do without having an actual turret image in your button then do that.
But in order for You to have custom button images you will have to crop any image and neatly place is where it is required in each of these blocks.
Here is a quick example..
I hope this helped at least a bit. I will go ahead and copy/paste this in an original thread of my own with some edits.
On a new note of discovery, dialog item - button can be set image type from Border, EndCap, Normal that decides how the image is formated. This also apply to the hover image you set.
For a good example, check the next and previous button on my Planet View library
Guys, if you make it a Screen Image, you dont need to worry about the size. Just set it in the same place as button.
How do I apply a hover image ( diff image when mouseover ) when I'm using a dialog item button overlapped by a dialog item image?