• Are you planning to upload your awesome tool to Hive? Please review the rules here.
    July 9, 2018: The rules for the Tool Section have been revised. Please be sure to read the revisions.

Warcraft 3 Reforged UI Designer (RUID)

This bundle is marked as pending. It has not been reviewed by a staff member yet.
Warcraft III Reforged UI Designer (v2.4.0)

A tool made to create User Interface designs and systems for Warcraft 3 Maps without code. The application terminates the need for coding in favor of creating draggable graphical elements to express the design. Its easy-to-learn mechanics and concepts make it easy and usable for non-coders or GUI users to create fully-fledged UI systems, and its precision, speed and saved templates make it viable for Professionals and Veterans to make their systems in minutes, instead of typically hours or days.

It produces code in a file that can be opened by a text editor, then copied and pasted into a World Editor trigger or Custom Script. It works on Warcraft III version 1.31+

The main goal of the application is to take WC3 UI modding to the next level, by facilitating UI creation and allowing anyone to design their own unique UI, without any prerequisite coding knowledge. This application is made to be used by GUI coders, Jass coders, LUA coders and Typescript coders. For Typescript, it is specifically made to work with TriggerHappy's TSTL template.

Expectations

This application and UI Modding together have unlimited potential. As it gets more and more known and used, it will gradually revolutionize the whole modding scene, and become a core part of making any map. This is the future of Map Development.

Usage

You are free to use the application however you desire. We are not held responsible for the usage of the application in any inappropriate applications or products.


Brought to you by: NightKnight & Insanity_AI.
Link to the Forums


Showcases:

Trade System

UI Lock

Quest log

Fully made by a GUI user
Fully made by a GUI user


Features:
  1. Quick to learn, easy to use.
  2. Ability to create Buttons, Backdrops and Text-frames.
  3. Manually drag the elements across the screen.
  4. Ability to change properties by entering precise numbers for accurate results.
  5. Contains 9 templates for default frames.
  6. Ability to make elements with custom textures.
  7. Undo/Redo.
  8. Ability to create Frame Tooltips.
  9. For Text-frames, ability to change text, color and scale.
  10. For Buttons, ability to assign a GUI variable for easy GUI triggers/actions setting.
  11. Buttons lose focus after clicking..
  12. Ability to give Frames an array naming for easier functionality coding.
  13. Ability to set Parent/Child relation with ease.
  14. Ability to mass-produce frames in a Table or Circle patterns.
  15. Ability to assign mass-produced children frames to mass-produced parent frames for saving effort and time.
  16. Ability to create Invisible Buttons (many applications).
  17. Ability to change some options related to game's default UI.
  18. Ability to save and load anytime.
  19. Backward and forward support. All save files will work for any editor version.
  20. Ability to produce code for JASS / LUA / TYPESCRIPT.
  21. Constant feedback to guide the user and for him to ensure his actions are done.
  22. Hall of Fame page which will showcase the greatest inventions with the app, along with details about the developer and the project. This page is updated dynamically.

Planned Features

Quick Guide

Tutorials

Documentation

Change Log


  • Functionality of Checkbox
  • Creation of frames outside the 4:3 area
  • More customization to default Game UI
  • A list for useful natives for GUI users to use in custom scripts.
  • Delete With Children option
  • Duplicate With Children option
  • keyboard shortcuts
  • Tooltips for editor fields and buttons
  • Tutorials
  • Bars (like loading bars)
  • Improved Typescript export option (for far easier coding experience)

  1. Place Elements, using Insert menu. Elements are placed as children to the selected frame.
  2. Use the mouse to drag or resize the frame, or edit the properties through the Element Panel.
  3. Element Panel (panel on the left) shows the fields that can be edited for the selected element.
  4. Tree Panel (panel on the right) shows the hierarchy of the UI system. Click on a name to select that frame.
  5. Right-click on a frame to open the context menu.
  6. Undo/Redo from Edit menu. (Till keyboard shortcuts arrive)
  7. From the Tree Panel, click on "Origin". General options will now be displayed in the Element Panel.
  8. Open File menu, then press Export. Choose the type and write the file name.
  9. Now open the generated file using a text editor (ex: Notepad), copy-paste the content into an empty trigger (ctrl+a then ctrl+c). IN CASE OF LUA: you will need a custom script in a trigger that runs on Map Initialization.
    Code:
     Custom Script: LibraryName.Initialize()
  10. You're done!

