Reforged UI Designer

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
Allow me to introduce you to the:
Ultimate Reforged UI Designer (RUID)


upload_2021-2-27_23-5-31.png


- Designed to take Map modding to the next level, with graphical Frame creation and adjustment.
- Made for everyone, from the humble GUI users to the best Typescript coder.
- Crafted to improve your modding experience, saving you from endless testing of positions and sizes.
- Created to unleash your imagination into a fully working UI infront of you.
- Engineered to be used right away, without learning about Frames, without even learning about coding.
- Forged to help Warcraft 3 rise from the ashes and shine once again!




upload_2021-2-14_2-25-13.jpeg


upload_2021-2-14_2-30-5.jpeg



upload_2021-2-17_13-40-31.jpeg

upload_2021-2-17_13-40-50.jpeg


Features

Current Available Options

Planned Features

Known Issues

How to Use

Updates


  • Quick to learn, easy to use.
  • The ability to drag Frames and resize them using your mouse.
  • The ability to enter precise numbers into the fields for accurate results.
  • Contains 9 templates for default frames, like ScriptDialogButton and Quest-Checkbox.
  • Able to import a custom texture from your PC into the editor for greater visualization.
  • For custom texture frames, contain 2 main types: Backdrop (just an image) and Button.
  • Includes functionality for Buttons (custom texture and default frame). Works by taking a "Real" variable from "Triggered Variable" field and setting it to 1 when clicked. Will get a player variable to detect the clicker soon. This is only needed for GUI, higher users are able to get the Frames' names.
  • A tidy Parent frame to know which belongs to which, and easy to change parents.
  • Produces code ready for direct copy-paste into a Custom Script trigger.
  • Produces code for vJass/Lua/Typescript.
  • Constant feedback to confirm the change you made, or explain why a change was refused.
  • Works with 1.30+
  • No ads.

  • Frame Name
  • Type (if custom)
  • Parent
  • Width
  • Height
  • Bottom-left x and y
  • Texture Path inside your hard drive (for Save option later on)
  • Texture Path inside World Editor (to use it as texture)
  • Text (for frames that support text)
  • Triggering Variable: For frames that support clicking. It is a "Real" type variable that has its value set to 1 upon clicking, and can be caught by a GUI trigger.
  • Only creates frames inside the 4:3 Resolution area.
  • Circular Array to design elements in a circular form.
  • Table Array to design elements in table form.
  • General Options.
  • Save/Load.

  • Custom Text-Frame.
  • Invisible Buttons. (Used when you have a backdrop image that has buttons drawn into it) Done!
  • Functionality for Checkbox.
  • Creation of frames outside the 4:3 area.
  • Options to edit the Game UI, hiding, moving around, etc.
  • Save/Load your work. Done!
  • GUI natives for GUI users to work with frames inside the Application, and the ability to convert those natives into code for quick copy-paste into custom script.

  • none


1616363785158.png


  1. Place Elements, using Insert menu or Custom Texture menu. Elements are placed as children to the selected frame.
  2. Use Mouse to drag or resize the frame, or edit the properties through the Element Panel.
  3. For Custom Elements, "Type" property is unlocked, allowing you to choose whether the element is backdrop or button.
  4. Open File menu, then press Export. Write the file name and choose the file extension.
  5. Now open the generated file using a text editor (ex: Notepad), copy-paste the content into an empty trigger. IN CASE OF LUA: you will need a custom script in a trigger that runs on Map Initialization.
    Code:
    Custom Script: REFORGEDUIMAKER.Initialize()
  6. You're done!

Notes & Tips:

  • Name: should NOT include any character that is normally rejected in variable names (example: space, starting with a number)
  • Texture Path (the first one) is ONLY responsible for the appearance of the element INSIDE THE APP. It has NOTHING to do with the ingame appearance. It should only be used with Custom Elements.
  • Texture Path (WE) is the one responsible for the INGAME appearance for CUSTOM ELEMENTS. It does nothing for Insert-Elements. It should point to the path of the desired texture inside world editor.
  • Texture Path (WE) #2: If the path has single slashes "/ ", replace it with 2 slashes "//"
  • Text: Currently only works for ScriptDialogButton & BrowserButton.
  • Triggered Variable #1: Put here the name of a (type: REAL) variable. Upon clicking, this variable value will become equal to the clicking player's number (starting from 0, as in, Player Red will be number 0), so the event: (Game - Value of Real Variable) can be used to detect this. NOTE: remember to set the value back to -1 in the detection trigger. NOTE: if it is GUI variable, add (udg_) prefix to the name.
  • Triggering Variable #2: NOTE: make sure the initial value of the variable is -1, not 0. If you don't want functionality, make the textbox empty.
  • udg_myArray[GetConvertedPlayerId(GetTriggerPlayer())] this will change the value of the index corresponding to the clicking player's number. NOTE: Be careful of syntax errors.
  • Clicking on the name of a frame in Tree Panel will select that frame.
  • Delete: Will delete the selected element, and move its children to the element's parent.
  • If an element gets somehow out of the boundries and is unable to be moved, use Element Panel to move it back inside.


