The UI Refactor Investigation card discussion
JuliusBorisov
Member, Administrator, Moderator, Developer Posts: 22,752
Greatings, NWN:EE enthusiasts!
Please, provide more details and feedback for
https://trello.com/c/z78Ahb4B/2-ui-refactor-investigation
in this thread.
Please, provide more details and feedback for
https://trello.com/c/z78Ahb4B/2-ui-refactor-investigation
in this thread.
0
This discussion has been closed.
Comments
High Level Overview
NWN2 Quick Reference:
Just as an idea to get the gears moving, these api's give an extreme amount of flexibility. Each UI state is tightly coupled to the oPC that the UI belongs to.
You can hook any button or UI element up to a nwscript, and even chain multiple click events together in a sequence. With optional parameters being passed in.
Example:
UIObject_Misc_ExecuteServerScript("gui_core_stealthdm",1) would execute main() function in the script 'gui_core_stealthdm' with a integer parameter of 1. The function on the other end could be any prototype you wish, taking as many or as few integers as you wanted - all values defaulting to 0 or empty string.
An example UI:
<?xml version="1.0" encoding="utf-8"> <UIScene name ="SCREEN_DM_SILENT_LOGIN" x=ALIGN_CENTER y=ALIGN_CENTER width=388 height=76 modal=true capturemouseclicks=true draggable=false backoutkey=true scriptloadable=true priority="SCENE_SCRIPT" fadein=0.3f fadeout=0.3f idleexpiretime=0.5 /> <!-- BUTTON CONTAINER --> <UIPane name="BUTTON_CONTAINER" x=ALIGN_CENTER y=24 width=254 height=32 capturemouseclicks=false > <UIButton name="publicloginbutton" text="Public Login" x=0 y=0 style="STYLE_SMALL_BUTTON" OnLeftClick0=UIObject_Misc_ExecuteServerScript("gui_core_stealthdm",1) OnLeftClick1=UIButton_Input_ScreenClose() /> <UIButton name="cancelbutton" text="Silent Login" x=130 y=0 style="STYLE_SMALL_BUTTON" OnLeftClick0=UIObject_Misc_ExecuteServerScript("gui_core_stealthdm",2) OnLeftClick1=UIButton_Input_ScreenClose() /> </UIPane> <!-- Main Window --> <UIFrame width=PARENT_WIDTH height=PARENT_HEIGHT topleft="frame1_tl.tga" topright="frame1_tr.tga" bottomleft="frame1_bl.tga" bottomright="frame1_BR.tga" top="frame1_t.tga" bottom="frame1_b.tga" left="frame1_l.tga" right="frame1_r.tga" border=32 /> <UIFrame x=7 y=8 width=374 height=60 fillstyle="tile" fill="cloth_bg.tga"/>A Few API Examples:
void CloseGUIScreen( object oPlayer, string sScreenName ); void DisplayGuiScreen( object oPlayer, string sScreenName, int bModal, string sFileName = "", int bOverrideOptions = FALSE); void SetGUIObjectDisabled( object oPlayer, string sScreenName, string sUIObjectName, int bDisabled ); void SetGUIObjectHidden( object oPlayer, string sScreenName, string sUIObjectName, int bHidden ); void SetGUIObjectText( object oPlayer, string sScreenName, string sUIObjectName, int nStrRef, string sText ); void SetGUIProgressBarPosition( object oPlayer, string sScreenName, string sUIObjectName, float fPosition ); void SetLocalGUIVariable( object oPlayer, string sScreenName, int nVarIndex, string sVarValue );One of NWN's strengths is its ease of entry for beginners, without limiting what more experienced builders can create. I think user-defined gui's should follow that same paradigm.
The same thing in NWN could be the best thing I can see in the development of my old module (13 years oO).
Custom UI with text, button, script interraction is the must have and if we can also have custom image integration it will be better.
I create a lot of systems for my module (craft, custom factions, pvp arena, Pvp battleground, etc..) and all of them can be better with custom UI.
Spell/buff/effect timer
The icons that appear at the top of the screen to show what buffs are currently in effect - could we get some kind of timer graphic showing how long the effect has left - like a colored border, that works like a countdown clock around the edges of the icon, which goes down as time expires?
Would be really handy for knowing when you are in need of the next re-buff etc.
Example:
I think your suggestion is fairly well explained, while this topic made need some decisions made regarding its intents and scope.
NWN2 is a good example that did many things well which extended the functionality even just by changing how things look you are able to give the impression something works even if it doesn't. This is a cornerstone to more extensive modding like the Engines server where they obfuscate the base game in order to give the impression that it's a completely classless system. At the core if you look very closely it's a single class system that doesn't progress past level 1 but they can fake or simulate progression very well with UI control.
I believe with customization a module can meet many needs that are currently being requested and might seem difficult to do. A tiered currency system based on variables instead of actual gold in the game would be one of the obvious examples.
A lot of ppl are familiar with xml style syntax because of forum post editing, tumblr theme tweaking, blogs and so on. There also seem to be a lot of packages that are open source and free to use in programs for xml reading as well as UI packages for game engines that indies tend to use.
Some of the most important things to remember for a custom UI is that there is extensive control over the positioning and sizing of all elements with attributes. So we can have attributes like these
- width="100px"
- width="20%"
- width="500px", height="50%" ... etc. etc.
- resizable="true"
- resizabletop="true"
- resizablebottom="true"
- resizableleft="true"
- resizableright="true"
- onclick="ResizeTop(100)" for percent
- onclick="ResizeTopPx(100)" for pixel
- x="0", y ="100" etc etc
- position="absolute"
- position="relative"
- draggable="false"
- alignx="left", alignx="right", alignx="center"
- aligny="top", aligny="bottom", aligny="center"
- offsetx="10px", offsety="10px"
- offsetx="10%", offsety="10%"
The NWN chat window for example has a fixed position and fixed width, it can't be dragged, and it can only be resized at the top if you click on the black top part and pull it up, if you click on it and let go it snaps shut or snaps back open to it's previous open position.Things like that might be very crucial to get the UI to behave in the dependable NWN way that players are used to quick a quick chat bar that doesn't float as a distraction and can be opened and closed quickly. Options for relative positioning and sizing might be more useful for concerns of resolution differences, so supporting both percentile and pixel manipulation would seem like a good idea.
Scripting should use something like OnInterfaceEvent to catch UI events that need scripting. Being able to use "get" functions to determine the state of various elements seems necessary also. Another thing is to send events back to the client UI so you don't need updating frequency you just tell it to update. For example sending ten consecutive responses/events and the 10th being update the UI to make the previous 9 changes.
Keybinding UI elements would be useful too. For example to get alternative hotbars you hold ctrl or shift but maybe you could add more. Not only that but what if you want a music instrument simulator then it would make sense that you temporarily want to bind keys to play like a piano while the window is open.
Being able to drag and drop UI elements in the right places is important too but NWN2 made it somewhat unclear and impenetrable. It would be good to have a way to more easily specify a possible child element and how it interacts, so extending the inventory with quickslots (in case you want hardcore rules on no fast inventory access) or weapon sets is possible.
A hak based UI alteration should also be functional from the character creation screen, allowing people to add new tabs to the creation, and also allow communication with the server from the creation screen so that it can give greater control. This might be filtering out bad character names or toggling script prerequisites on/off, and other esoteric and tricky custom content concerns.
Don't forget images need an alpha channel and UI elements need a transparency setting too.
From a modders perspective the improvements to UI for nwn2 were a godsend but as both a modder and player I found the UI and interface atrocious for actual gameplay. The radial menu imo is phenomenal with its correspondence to the numeric keypad for control and it allowed fast access to deep functions by quickly memorized keystrokes or recorded keyboard macros. The loss of that in nwn2 kept me from ever really finding my stride in play enjoyment as I did in nwn1 and has always kept me coming back.
For me the radial menu is a PITA, particularly for one of my favourite classes - the Bard. I much prefer the control system in NWN2, where I have quick cast at the top left of my screen and Bard songs at the bottom right, with one click able to "cast" anything. As I play lots of different class set ups and I don't play for hours every day, a set of macros isn't a practical solution as I wouldn't remember more than a handful.
*The terms 'AC', 'Deflection bonus', and 'vs Dragons' are chosen randomly and not meant to inpune or harass.
We have some things to investigate internally surrounding a UI refactor. We definitely want to pursue this upgrade but it will come later on the Roadmap.