Introduction & Menus


Creating & Modifying Elements


An example for making a Quest Log system using GUI


An example for making a Shop or Inventory UI design



IMPORTANT! This documentation is for version 2.0.0 and is no longer being updated. For the updated documentation, head over to the Tutorial tab inside the application.

Application's Menus

199331-0ea84dad5de286cc34e6db278ded37d9.png

This is the menu bar. It contains categories like File, Edit, View, Insert and Info. Clicking on any of them will open the submenu.

File menu
  • New: deletes everything inside the application.
  • Open: loads a saved file.
  • Save: saves the current project into a file.
  • Export: creates a file and produces the code in the chosen language. This file can be opened with any text editor like Notepad. All you have to do is copy all and paste into an empty Custom Script.
Note: In case of LUA, you will need a custom script in a trigger that runs on Map Initialization.
Code:
 Custom Script: LibraryName.Initialize()

Edit menu
  • Undo: undo the last action you did. It does NOT undo edits to text fields (like text, trig_var, textures) except Name.
  • Redo: redo the action that was undo-ed.
Note: Undo-ing then making a new change will delete the Redo log.

View menu
Nothing yet.

Insert menu
199326-b9a116ec5995a1fef895f300092a9ade.png

  • Button: clicking on it creates a Custom Button. Clicking on the dropdown thing will open the dropdown menu.
    1. Custom Button: This button can have custom texture.
    2. Script Dialog Button and Browser Button: premade ready-to-use button templates that can have a custom text inside.
    3. Invis Button: An invisible button that can be clicked. This has a lot of interesting applications, such as putting an Invis button over a backdrop.

  • Backdrop: (What is a Backdrop? A backdrop is basically an image that can't be interacted with) clicking on it creates a Custom Backdrop. Clicking on the dropdown thing will open the dropdown menu.
    1. Custom Button: This backdrop can have custom texture.
    2. All others: premade ready-to-use backdrop templates.

  • Text: clicking on it creates a Text Frame. Text Frames are basically just texts, that can be put above anything or anywhere.

  • Others: Includes special types of frames. This will contain more things later on.


Info menu
  • About Us: Brief description of who we are, how to support us, overview of the application and history.
  • Hall of Fame: explained below in this thread.
  • Change Log: Any changes will be put here.


Element Panel
199327-9276c2d595039220aea4991f8010799d.png
The panel on the left is called Element Panel. It contains all the features to modify and edit the elements.

  • General Options: If nothing is selected (or Origin is selected), these options will be available.
    1. Library Name: This allows you to set the name of the project. If more than 1 project is used in the same map, they must have different Library Names.
    2. Hide Full Game UI: This hides all the default game UI.
    3. Hide Chat: This will make players' messages not visible. Basically no one will be able to see other players' messages.

  • Universal Fields: These fields are available in most frames.
    1. Name: Specifies the name of this frame. This name can be used to get that frame when coding. Special characters and spaces are NOT allowed. Array naming however is allowed. You can turn the frame into an array by giving it an index. This is only useful for manual coding. Example: Frame[00]. Index 00 must exist in order to write other indices.
    2. Parent: The element will be a "child" to the selected element. PARENT-CHILD Relation: The concept is like putting an image inside another. The child will always be above the parent (although this behavior is not made inside the app. You may need to save and re-open the file for the correct order to be displayed), and if the parent is hidden (by manual code or through Tooltip), all its children are hidden with it. Basically if you have a background and want a button and text inside it, then the button and text both should be children to the background. Another note: When creating elements, they are made as children to the currently selected element.
    3. Tooltip: This functionality makes the element as a tooltip to the PARENT. Basically, the element will be default hidden ingame, and will only appear when the user's mouse hover over the Parent frame. Buttons can NOT be tooltips. Elements with Origin as Parent can not also be tooltips. A Parent can have only ONE tooltip. A tooltip can NOT itself have a tooltip.
    4. X/Y: specifies the location of the element.
    5. Width/Height: specifies the dimensions of the element. Minimum is 0.01, although buttons' may not be compatible with extremely small sizes (they will look wierd).

  • Buttons Fields:
    1. Text: For some buttons, this field is available. This will change the text displayed inside the button.
    2. Triggered Variable:
      • This functionality allowes for GUI-triggers to be attached to buttons and run on button clicks. It uses a (type: real) variable that can be detected by th event ("Game - Value of Real Variable") in order to run the GUI trigger.
      • First step is, make a GUI variable of type Real inside world editor, then put the it's name inside the field with the prefix "udg_". For example, a variable with name "testVar" should be put inside the field as "udg_testVar".
      • Second step is, make a GUI trigger with the event ("Game - Value of Real Variable") and put in the variable.
      • Third step is, put the actions you want. Note: when the trigger runs, this variable will hold the NUMBER of the clicking player. Basically, if blue clicked the button, the variable's value will be 2 (his number). If red clicks the button, it will be 1 (his number). You can detect the clicking player with this.
      • Fourth step, after putting in your actions, make a line that SETS the value of the variable to 0, so that it can detect the next click.
      • P.S.: You can leave this field empty if you dont want the functionality.

  • Text Fields:
    1. Text: Allows for much more text as well as multi-line texts. The behavior of this functionality is very close to the ingame behavior, including the line breaks and overflows.
    2. Scale: Controls the scale of the text. Note: the scale of the text is close but NOT identical to the text insice WC3. It will be a little different. In WC3, changing the scale also affects the position of the frame, so you may need to test and adjust scale and position for best results.
    3. Text Color: Changes the color of the text.

  • Buttons/Custom Backdrops fields:
    1. Texture Path (the first field): This is responsible for the appearance of the element INSIDE the application. It does NOT accept BLP files. This is fully for you to see what you're doing.
    2. Texture Path WE (the second field): This is responsible for the appearance of the element INGAME. You put the path of the texture you want in this field. You get the path from the Import Editor just like how you choose path for icons and stuff. Note: If the path contains single slashes "/" it will not work. You need to replace it with double slashes "//". Example: If the path is "images/icon.blp" then in the field it should be put as "images//icon.blp"

  • Context Menu (Right-Click Menu):
    1. Delete: Deletes the selected element.
    2. Duplicate: Makes a copy of the selected element with the same data and properties.
    3. CircularArray: Makes multiple copies of the selected element in a circular path around the selected element. It can also create elements in the same position by having Radius equal to zero. Helpful for making inventory tooltips.
    4. TableArray: Makes multiple copies of the selected element in a table shape. X-Gap and Y-Gap are the lengths of the distances between the elements.
    5. For both Array options, the elements are created as an array (notice their names). If the selected element to be Array-Duplicated has an array Parent, the option Array Parent will be unlocked. This option automatically assigns each element of the created array to the element of the parent array with the same index.

Note: Sometimes fields may not be automatically refreshed when doing certain actions. Clicking on the frame will refresh it and it's fields.

Tree Panel

The panel on the right is the Tree Panel. It shows the hierarchy of your project and the relations between frames.
Tip: Clicking on a name will select that frame.


Feedback Bar
199329-c728a8aa34a09a250a0dd1262b95e9e6.png

This bar gives you alot of feedback while you're working.
  1. Most actions will give you a feedback or errors here. You can also know what was done through it.
  2. This displays the WC3 coordinates of your mouse cursor. You can use this to measure distances between points or determine a certain location. Point (0,0) lies bottom left, while point (0.8,0.6) is on top right. Width of the creation area is 0.8, and the height is 0.6.


Unselected frames have green borders. Selected frames have red borders. Unselected Tooltip frames have yellow borders.


In the Changelog Tab inside the app.

Fixed a little bug(s).

In the Changelog Tab inside the app.

In the Changelog Tab inside the app.

  • New: surprise!
  • New: Mouse Cursor changes on dragging
  • New: Tutorial Tab
  • New: Keyboard Shortcuts
  • New: Array Parent on Circular Array
  • New: Better Mouse feedback on elements in Tree Panel
  • Fixed Duplicate naming
  • A lot of fixes related to Tooltip
  • Editor automatically refreshes Element Panel
  • Fixed Jass Export
  • A lot of other fixes and experience improvements


  • New: Undo/Redo
  • New: Text Frames
  • New: Tooltips
  • New: Typescript Export
  • New: Info Tab
  • New: About Us page
  • New: Hall of Fame page
  • New: Change Log page
  • New: Parent Array option for Table Array.
  • Buttons: Lose Focus After Clicks
  • Backward and Forward Support
  • New: Ability to give array names
  • Table Array: counting system changed
  • Improved App's buttons
  • More Game-UI General Options
  • Frame Border: now semi-transparent
  • Improved user experience for text fields
  • TableArray: frames are produced as an array
  • Width/Height Limit: decreased to 0.01



Hall of Fame


In the Info tab, there's the Hall of Fame page. This page is dynamically updated and will always be up-to-date. It will be used to showcase the greatest designs and ideas made with the app, along with details about the maker and the project. This is great for users to showcase their creativity and get their projects to be known.
This feature is experimental and can be subject to great evolutions and expansions.

Hall of Fame Submission
To apply for Hall of Fame entry, you must post an image or a video of the ingame appearance/functionality and a screenshot of the work done in the editor, along with a title and description. Post these as a comment here and if eligible, they will be put on the page.

_______________________________________________________________________________________________________________________________________________


Support Me!
The development of this application consumes a great deal of our energy and time. If you like it, please consider supporting me!
Patreon
You also support us by sharing this application with others and by giving us credits in your project! As well as giving 5-star rating and leaving a nice comment below. :thumbs_up:

Let the creations begin!
Contents

Warcraft 3 Reforged UI Designer v2.4.0 (Binary)

Level 7
Joined
Jan 8, 2013
Messages
346
This looks realy great and will be usefull for my map!
i just tested the .exe for 2 minutes and here are some features i would like in the future :)