1.0.0: Initial relase. yay!

1.0.1: Fixed the (New) button. Fixed Parent options not showing the correct value. Triggering Variable now give the player number of clicking player.

1.0.2: Unused fields in the different frame types are no longer present. Things should be easier to understand now. Also added Invis Button.

1.1.0:
  • Added General Options (accessible by selecting Origin). Will be developed further.
  • Open(Load)/Save fully functional.
  • Added "Custom Frame" to Insert options, removed the old submit form.



Project Developers: NightKnight & Insanity_AI.
Please credit the program in your map :peasant-cheers-back: . Help the tool grow by sharing it to your friends!

Please share your work with us in this thread. It may be used in a gallery later on. :grin:
Like the app? Consider supporting us!



 

Attachments

  • 50940756716_0fdbeebe6b_o.jpg
    50940756716_0fdbeebe6b_o.jpg
    360.1 KB · Views: 287
  • 50940756716_0fdbeebe6b_o.jpg
    50940756716_0fdbeebe6b_o.jpg
    360.1 KB · Views: 266
  • upload_2021-2-14_2-27-24.jpeg
    upload_2021-2-14_2-27-24.jpeg
    323.1 KB · Views: 257
  • upload_2021-2-14_2-43-3.jpeg
    upload_2021-2-14_2-43-3.jpeg
    365.7 KB · Views: 1,223
  • upload_2021-2-14_2-53-23.jpeg
    upload_2021-2-14_2-53-23.jpeg
    350 KB · Views: 1,042
  • Reforged UI Designer Setup 1.1.0.rar
    55.3 MB · Views: 225
Last edited:

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
Thank you for your hard work, we dont deserve it.

You became one of the last modding legends along with Retera & Triggerhappy no doubt about it.

That's too sweet man, thanks :grin:

You've been working hard on this for quite a while now. It's turning out very nicely!

Indeed I have, thanks :thumbs_up:
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
Will this be open-source? Just curious..

Most likely, but the code isn't pretty at all

Looks like a cool and useful project, but can you avoid the brutal change of color/font in your first post? It just tires out my eyes, but maybe that's just me.

there will be options for color themes
 
Level 2
Joined
Oct 13, 2014
Messages
7
This will be such an awesome tool to have at hand, just what i need for my projects.

Thank you for your hard work.
 
Does this tool attempt to replicate the Warcraft 3 behavior of rendering FDF files using an external program? I have been working on something that replicates the FDF rendering to help me build the Warsmash Mod Engine modding tool. I parse them using a parser generator and then layer the INHERITS definitions as property maps that overwrite each other, then later branch based on the frame's class and type and use this to determine what UI component to spawn. The result ends up able to display Warcraft 3 menus, such as the first few seconds of this video:

But my code is still "flying by the seat of my pants" with hacks, so to speak. You may notice the Campaign Difficulty dropdown is not available because I am not handling dropdown's yet. Likewise I do not actually fully support the SPRITE element type for complex models with cameras, and instead render that background using an engine-level thing that can only render 1 at a time.
It's definitely a subset of the overall FDF specification that I am rendering, and it will be even harder to support the natives later on because I do not make much of a distinction between simple frames and frames in terms of their tree (I thought I heard the real one is different than what I am doing when I read from Tasyen's tutorials at some point). So getting the children and parents of frames is always going to be incorrect, probably, in my rendering system.

So, anyway I was wondering if you do anything like that, or if there would be any benefit to comparing notes/understanding on these topics between the two codebases. With a little more reading it looks like perhaps you do not do this, and you strictly generate some Lua output based on the subset of UI components available for runtime Lua-only generation? But anyway, if you get interested in the FDF parsing, be sure to have a look at the GitHub repo I linked above and feel free to make contributions if you would like. In this sphere of FDF based modding, life is complicated.
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
Does this tool attempt to replicate the Warcraft 3 behavior of rendering FDF files using an external program? I have been working on something that replicates the FDF rendering to help me build the Warsmash Mod Engine modding tool. I parse them using a parser generator and then layer the INHERITS definitions as property maps that overwrite each other, then later branch based on the frame's class and type and use this to determine what UI component to spawn. The result ends up able to display Warcraft 3 menus, such as the first few seconds of this video:

But my code is still "flying by the seat of my pants" with hacks, so to speak. You may notice the Campaign Difficulty dropdown is not available because I am not handling dropdown's yet. Likewise I do not actually fully support the SPRITE element type for complex models with cameras, and instead render that background using an engine-level thing that can only render 1 at a time.
It's definitely a subset of the overall FDF specification that I am rendering, and it will be even harder to support the natives later on because I do not make much of a distinction between simple frames and frames in terms of their tree (I thought I heard the real one is different than what I am doing when I read from Tasyen's tutorials at some point). So getting the children and parents of frames is always going to be incorrect, probably, in my rendering system.

