I've heard many people complain about the difficulty of making dialogs through triggers, so I decided to share my technique in this quick tutorial. What we are going to do, is to create an advanced custom action, which we will use to set up our dialogs. You will need a moderate skill level, and have worked with dialogs before.
That said, let's get started.
First of all, create a new Action Definition (Ctrl+Alt+R). This is going to be the function which creates and sets up our dialog. We will need the following parameters:
These parameters are used to specify how the dialog should look like. It's like an advanced version of the built-in Create Dialog action.
Create the following actions within the Action Definition, and link them to the previously created parameters.
We can now use our custom action to easily set up an advanced dialog.
Create a new Trigger (Ctrl+T) . This trigger will be the one initializing our custom dialog. Create an Event (Ctrl+E), and set it to whatever you want to trigger the dialog creation. I'll be using the Game - Map Initialization event. Now, create a new Action (Ctrl+R), and select our Action Definition from the list. You'll see all of our parameters in the advanced trigger field. You can now customize the dialog to your liking, or choose the settings I used in the picture below.
We will need to refer to the dialog at a later time, so we need to create a new Variable (Ctrl+B). Set the type of the variable to Dialog. Go back to the initialization trigger, and create a Set Variable action, and then set the new dialog variable to (Last Created Dialog).
Conclusion of Part I
We've now created a functioning, and good looking custom dialog. It may seem to have taken way more time than creating a dialog with the built-in actions, but it's a great technique to create multiple dialogs, and it saves you a whole lot of lines.
We're now going to create the buttons for our custom dialog. We want to make the buttons look clean and professional, and take distance to the standard Blizzard buttons.
The first thing we want to do, is to create a Record (Ctrl+U) named Advanced Create Dialog Button. This record will be used to refer to our buttons later on. Add the variables seen below.
Next, create a new Variable (Ctrl+B), and give it the same name as the previously created Record. Set the Type field to - Preset, and the Record field to our Record. I will stick to 4 buttons for this tutorial, but you can change the array to whatever you need.
It is now time to create our Action Definition (Ctrl+Alt+R) to set up the buttons. Again, name it Advanced Create Dialog Button. Add the below parameters to the Action Definition. Notice, that I have added a new Parameter, Index. This parameter is used to save the button to a specific index of our Record, and is needed in order to refer to the buttons later on.
Go ahead and create the Actions for our Action Definition as seen below. You may change the Desaturated Color field to whatever color you want to be shown, when the button is hovered.
Now that we have set it all up, we're going to put our work to use. Go to the Initialization trigger we created in Part I, and add two Local Variables (Ctrl+B). The first one will be used to add vertical offset between our 4 buttons. The second variable will be used for a For Each Integer function. Add the following Actions to the trigger. The array of the For Each Integer function is the amount of buttons created. You may set the Image File field to whatever image you want to have displayed. I've used Assets\Textures\ui_frame_big_innerline_protoss.dds for this tutorial.
At last, create two Triggers (Ctrl+T). Set them up like the images below. These are used to enable/disable the color shown when the button is hovered. Be sure to have the array of the For Each Integer function the same size as the rest of your button arrays.
Conclusion of Part II
We've created a pretty, fully functioning custom dialog and button. If you have followed the tutorial step by step, you should now have a result like in the image below.
You can download the map used for this tutorial in the attachments right below.
If you're interested in downloading a similar dialog asset in galaxy code, click here.
It currently does not tint depending on the race, but I might add that option to the tutorial. About the dialog buttons, I will add more parts to the tutorial in the next couple of days, which will include custom dialog buttons.
Awesome tutorial. Would love it if you included how to change the color of the background so it fits certain races better, and also how to edit the opacity of the dialog if possible. Again, really awesome tutorial, learned a lot.