im a mediadesigner and i work alot with Adobe programms etc and it would be realy good if:

• the elements(buttons etc) would align to the next one when you move it with the mouse.
• shift scale to keep solutions
• shift select to multi select
• posibillity to change width / height with PX values, not only the 0.3 values(hard to hit the 64px)

Im realy loooking forward to updates, especially this one :D
  • A list for useful natives for GUI users to use in custom scripts.
great work and thanks for doing this <3

gratefull GUI user
maker of NSAW (Startseite - NSAW - Naruto Shippuuden: Akatsuki war)
 

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
This looks realy great and will be usefull for my map!
i just tested the .exe for 2 minutes and here are some features i would like in the future :)

im a mediadesigner and i work alot with Adobe programms etc and it would be realy good if:

• the elements(buttons etc) would align to the next one when you move it with the mouse.
• shift scale to keep solutions
• shift select to multi select
• posibillity to change width / height with PX values, not only the 0.3 values(hard to hit the 64px)

Im realy loooking forward to updates, especially this one :D
  • A list for useful natives for GUI users to use in custom scripts.
great work and thanks for doing this <3

gratefull GUI user
maker of NSAW (Startseite - NSAW - Naruto Shippuuden: Akatsuki war)
Thanks for the suggestions!
 
There is control z 🤔 update
Just Edit-Undo or did you add the hotkey as well? If so does it apply to redo (CTRL+Y) as well? Downloading now.