So, anyway I was wondering if you do anything like that, or if there would be any benefit to comparing notes/understanding on these topics between the two codebases. With a little more reading it looks like perhaps you do not do this, and you strictly generate some Lua output based on the subset of UI components available for runtime Lua-only generation? But anyway, if you get interested in the FDF parsing, be sure to have a look at the GitHub repo I linked above and feel free to make contributions if you would like. In this sphere of FDF based modding, life is complicated.
Yeah indeed I don't work with FDFs at all. My system works by using premade code templates (jass too, not lua only) with changing numbers and data as needed. If I get interested, I'll definitely have a look! :thumbs_up:
 
Level 11
Joined
Aug 6, 2015
Messages
390
So , i have some questions) , since im mostly a GUI user , iv tried to create a custom backpack via this program.
Screenshot_4.jpg
The problem is , i don't really understand how to asign a variable to the slot i need and how to change it when i need it.
(for example i want the inventory slots to open when the player press the backpack icon)
and for inventory slots to change when for example player buy a item. (or just when i want to change it anytime , how do i do it exactly?)
(after iv exported what i have on the screen)
(attached the code , and the map) the map didn't even launch.
 

Attachments

  • 0.j
    2.2 KB · Views: 19
  • K9.w3m
    17.8 KB · Views: 24

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
So , i have some questions) , since im mostly a GUI user , iv tried to create a custom backpack via this program.
View attachment 379391
The problem is , i don't really understand how to asign a variable to the slot i need and how to change it when i need it.
(for example i want the inventory slots to open when the player press the backpack icon)
and for inventory slots to change when for example player buy a item. (or just when i want to change it anytime , how do i do it exactly?)
(after iv exported what i have on the screen)
(attached the code , and the map) the map didn't even launch.
For assigning a variable, you put the variable name (with prefix "udg_") in the Triggered Variable. When the player clicks on the button, the variable value will be changed to the number of triggering player. So you can detect who's clicking, and based on that, make a code that decides whether the inventory should be open or closed. (easy)

Now for the graphical opening and closing of inventory, you'll need to make the frames either visible or invisible, and for that specific player only, not all players. You'll have to use some custom scripts (save them somewhere and copy-paste when needed),
Code:
call BlzFrameSetVisible(name, boolean)
name: name of the frame you want to hide/show. Boolean: true for visible, false for invisible.

This shows/hides for everyone. Now you'll need a way to make it for 1 player only. you'll have to use local player block. warning: wrong use can result in desyncs.
Code:
if GetLocalPlayer() == Player(#) then
to open the block, then below this write the code that will run for the player whose id is #. You can also put a variable in place of the #.
Code:
endif
then close it with this line.
 
Last edited:

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
So , i have some questions) , since im mostly a GUI user , iv tried to create a custom backpack via this program.
View attachment 379391
The problem is , i don't really understand how to asign a variable to the slot i need and how to change it when i need it.
(for example i want the inventory slots to open when the player press the backpack icon)
and for inventory slots to change when for example player buy a item. (or just when i want to change it anytime , how do i do it exactly?)
(after iv exported what i have on the screen)
(attached the code , and the map) the map didn't even launch.
ok so, after further testing, CheckListBox is what's crashing the game. I don't think its what you really wanted either. what you want is a Custom Button, by making an element from this https://live.staticflickr.com/65535/51182498275_0fced772ec_o.png then changing type to Button.
 

FSK

FSK

Level 5
Joined
Jun 23, 2018
Messages
57
how do you de-select the button? my problem is the button remains selected even after turning the real variable flag back to -1, so when anyone presses enter it clicks the button and triggers it again. Is there any to use triggers to de-select the button? or is the only option for the user to click elsewhere on the screen?

great system btw
 
Last edited:

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
how do you de-select the button? my problem is the button remains selected even after turning the real variable flag back to -1, so when anyone presses enter it clicks the button and triggers it again. Is there any to use triggers to de-select the button? or is the only option for the user to click elsewhere on the screen?

great system btw
I'll solve that soon.
 

FSK

FSK

Level 5
Joined
Jun 23, 2018
Messages
57
i did realize after posting this theres one advantage to it as is--if you have to click numerous times you can click once and then press/hold enter instead of having to spam click. If possible it would be nice if each player could configure that option on or off, or something.

Edit: If you can make it so if you hold enter when you click it continues to activate the trigger/select the button until you stop pressing enter that would be great, but if you dont hold enter when you click then it should deselect after one activation.
 
Last edited:

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
i did realize after posting this theres one advantage to it as is--if you have to click numerous times you can click once and then press/hold enter instead of having to spam click. If possible it would be nice if each player could configure that option on or off, or something.

Edit: If you can make it so if you hold enter when you click it continues to activate the trigger/select the button until you stop pressing enter that would be great, but if you dont hold enter when you click then it should deselect after one activation.
That's unfortunately too complicated. I'm going to make all buttons de-select after clicking, but it will be very easy to manually delete the function from the produced code, and I can show you how by then,
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
is there a way to hide the buttons with a trigger? (toggle them hidden/not hidden/)

Custom script:
Code:
call BlzFrameSetVisible(FRAME_NAME, false)

FRAME_NAME: the name you assigned to the frame you want to hide/show. true/false: true if want it visible, false if want it hidden
 

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
218
Great news boyz! I am back with a huge update! Version 2.0.0 has been released, and we're moving to the Tools Section!
 
Top