I researched this for 3 hours straight, more specifically the details that Hikury had described on another thread. I have a clear answer 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 everyone wants. Button Hover Image and Set dialog item image for buttons refers to the button look and style itself, not an image embedded inside the button.
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 real tutorial of how to actually do 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 a missle turret, onto this .dds file would not work because the file is not sized specifically for your button.
This is a generic button.dds 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 (placing a image dialog item over the button) or you can do without having an actual 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 it where it is required in each of these blocks.
Here is a quick example..
After creating a 62x62 button, 'set item image' as this image. Then in whatever image editor youd like, brighten the whole canvas and save as. Set this brightened image as the hover image.
Hmm. I didnt know you could change how the image is applied. Could you link that thread please? I cant find it.
You said that the image format I was working with was border type. But It seems that all the buttons use the same image type except with different deminsions. There are images in the asset that are for buttons with a different format but those seem to be static buttons... for all I know. Its like the portrait images; in the assets the images look weird(all smashed and stretched down) but we know its formated to fit a wiremesh, my point is, I dont think there would be a different formatting for any of the images because they seem to be designed for one purpose. Im not arguing but trying to understand, as always your help, progammer, is appreciated.
Also, I will be making a video guide on customizing a button image. I am pretty sure it will be an amature example tho.
I want to note that I am very new to all of this and to understand the button image editing I had to pull some knowledge from my past working with RPG maker2k. Their chipset format was the same with 32x32 pixel blocks.
However it is still different between image and a button, a normal for image take the entire image while normal for button cut it in half for display and clicked
Awesome. I never noticed the option.. and I searched. Ha. Well it seems you sir have cut my time in half. The normal image type is the preferred one for me and will be what I build the tutorial around. The normal image type applied to a button will split the .dds in half using the top half for the default state and the bottom half for the pressed state.
So if you have a button sized 64x64 then the image should be 66x132 applied to the button, then 'normal' state applied to that button.
This is the most efficient way to embed images onto a button. Each button image will have to be scaled to the appropriate button. This is very important when creating something like a hotbar, where you create buttons to hold ability commands.
Rollback Post to RevisionRollBack
To post a comment, please login or register a new account.
I researched this for 3 hours straight, more specifically the details that Hikury had described on another thread. I have a clear answer 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 everyone wants. Button Hover Image and Set dialog item image for buttons refers to the button look and style itself, not an image embedded inside the button. 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 real tutorial of how to actually do 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 a missle turret, onto this .dds file would not work because the file is not sized specifically for your button.
This is a generic button.dds 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 (placing a image dialog item over the button) or you can do without having an actual 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 it where it is required in each of these blocks.
Here is a quick example..
After creating a 62x62 button, 'set item image' as this image. Then in whatever image editor youd like, brighten the whole canvas and save as. Set this brightened image as the hover image.
I hope this helped at least a bit.
As I posted on another thread, you can easily change the button image type to accomodate how the image is formatted and applied.
Edit: This is the border type (by default), it could be nice if you can make a detailed guide for other format such as normal, endcap, horizontal...
Hmm. I didnt know you could change how the image is applied. Could you link that thread please? I cant find it. You said that the image format I was working with was border type. But It seems that all the buttons use the same image type except with different deminsions. There are images in the asset that are for buttons with a different format but those seem to be static buttons... for all I know. Its like the portrait images; in the assets the images look weird(all smashed and stretched down) but we know its formated to fit a wiremesh, my point is, I dont think there would be a different formatting for any of the images because they seem to be designed for one purpose. Im not arguing but trying to understand, as always your help, progammer, is appreciated.
Also, I will be making a video guide on customizing a button image. I am pretty sure it will be an amature example tho.
I want to note that I am very new to all of this and to understand the button image editing I had to pull some knowledge from my past working with RPG maker2k. Their chipset format was the same with 32x32 pixel blocks.
@BasicGear: Go
Those things
However it is still different between image and a button, a normal for image take the entire image while normal for button cut it in half for display and clicked
Awesome. I never noticed the option.. and I searched. Ha. Well it seems you sir have cut my time in half. The normal image type is the preferred one for me and will be what I build the tutorial around. The normal image type applied to a button will split the .dds in half using the top half for the default state and the bottom half for the pressed state.
So if you have a button sized 64x64 then the image should be 66x132 applied to the button, then 'normal' state applied to that button.
This is the most efficient way to embed images onto a button. Each button image will have to be scaled to the appropriate button. This is very important when creating something like a hotbar, where you create buttons to hold ability commands.