Another cool thing would be if you separated each created frame by an empty line simply for better readability if I want to change the frames manually after they have been generated.

EDIT: Nice, both CTRL Z and CTRL Y works :)
 
Level 7
Joined
Jan 8, 2013
Messages
346
Is there a way to replace the picture? im searching in the folder and though there would be a jpg.
I want to put a ingame picture of my map there. :D
 

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
Is there a way to replace the picture? im searching in the folder and though there would be a jpg.
I want to put a ingame picture of my map there. :D
uh, by default not really. But you can use Web Developer tools inside the app by pressing ctrl + shift + i, then changing the image (you may need to use google to know what to do)
 
Level 7
Joined
Jan 8, 2013
Messages
346
lol why can i use the web develpoer tool? haha is the .exe a custom browser?

This would be a nice addon too, to change the background image.

ALSO some things i just missed at working with the exe.


• align center (had to move a box at the center, kind of hard)
• move element with arrow keys
• group select with mouse(click and select with a box)
• remove the box at the bottom, i needed to add some ocntent behind that box
• i had no chance to rename the elements, everytime they jumped back to the origin name. maybe check this?

thats the suggestions i have now while i was working on it the first time.

when i try to import this test into my map i get this error:

1630279257510.png




Greetings from germany <3
 

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
lol why can i use the web develpoer tool? haha is the .exe a custom browser?

