SC2Mapster Forums

Resources > Tutorials

[Dialog] Custom Dialog Technique

  • 9 posts
    #1 Mar 02, 2012 at 20:16 UTC - 4 likes

    (I am open to suggestions on how to improve)

    Custom Dialog Technique

    TopicDifficultyLength
    Part I - DialogsIIIIIIIIII
    Part II - ButtonsIIIIIIIIII
    Coming "Soon"


    Introduction

    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.

    Part I

    Step One

    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:

    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.

    Actions

    We can now use our custom action to easily set up an advanced dialog.

    Step Two

    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.

    Action Customization

    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

    Result 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.

    Part II

    Step Three

    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.

    Record

    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.

    Variable

    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.

    Action Definition

    Step Four

    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.

    Initialization Trigger

    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.

    Mouse EnterMouse Exit

    Conclusion of Part II

    Result 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.

    Downloads

    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.

    Last edited Mar 19, 2014 by ScorpSCII
    Name Size MD5
    Custom_Dialog_Technique.SC2Map 13.8 KiB 4f546277d8f4...
    • img1.png
    • img2.png
    • img3.png
    • result1.png
    • img01.png
    • img02.png
    • img03.png
    • img04.png
    • img05.png
    • img06.png
    • img07.png
    • result2.png

    Developer of Aradia

    #2 Mar 03, 2012 at 03:00 UTC - 0 likes

    I like the dialog in your picture. Does that stick for all races? I don't want the dialog turning green if I use terran. Also, how can I have dialog buttons have the same colour/textures so it matches the dialog?

    Last edited Mar 03, 2012 by Trieva

    ES Tactics (Elite Soldier Tactics)
    SC2Mapster
    EnGamer
    NA: starcraft://map/1/232755
    EU: starcraft://map/2/162001

    #3 Mar 03, 2012 at 07:56 UTC - 0 likes

    @Trieva: Go

    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.

    #4 Mar 03, 2012 at 08:46 UTC - 0 likes

    Cool, and thanks for the tutorial :D

    #5 Mar 11, 2012 at 05:10 UTC - 0 likes

    This is spot on, on how to do it.

    #6 Mar 14, 2012 at 00:30 UTC - 0 likes

    Best way I've seen to create dialogs so far.

    Thanks

    Trigger Libraries:
    Leaver Resource Redistribution | Disables resource redistribution when player leaves
    Developer's Mode | Triggers useful for map testing

    #7 Mar 19, 2012 at 12:37 UTC - 0 likes

    Update - Added Part II

    #8 Mar 19, 2012 at 13:28 UTC - 0 likes

    @ScorpSCII: Go

    Nice work.

    For live trigger help add me on Skype

    Username: Mab.youyoux

    Tutorial:Keeping your code clean and organised

    Tutorial:Simple Tug of War system

    Full4

    #9 Mar 25, 2012 at 11:55 UTC - 0 likes

    @ScorpSCII: Go

    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.

  • 9 posts

You must login to post a comment. Don't have an account? Register to get one!