Hello. Knalle here and i'll show you how to create a scrollbar in a trigger dialog menu.
I am not going to go over how to create or use dialogs. This will just be a tutorial how to create and use Scrollbars in trigger dialogs.
For this tutorial i made an unit spawn menu for every HotS unit.
It uses 9 buttons, i put all of the units Game Links and their Images to an global variable array.
You can apply the use this menu however you want or can think of.
Like moving a dialog item that has a menu anchored to it therefore moving the whole menu.
Contents
Scrollbar Layout
Creating a Scrollbar
Normal use of Scrollbar
Using a Scrollbar Through Mouse Wheel
Scrollbar Layout
First off we will need a custom layout, so open up UI Module (hotkey Shift + F6)
If you see this go to the top with the buttons and turn on XML View (Hotkey Ctrl + 2)
Right click on the left list and add a new layout. Call it "MapLayouts" or you will need to change some values on the scrollbar frame. Then copy and paste this into it http://pastebin.com/NB5i0DRT
If you want the scrollbar to be sideways go to the "ScrollBar" Frame at the bottom and change the Orientation field to "Horizontal"
You can also change the look of the scrollbar here.
After that, save and the open up trigger module and you can close the UI Module now.
Creating a Scrollbar
So let's create the Scrollbar.
Create Dialog Item From Template
Dialog - Create a Slider for dialog (Last created dialog) using the template MapLayouts/ScrollBar
Add the scrollbar to variable
Set the size how you want, i used width 22, height 685 to fit my menu.
Hook it up how you want i hooked it to the right of my menu.
Set Dialog Item Current Value
Set to 0 initially this will be the value we use to get scroll bar state for players.
Set Dialog Item Minimum Value
Set to whatever you minimum value is could be a offset for moving dialog items or array index that we will be using for our menu.
Set Dialog Item Maximum Value
Set to whatever you maximum value is in our case its 39 because HotS has 48 units and we reduce it by the amount of buttons we have in our menu.
That should do it for the creation.
Normal use of Scrollbar
If you want your map to have multiple players using same scrollbar you should create a constant that stores the maximum number of players in your game.
And then create a global integer array that stores each players "scrollbar state"
ScrollState = 0 <Integer[MP]> (MP is the maximum player constant)
Ok, so lets create trigger that responds to the use of the scrollbar.
This is the event for when player moves the scrollbar
Dialog Item Is Used
Item: Any Dialog Item
Player: Any Player
Event Type: Changed Value
Create a local variable and save the triggering players scroll state
(udi == used dialog item)
(p == triggering player)
(pg == triggering player converted to a player group)
This should cover the normal use of scrollbars.
Using a Scrollbar Through Mouse Wheel
Blizzard finally added the event for the mouse wheel a long need asset for creating good menus.
First off lets create a global bool called "ScrollEnabled"
ScrollEnabled = False <Boolean[MP]>
This will be set to True whenever any of the items in your menu is used preferably with the "Mouse Enter" type
Also lock the triggering players camera input or create a custom camera for your map that has no zoom values and apply that camera for the triggering player.
Then we will need a new trigger lets call it "Scroll" this will be triggered by
Mouse Wheel
Player: Any Player
You can get the amount the player spins the mouse wheel by "Mouse Wheel Spin" function (Real value)
Now we need to disable the mouse scroll and unlock the players camera input or apply our default game camera when we click out of the menu.
Make a new trigger called "Scroll Disable"
And add a event that triggers it.
Mouse Clicked
Player: Any Player
Mouse Button: Any
Down: Down
End
I will attach the tutorial map to this post so you can look better how i created the menu.
Hope you learned something this was my first tutorial and probably very primitive to alot of you.
I hope to make more dialog related tutorials, post what i should do next.
You should create a smaller dialog that will contain the lines inside that bigger dialog then create a hookup dialog item like a blank image inside that smaller dialog. Then attach your line items to the blank image.
Then adding the scrollbar and making it move the hookup dialog item you should move the entire line and it disappears and reappears when you move it left or right because it's moving in and out of the small dialog.
Quick explanation, PM me if you need more info or help.
I plan to implement it follow your solution - "create a smaller dialog that will contain the lines inside that bigger dialog then create a hookup dialog item like a blank image inside that smaller dialog. Then attach your line items to the blank image."
However, one difficult is that I don't know the width of the blank image; In other words, my line items will increase its width as the time goes by. In a result, the width of blank image may increase as the time goes by.
I downloaded your testMap file, your height of the dialog item is fixed, right? Because the list of units in your map won't add more unit or remove any unit to it.
So do you have any idea to solve this problem - dynamic width problem.
Ahh! So scrollbar frames can be hooked up as "Sliders"! So confusing! How did you figure that out?
Do you know how to fix the problem of the scrollbar moving slower than the mouse cursor? Someone made a library called getResolution to calculate the scale factor but the map is totally broken.
I think there are examples in some of the Blizzards UI's that i used to get this done. Can't remember where anymore, this was so long ago. I don't know if that can be done sorry.
1 State images just take the whole image and display on the its area. 2 State cuts the image in middle and first state shows the top part of the image, second state displays the bottom part of the image
2 State Button Image
I think you can do 3 state or more but i don't how you activate those Blizzard files have some images with 3 states at least.
Introduction
Hello. Knalle here and i'll show you how to create a scrollbar in a trigger dialog menu.
I am not going to go over how to create or use dialogs. This will just be a tutorial how to create and use Scrollbars in trigger dialogs.
For this tutorial i made an unit spawn menu for every HotS unit.
It uses 9 buttons, i put all of the units Game Links and their Images to an global variable array.
You can apply the use this menu however you want or can think of.
Like moving a dialog item that has a menu anchored to it therefore moving the whole menu.
Contents
Scrollbar Layout
First off we will need a custom layout, so open up UI Module (hotkey Shift + F6)
If you see this go to the top with the buttons and turn on XML View (Hotkey Ctrl + 2)
Right click on the left list and add a new layout. Call it "MapLayouts" or you will need to change some values on the scrollbar frame. Then copy and paste this into it http://pastebin.com/NB5i0DRT
If you want the scrollbar to be sideways go to the "ScrollBar" Frame at the bottom and change the Orientation field to "Horizontal"
You can also change the look of the scrollbar here.
After that, save and the open up trigger module and you can close the UI Module now.
Creating a Scrollbar
So let's create the Scrollbar.
Create Dialog Item From Template
Dialog - Create a Slider for dialog (Last created dialog) using the template MapLayouts/ScrollBar
Add the scrollbar to variable
Set the size how you want, i used width 22, height 685 to fit my menu.
Hook it up how you want i hooked it to the right of my menu.
Set Dialog Item Current Value
Set to 0 initially this will be the value we use to get scroll bar state for players.
Set Dialog Item Minimum Value
Set to whatever you minimum value is could be a offset for moving dialog items or array index that we will be using for our menu.
Set Dialog Item Maximum Value
Set to whatever you maximum value is in our case its 39 because HotS has 48 units and we reduce it by the amount of buttons we have in our menu.
That should do it for the creation.
Normal use of Scrollbar
If you want your map to have multiple players using same scrollbar you should create a constant that stores the maximum number of players in your game.
And then create a global integer array that stores each players "scrollbar state"
ScrollState = 0 <Integer[MP]> (MP is the maximum player constant)
Ok, so lets create trigger that responds to the use of the scrollbar.
This is the event for when player moves the scrollbar
Dialog Item Is Used
Item: Any Dialog Item
Player: Any Player
Event Type: Changed Value
Create a local variable and save the triggering players scroll state
(udi == used dialog item)
(p == triggering player)
(pg == triggering player converted to a player group)
This should cover the normal use of scrollbars.
Using a Scrollbar Through Mouse Wheel
Blizzard finally added the event for the mouse wheel a long need asset for creating good menus.
First off lets create a global bool called "ScrollEnabled"
ScrollEnabled = False <Boolean[MP]>
This will be set to True whenever any of the items in your menu is used preferably with the "Mouse Enter" type
Also lock the triggering players camera input or create a custom camera for your map that has no zoom values and apply that camera for the triggering player.
Then we will need a new trigger lets call it "Scroll" this will be triggered by
Mouse Wheel
Player: Any Player
You can get the amount the player spins the mouse wheel by "Mouse Wheel Spin" function (Real value)
Now we need to disable the mouse scroll and unlock the players camera input or apply our default game camera when we click out of the menu.
Make a new trigger called "Scroll Disable"
And add a event that triggers it.
Mouse Clicked
Player: Any Player
Mouse Button: Any
Down: Down
End
I will attach the tutorial map to this post so you can look better how i created the menu.
Hope you learned something this was my first tutorial and probably very primitive to alot of you.
I hope to make more dialog related tutorials, post what i should do next.
- Knalle
@Knallertton: Go
Hi Knallertton, May I ask that How to add a scroll bar my dialog below. I try to draw a line in the dialog, bug need a scroll bar to expend it.
@akluffy: Go
Hey akluffy!
You should create a smaller dialog that will contain the lines inside that bigger dialog then create a hookup dialog item like a blank image inside that smaller dialog. Then attach your line items to the blank image.
Then adding the scrollbar and making it move the hookup dialog item you should move the entire line and it disappears and reappears when you move it left or right because it's moving in and out of the small dialog.
Quick explanation, PM me if you need more info or help.
-Knalle
@Knallertton: Go
Hi Knalle,
Thanks so much for your explanation. It seems not so easy as I thought. Do you have better idea for drawing a cure in a dialog?
@akluffy: Go
Sorry, I have not worked on anything like this that you are trying to do so i have no experience.
What are you trying to show to the player. There might be other, better solutions to display this info.
-Knalle
@Knallertton: Go
We can assume that there is only one player.
@Knallertton: Go
Hey Knalle,
I plan to implement it follow your solution - "create a smaller dialog that will contain the lines inside that bigger dialog then create a hookup dialog item like a blank image inside that smaller dialog. Then attach your line items to the blank image."
However, one difficult is that I don't know the width of the blank image; In other words, my line items will increase its width as the time goes by. In a result, the width of blank image may increase as the time goes by.
I downloaded your testMap file, your height of the dialog item is fixed, right? Because the list of units in your map won't add more unit or remove any unit to it.
So do you have any idea to solve this problem - dynamic width problem.
@Knallertton: Go
btw good job on that, didnt know we can use sliders vertically.
Ahh! So scrollbar frames can be hooked up as "Sliders"! So confusing! How did you figure that out?
Do you know how to fix the problem of the scrollbar moving slower than the mouse cursor? Someone made a library called getResolution to calculate the scale factor but the map is totally broken.
@Knallertton: Go
Wow do more tutorial like this men!
@temhawk: Go
I think there are examples in some of the Blizzards UI's that i used to get this done. Can't remember where anymore, this was so long ago. I don't know if that can be done sorry.
@egodbout: Go
Yeah sure, would love to. I just need a good topic or something specific to do.
I love you, i've been thinking about how to create scroll bars using triggers for a few days now. This saved me a buttload of effort.
Edit: What does statecount mean?
Still alive and kicking, just busy.
My guide to the trigger editor (still a work in progress)
@willuwontu: Go
Thanks and you are welcome.
Sorry i don't know what you mean by this. I can't find anything called that in the text/pictures/triggers.
@Knallertton: Go
Look at the layout XML, i'm pretty sure it has to do with button, but i'm not sure how.
Still alive and kicking, just busy.
My guide to the trigger editor (still a work in progress)
@willuwontu: Go
Ah yeah its for buttons basically.
1 State images just take the whole image and display on the its area. 2 State cuts the image in middle and first state shows the top part of the image, second state displays the bottom part of the image
2 State Button Image
I think you can do 3 state or more but i don't how you activate those Blizzard files have some images with 3 states at least.
Just a quick explanation hope this helped. :)
Hurray! Patch 3.3 fixed the scrollbar/mouse cursor movement discrepancy.