This would be a nice addon too, to change the background image.

ALSO some things i just missed at working with the exe.


• align center (had to move a box at the center, kind of hard)
• move element with arrow keys
• group select with mouse(click and select with a box)
• remove the box at the bottom, i needed to add some ocntent behind that box
• i had no chance to rename the elements, everytime they jumped back to the origin name. maybe check this?

thats the suggestions i have now while i was working on it the first time.

when i try to import this test into my map i get this error:

View attachment 386136



Greetings from germany <3
solved on discord :). For renaming, you need to press Enter after the edit.
 
Level 7
Joined
Jun 5, 2018
Messages
175
Great work!

In the roadmap of my software kit: Intuitive Laboratory, I also planned an UI designer previously.

However, The huge workload made me streamline my plan. Another reason for streamlining the plan is that I saw exciting news that you released the development progress of UI designer.
Thank you for carrying out ideas similar to mine. Intuitive lab, used with your UI designer, mapmakers can realize complete visual mapmaking.
 
Last edited:

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
Great work!

In the roadmap of my software kit: Intuitive Laboratory, I also planned an UI designer previously.

However, The huge workload made me streamline my plan. Another reason for streamlining the plan is that I saw exciting news that you released the development progress of UI designer.
Thank you for carrying out ideas similar to mine. Intuitive lab, used with your UI designer, mapmakers can realize complete visual mapmaking.
That sounds interesting! Got a link or a description about that lab?
 
Level 4
Joined
Nov 19, 2010
Messages
51
This is a really great tool and great work NightKnight!! :goblin_jawdrop::goblin_yeah:
I really like it, i haven't created maps in a long time and started again recently after a few patches with reforged.

I saw a frame option creation for the new editor and more but i couldn't figure it out yet and this tool helps me out a lot since i am not much known with JASS, i do know a bit LUA but not sure if i can use that with the wc3 reforged editor.

PS i tried downloading the new 2.2.0 version since there is a new version available it said but i keep downloading 2.1.0 here?
I don't see the 2.2.0 attached file with the downloads neither btw
 

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
This is a really great tool and great work NightKnight!! :goblin_jawdrop::goblin_yeah:
I really like it, i haven't created maps in a long time and started again recently after a few patches with reforged.

I saw a frame option creation for the new editor and more but i couldn't figure it out yet and this tool helps me out a lot since i am not much known with JASS, i do know a bit LUA but not sure if i can use that with the wc3 reforged editor.

PS i tried downloading the new 2.2.0 version since there is a new version available it said but i keep downloading 2.1.0 here?
I don't see the 2.2.0 attached file with the downloads neither btw
There was a delay in posting the version, but it is present now!

and yes, you can code in LUA instead of JASS. You can join hive's discord to get info and help about how to get started
 
Level 4
Joined
Nov 19, 2010
Messages
51
There was a delay in posting the version, but it is present now!

and yes, you can code in LUA instead of JASS. You can join hive's discord to get info and help about how to get started
Thanks a lot i see it now yeah!

It works really great!!

But i needed to edit some of the JASS since when I tried using the "triggered variable" option with a "Script Dialog button" it did not have much information about it what i could do with it (Yeah variable setup but that is a long time ago for me and i am just getting started again )and now with the new version 2.2.0 i can see a few examples and i tried a "real" variable for it but i wasn't really looking for a variable to "call" that was getting triggered when pressed but i needed 2 buttons that would call 2 zoom triggers of mine ( So just a button to call a trigger / run a trigger )

When i use it and open it with a notepad i see always "set udg_*Name of my set variable* = GetConvertedPlayerId(GetTriggerPlayer()) "

