• 🏆 Texturing Contest #33 is OPEN! Contestants must re-texture a SD unit model found in-game (Warcraft 3 Classic), recreating the unit into a peaceful NPC version. 🔗Click here to enter!
  • It's time for the first HD Modeling Contest of 2024. Join the theme discussion for Hive's HD Modeling Contest #6! Click here to post your idea!

Warcraft 3 Reforged UI Designer (RUID)

Warcraft III Reforged UI Designer (v2.6.0)

Discord Link
Github Repository Link

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.
  23. Much much more!

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)
  • Much much more!

  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.

Credit Logs are inside the application.



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.6.0 (Binary)

Reviews
eejin
The application is already in a usable and useful state so therefore it is approved. I do have some things that I think would be good to change: The tool should not install itself immediately. It does not need to be anything other than a portable...
Level 3
Joined
Nov 8, 2021
Messages
11
Is it built on electron? Or qt webview? Any way, is there something stopping you for putting this online?
 
Level 11
Joined
Apr 27, 2009
Messages
201
I see with this thing someone can make a entirely new UI. AWESOME work to be honest. Not a Good job but A GREAT JOB well done.

Can I put a new UI look that will have 9 items in place where the normal Inventory was and just don't use the normal Inventory? Put all items that I pick up to that new inventory that will have 9 items. So I can change UI to get that Look? Thank you for answering.
 

Attachments

  • 9 items.png
    9 items.png
    7.4 MB · Views: 138
Last edited:

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
I see with this thing someone can make a entirely new UI. AWESOME work to be honest. Not a Good job but A GREAT JOB well done.

Can I put a new UI look that will have 9 items in place where the normal Inventory was and just don't use the normal Inventory? Put all items that I pick up to that new inventory that will have 9 items. So I can change UI to get that Look? Thank you for answering.
Yes you can make a completely custom inventory UI and put it in the same place and code it well.
 
Level 25
Joined
Feb 2, 2006
Messages
1,669
Some issues:
  • Changing the width and height in the left number boxes is not applied when pressing enter. It somehow changes back to the previous value.
  • Where can I change the font? Natives allow specifying the font with a file path or something.
  • When I save my json file I have to specify it again and again. Just store the file path.
  • No shortcuts for save etc. buttons?
  • Allow aligning widgets either at the whole background, other frames or helper lines (like in Gimp).
  • Undo shortcut Ctrl+Z does not work for me (German keyboard layout) only the manual click works.
  • Code generation needs some options like: one GUI per player with examples how it is shown for only one player or a force, arrays and loops for multiple similar buttons instead of all created manually but this might be hard to achieve.
  • Support more properties of frames like
    JASS:
    BlzFrameSetModel                            takes framehandle frame, string modelFile, integer cameraIndex returns nothing
    even without previewing it which will be part of the generated code.
  • Allow more event handlers to be generated by code for all the different mouse events etc.
  • Isn't there some text input widget like for the chat?
  • How can you allow scrollbars in both directions for widgets?
  • How can I move a widget to the background or foreground?
  • Are contexts and priorities considered? I am not even sure how they are used in JASS.
 
Last edited:

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
@Barade Your suggestions & issues have been noted :peasant-cheers-back:

Some issues:
  • Changing the width and height in the left number boxes is not applied when pressing enter. It somehow changes back to the previous value.
  • Where can I change the font? Natives allow specifying the font with a file path or something.
  • Undo shortcut Ctrl+Z does not work for me (German keyboard layout) only the manual click works.
  • Support more properties of frames like
    JASS:
    BlzFrameSetModel takes framehandle frame, string modelFile, integer cameraIndex returns nothing
    even without previewing it which will be part of the generated code.
  • Isn't there some text input widget like for the chat?
  • How can you allow scrollbars in both directions for widgets?
  • How can I move a widget to the background or foreground?
  • Are contexts and priorities considered? I am not even sure how they are used in JASS.
