Reforged UI Designer

Status
Not open for further replies.

NightKnight

NightKnight

NightKnight

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

There is now a new thread for this tool. This thread is no longer being updated.

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!


There is now a new thread for this tool. This thread is no longer being updated.
 

Attachments

  • 50940756716_0fdbeebe6b_o.jpg
    50940756716_0fdbeebe6b_o.jpg
    360.1 KB · Views: 417
  • 50940756716_0fdbeebe6b_o.jpg
    50940756716_0fdbeebe6b_o.jpg
    360.1 KB · Views: 419
  • upload_2021-2-14_2-27-24.jpeg
    upload_2021-2-14_2-27-24.jpeg
    323.1 KB · Views: 397
  • upload_2021-2-14_2-43-3.jpeg
    upload_2021-2-14_2-43-3.jpeg
    365.7 KB · Views: 1,351
  • upload_2021-2-14_2-53-23.jpeg
    upload_2021-2-14_2-53-23.jpeg
    350 KB · Views: 1,175
  • Reforged UI Designer Setup 1.1.0.rar
    55.3 MB · Views: 697
Last edited:

NightKnight

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
grimgrents said:
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.
Click to expand...

That's too sweet man, thanks :grin:

_Guhun_ said:
You've been working hard on this for quite a while now. It's turning out very nicely!
Click to expand...

Indeed I have, thanks :thumbs_up:
 

NightKnight

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
AGD said:
Will this be open-source? Just curious..
Click to expand...

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

Jaccouille said:
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.
Click to expand...

there will be options for color themes
 

Retera

Retera

Retera

Hosted Project: WME
Level 64
Joined
Apr 19, 2008
Messages
2,562
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

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
Retera said:
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.
Click to expand...
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:
 

Aldeia

Aldeia

Aldeia

Level 37
Joined
Aug 6, 2015
Messages
786
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: 29
  • K9.w3m
    17.8 KB · Views: 35

NightKnight

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
Mustang said:
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.
Click to expand...
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

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
Mustang said:
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.
Click to expand...
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

FSK

Level 5
Joined
Jun 23, 2018
Messages
60
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

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
freesouthkorea said:
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
Click to expand...
I'll solve that soon.
 

FSK

FSK

FSK

Level 5
Joined
Jun 23, 2018
Messages
60
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

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
freesouthkorea said:
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.
Click to expand...
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

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
freesouthkorea said:
is there a way to hide the buttons with a trigger? (toggle them hidden/not hidden/)
Click to expand...

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

NightKnight

NightKnight

Hosted Project RUID
Level 14
Joined
Sep 3, 2014
Messages
222
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!
www.hiveworkshop.com

Warcraft 3 Reforged UI Designer (RUID)

Warcraft III Reforged UI Designer (v2.6.1) 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...
www.hiveworkshop.com www.hiveworkshop.com
 
Status
Not open for further replies.

Similar threads

Tasyen
UI - The concept of Parent-Frames
Replies
20
Views
8K
Chaosy
Chaosy
Tasyen
UI: Frames and Tooltips
Replies
45
Views
16K
RPG_F
RPG_F
Tasyen
The Big UI-Frame Tutorial
Replies
24
Views
16K
Tasyen
Tasyen
Tasyen
UI: Positionate Frames
Replies
23
Views
15K
Tasyen
Tasyen
Tasyen
UI: GLUEBUTTON
Replies
32
Views
11K
Tasyen
Tasyen
Top