This tutorial assumes you have a base knowledge of triggers, variables, arrays, dialogs, and dialog items. Note that none of the following is difficult, it's just not something many people do, and it adds a lot to the production quality of your mods.
SelectionMenu will act as the background for our selection menu, so we aren't stuck the same default background used by 95% of all other mods.
The 4x2 array is for our buttons. Note that each button is made up of a button, a border image, and a real image.
PlayerSelection is used to keep track of which buttons the player is interacting with, since our buttons are made up of multiple dialog items.
Hiding the background of the dialog is critical for adding our own custom backgrounds. Use This to find good assets to use as background images. Note the image type required (via: "Set Dialog Item Image Type", or within "Create Dialog Item (image)") associated with each image. Also note that Normal image are only really good for specific image sizes (ie, they will become pixelated if you try to make them fullscreen).
You can either set the background image to the size of the parent dialog, or to whatever size you want if you use fullscreen dialogs. This method allows for simple hiding of dialog items grouped with a particular dialog.
Here we create some nicely spaced buttons, with their borders (also found with This, and images, and anchor them all together. We set the buttons items to transparent, as hiding them renders them unusable. I'm going to use image saturation as an indicator of which button is highlighted, so I've desaturated all the images on creation.
All of the above was part of one "dialog initialization" function. It yields this.
Now to make our fancy buttons respond like the default buttons, we've got to add events for them to be highlighted or clicked.
Ignore the "set selected color to yellow"... it turns the transparent button yellow, and thus has no effect. The rest of these actions find which dialog item was used and then sets the dialog item image and border to be modified. For complicated selections menus, I tend to use strings to identify which item was selected (ie, inventory vs. equipped items) but this will do for our purposes.
This de/saturates the buttons image depending on whether or not it's highlighted. The PlayerSelection variable is used to make sure that the players current selection is always saturated.
Now we've got decent looking buttons that shine when highlighed!
The final part of this trigger controls the clicking of buttons. It 'resets' the color of all of the borders and the saturation of their images, and then sets the border color and saturation of the selected button.
I'm having a problem with a few of the images, they are being split into 4 images next to eachother, and is being displayed totally messed up ingame?
Assets\Textures\ui_battle_frame_summary_metal_protoss.dds is one of the affected images/frames.
Do you know any way to fix this?
@PirateArcade | I make games | Ask me things on Discord
Part 1: Making a Good Looking Selection Dialog
This tutorial assumes you have a base knowledge of triggers, variables, arrays, dialogs, and dialog items. Note that none of the following is difficult, it's just not something many people do, and it adds a lot to the production quality of your mods.
SelectionMenu will act as the background for our selection menu, so we aren't stuck the same default background used by 95% of all other mods.
The 4x2 array is for our buttons. Note that each button is made up of a button, a border image, and a real image.
PlayerSelection is used to keep track of which buttons the player is interacting with, since our buttons are made up of multiple dialog items.
Hiding the background of the dialog is critical for adding our own custom backgrounds. Use This to find good assets to use as background images. Note the image type required (via: "Set Dialog Item Image Type", or within "Create Dialog Item (image)") associated with each image. Also note that Normal image are only really good for specific image sizes (ie, they will become pixelated if you try to make them fullscreen).
You can either set the background image to the size of the parent dialog, or to whatever size you want if you use fullscreen dialogs. This method allows for simple hiding of dialog items grouped with a particular dialog.
Here we create some nicely spaced buttons, with their borders (also found with This, and images, and anchor them all together. We set the buttons items to transparent, as hiding them renders them unusable. I'm going to use image saturation as an indicator of which button is highlighted, so I've desaturated all the images on creation.
All of the above was part of one "dialog initialization" function. It yields this.
Now to make our fancy buttons respond like the default buttons, we've got to add events for them to be highlighted or clicked.
Ignore the "set selected color to yellow"... it turns the transparent button yellow, and thus has no effect. The rest of these actions find which dialog item was used and then sets the dialog item image and border to be modified. For complicated selections menus, I tend to use strings to identify which item was selected (ie, inventory vs. equipped items) but this will do for our purposes.
This de/saturates the buttons image depending on whether or not it's highlighted. The PlayerSelection variable is used to make sure that the players current selection is always saturated.
Now we've got decent looking buttons that shine when highlighed!
The final part of this trigger controls the clicking of buttons. It 'resets' the color of all of the borders and the saturation of their images, and then sets the border color and saturation of the selected button.
End result:
@PirateArcade | I make games | Ask me things on Discord
Ooo Shiny O.O
Thank u my good sir for the Tutorial, and for the Styles types =3
Thanks for the compilation of backgrounds and borders, very nice!
Wow that's awesome. Great Job. Definatly going to implament this into my maps,
Just out of curiosity, how do you know the image type for those?
lol hero attack used as a bad example
I'm having a problem with a few of the images, they are being split into 4 images next to eachother, and is being displayed totally messed up ingame? Assets\Textures\ui_battle_frame_summary_metal_protoss.dds is one of the affected images/frames. Do you know any way to fix this?
Good man, thank you for listing down some of the good assets to use.
Not trying to necro a old post.
But I seriously want to say thanks for the list of assets. I downloaded the picture to my computer for reference if that's okay.
Thanks a ton!
necro, does anyone have a current version of the all borders image?