1 & 3: No idea why it doesn't work for you. It works normally with me.
2: Changing font native doesn't work with frames generated with code (i.e. it doesn't work)
4: This property is made for only specific frame types that aren't made in the app yet.
5: sOoN. 6: I assume you mean Horizontal Bar not "scrollbar". If you mean you want vertical bar, that isn't natively supported by WC3.
7: Currently the application unfortunately doesn't handle refreshing Element's layers (which element goes above the other), however there's a workaround for this limitation which is Save/Load to refresh the layering. Will be fixed soON.
8: They are of no use for this way of generating frames.
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
I was writing about scroll bars. If you have a text area or something with too much spaces it generates scroll bars just like in the browser. I have no idea how or if Warcraft supports this in any way.
I don't know, but there's a standalone scrollbar frame that can be put on a text area and coded to do the same. (Not in RUID yet)
 
Level 31
Joined
Aug 6, 2015
Messages
628
Suggestion
- Add a option to set the element to have a click effect (similar to default wc3 buttons)

image244.gif

Credits for the code bellow goes to an XGM user named - МрачныйВорон

JASS:
//IncludeFile "UI\FrameDef\UI\EscMenuTemplates.fdf", // adding the file

    Texture "MyNormalTexture" {
        File "ReplaceableTextures\CommandButtons\BTNSelectHeroOn.blp",
    }

    Texture "MyPushedTexture" {
//0.008-0.0010 if size of MyPushedTexture less then real of 0.039x0.039, then create click effect. 
        Width 0.038,
        Height 0.038,
        File "ReplaceableTextures\CommandButtons\BTNSelectHeroOn.blp",
    }

    Texture "MyDisabledTexture" {
        File "ReplaceableTextures\CommandButtonsDisabled\DISBTNSelectHeroOn.blp",
    }

    Texture "MyButtonHighlight" {
        File "UI\Widgets\EscMenu\Orc\orc-options-button-highlight.blp",
        AlphaMode "ADD",
        //File "UI\Glues\ScoreScreen\scorescreen-tab-hilight.blp",
        //AlphaMode "ADD",
    }

Frame "SIMPLEBUTTON" "MySimpleButton" {
    Width 0.039,
    Height 0.039,
    //ButtonPushedTextOffset 0.001 -0.001, //<- This is for text
    NormalTexture "MyNormalTexture",
    PushedTexture "MyPushedTexture",
    DisabledTexture "MyDisabledTexture",
    UseHighlight "MyButtonHighlight",
}
 
Level 7
Joined
Jun 5, 2018
Messages
180
1. Options menu item doesn't work.
2. Is it possible that this tool exports codes including trigger into trigger editor of world editor by creating a new trigger in trigger editor? If it is done, your tool could become more automatic and intelligent. I have achieved that functionality in Intuitive Effect and Scenario designers, I am glad to provide you my source code if you need.
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
1. Options menu item doesn't work.
It's a shortcut to opening the General Options in the left panel.

Suggestion
- Add a option to set the element to have a click effect (similar to default wc3 buttons)
soon.

2. Is it possible that this tool exports codes including trigger into trigger editor of world editor by creating a new trigger in trigger editor? If it is done, your tool could become more automatic and intelligent. I have achieved that functionality in Intuitive Effect and Scenario designers, I am glad to provide you my source code if you need.
I see it as too much hassle and effort that can be put into other functionalities, as well as that some devs dont use the classic trigger editor, some devs already have premade triggers with older versions of their exported project, etc.

For further discussions and suggestions you're welcome to join the discord for easier communication!
 
Level 10
Joined
May 31, 2019
Messages
137
Trying to learn this tool. Any way to get a backdrop to cover the whole 16.9 screen?

testbg.jpg

Also, it says it's made to be compatible with TriggerHappy's w3ts, but when I export to TypeScript, vs code throws errors saying that the type 'Frame' is undefined. Is there a way to fix that?
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
Trying to learn this tool. Any way to get a backdrop to cover the whole 16.9 screen?