I tried looking for some information about this (how to call for a trigger in JASS) but i couldn't find much quickly but i found a handy trick while searching that helped me out by someone by making a new trigger then add a "new action" then go for "trigger run (check conditions)" and selected my trigger ( or whatever you gonna need for JASS language, you can turn triggers into JASS language like that or text at least)

Then i clicked on "Edit" in the menu bar at the top with the new trigger i just created selected and then i pressed "convert to costum text" then click OK and it will be converted so i got JASS programming text now instead of the GUI triggers and i picked the part out that was calling the trigger that i needed for my button named "call ConditionalTriggerExecute( gg_trg_Zoom_200 )" with Zoom 200 (replace the Zoom_200 part with your trigger name) being the name of my new trigger (You need to add a _ for space usage if you have any!)

I thought it might help someone out when they are trying this program and wants to call a trigger with JASS instead of a variable
It would be a nice option to have as well @NightKnight?

PS i have also joined on discord now if i ever need some help thanks

@Timo I also agree on a few ideas like these:
• align center (had to move a box at the center, kind of hard)
• group select with mouse(click and select with a box)

My boxes are not very straight and next to each other a bit hard with moving them and setting them in line with each other
 
Last edited:

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
I thought it might help someone out when they are trying this program and wants to call a trigger with JASS instead of a variable
It would be a nice option to have as well @NightKnight?
With jass knowledge, you should be able to find the function that sets the variable and modify it to call your trigger or your own jass function
 
Level 4
Joined
Nov 19, 2010
Messages
51
Yeah i found it eventually by converting a trigger to costum text so i knew what i could use for JASS in order to call a trigger, the buttons work great.
I used texture as well for my buttons now they look much better then just text

Great work NightKnight, keep it up !

I just made that suggestion so it might be easy for another (beginners ) people to be able to call a trigger without any JASS knowledge while using your program.

I added a screenshot of my buttons ( I might change the zoom 200 / zoom 150 into texture too later )
 

Attachments

  • previewframebuttons.jpeg
    previewframebuttons.jpeg
    253.6 KB · Views: 46

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
So in a multiplayer game do you need to make the same text frame for every player? If so can we add a tool to do that for us? Thanks

Also why can we only edit 75% of the screen and not the full thing? Thanks
the 75% is a wc3 limitation, but I will add a trick that bypasses it soon. As for making a text frame for every player, I'm curious to know why you need that.
 
Level 5
Joined
Apr 10, 2011
Messages
56
the 75% is a wc3 limitation, but I will add a trick that bypasses it soon. As for making a text frame for every player, I'm curious to know why you need that.
I am trying to have different values for this. It is a Zombie Kill Counter... and player 1 might have 10 kills, player 2 might have 3 kills... and so on.


1631313630791.png
 

Attachments

  • 1631312511022.png
    1631312511022.png
    39.3 KB · Views: 13
Last edited:
Level 11
Joined
Aug 6, 2015
Messages
360
I'm curious why you need that in the exported code instead of the current method (which is setting 2 opposite vertices)
So iv made an ui where i have a banner and a text on top of it , and i want the text to be in the middle of the banner , and if the text is dinamic and changing overtime , it may disort from middle. (let's say 21 will be perfectly fine and will stay in the middle , if there will be a number like 1 or 111 or 9804 it may not be in the same middle regarding to the banner middle point. (dunno if i explained it well enough)
 

NightKnight

Hosted Project RUID
Level 11
Joined
Sep 3, 2014
Messages
194
So iv made an ui where i have a banner and a text on top of it , and i want the text to be in the middle of the banner , and if the text is dinamic and changing overtime , it may disort from middle. (let's say 21 will be perfectly fine and will stay in the middle , if there will be a number like 1 or 111 or 9804 it may not be in the same middle regarding to the banner middle point. (dunno if i explained it well enough)
I got you. That's not setting middle point or anything, thats called Text Alignment. Coming next version
 
Level 1
Joined
Apr 18, 2015
Messages
4
Nice tool, will you add C# Support? (WCSharp for example)
Also is it possible to make a Custom button with text inside?
 
Top