View attachment 404055
Also, it says it's made to be compatible with TriggerHappy's w3ts, but when I export to TypeScript, vs code throws errors saying that the type 'Frame' is undefined. Is there a way to fix that?
solved in discord
 
Level 8
Joined
May 19, 2016
Messages
145
Can someone upload 1 example Map for the Inventory/shop i just cant figure it out to work ingame even with the Tutorial. the Tutorial Youtube video leaves questions behind >.<
or more tutorials please ;(
 
Level 6
Joined
Mar 27, 2019
Messages
51
Take my 5-star rating,

is the

Code:
call BlzFrameSetTexture( BackdropElementName, udg_StringVariable, 0, true)

Local or does everyone get the same Texture if I use this function?

If not how do I prevent desyncs when using GetLocalPlayer() or does this even desync at all?

I can reference the udg_StringVariable to something else for others but that would change the Texture for them also,
isnt there a way to save BackdropElementName to a variable and change it based on the outcome of GetLocalPlayer(), (I tried to save it as a String, didnt work because its a framehandle?)

Code:
set udg_Temp_Player = GetTriggerPlayer()
set udg_Temp_Button = "InvisibleDummyButton"

if GetLocalPlayer() == udg_Temp_Player then

      set udg_Temp_Button = "BackdropElementName"

endif

call BlzFrameSetTexture( udg_Temp_Button, udg_StringVariable, 0, true)
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
Take my 5-star rating,

Local or does everyone get the same Texture if I use this function?
It is global, everyone get the change.
If not how do I prevent desyncs when using GetLocalPlayer() or does this even desync at all?

I can reference the udg_StringVariable to something else for others but that would change the Texture for them also,
isnt there a way to save BackdropElementName to a variable and change it based on the outcome of GetLocalPlayer(), (I tried to save it as a String, didnt work because its a framehandle?)

Code:
set udg_Temp_Player = GetTriggerPlayer()
set udg_Temp_Button = "InvisibleDummyButton"

if GetLocalPlayer() == udg_Temp_Player then

      set udg_Temp_Button = "BackdropElementName"

endif

call BlzFrameSetTexture( udg_Temp_Button, udg_StringVariable, 0, true)
No you don't do any of that. You simply just put the call BlzFrameSetTexture inside the local block, and no it doesn't desync (All of the UI natives don't desync, except for BlzGetFrameByName).
So all you'll need is

Code:
if GetLocalPlayer() == udg_Temp_Player then

      call BlzFrameSetTexture( frame, udg_StringVariable, 0, true)

endif
 
Level 6
Joined
Mar 27, 2019
Messages
51
It is global, everyone get the change.

No you don't do any of that. You simply just put the call BlzFrameSetTexture inside the local block, and no it doesn't desync (All of the UI natives don't desync, except for BlzGetFrameByName).
So all you'll need is

Code:
if GetLocalPlayer() == udg_Temp_Player then

      call BlzFrameSetTexture( frame, udg_StringVariable, 0, true)

endif
Thank you very much for clarifying it! That's so nice that it can be called locally.

EDIT: Is there also a option to give it Hotkeys or is this function bound to GLUEBUTTONS?
 
Level 11
Joined
Jul 4, 2016
Messages
626
Great tool though it is missing a few features like the slider/scrollbar, group selection.

The zoom option should try to maintain a similar central point when zooming out and in. Right now, the zoom option forces you to scroll back to where you were or even sometimes puts you completely far out from what you were looking at. I also suggest a slower zooming option.

Also not sure if this is a bug, but array information from the side panel would sometimes disappear after saving and opening a UI reforged designer while the array information will remain in the code when exported but not in the tool itself.

A reset camera option would be great as of right now, the zooming option can be clunky.
 
Last edited:
Level 3
Joined
Oct 10, 2017
Messages
32
Using v2.6.0. The tool is awesome so far. But there is an annoying bug. The zoom doesnt work when pressing alt+mousewheel. When I spam it at the beginning, I get a small zoom, but nothing besides that works and I cant even zoom back out afterwards. That bug is super annoying, because I can not see the frames as good from so far away.
 
Top