The UI Refactor Investigation card discussion

JuliusBorisov

Greatings, NWN:EE enthusiasts!

Please, provide more details and feedback for

https://trello.com/c/z78Ahb4B/2-ui-refactor-investigation

in this thread.

Trinital

My Synopsis, Playing Off NWN2's Implementation (Although it wasn't perfect)

High Level Overview

• Ensure the UI is customizable and fully open source / overridable
  
• Ensure that as much as possible the hooks into the game are all open source scripts (No hardcoded calls from UI)
  
• Allow for Data Passing between UI layer and NWScript State Machine
  
• Use a common standard for UI Elements like XML
  
• Allow Refresh Rate of Elements to be controlled / Or Fired off Event Raising
  
• Give a Wide Variety of UI Elements, (Buttons, Lists, Progress bars, Radio Buttons, Ect)
  

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 );

IndiraLightfoot

Having played and modded NWN2 heaps and heaps, I truly second everything Trinital just argued for.

ShadowM

When we are talking about custom UI changes, I mostly talking let us send a specific client a window with images/video (maybe add support for descriptions/books to support images) and custom timer bars for timed events, condition feedback like hunger, thirst, Air, power levels, radiation etc..

Ancarion

However complex it is ultimately decided to make gui customization, I think it's important to still maintain some degree of accessibility for novice creators. Provide a wizard, with the option to choose from several basic templates such as timed event, yes/no confirmation, basic text display, etc. and an easy way to define the text that will appear and how long the gui will be displayed (either in the wizard itself or through scripting, as in Trinital's examples from NWN2). Include in the wizard an option to create a custom gui, that will allow more advanced users to code their own with XML or similar.

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.

delolia

NWN2 was good for custom UI, the UI was "slow" but it was due to the game not the builders.
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.

Jimbobslimbob

Here is one of my previous ideas/posts that I would love to see for the 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:

Symphony

@Jimbobslimbob We already have a card for your suggestion, which is a slightly different topic, since it involves adding features to the current interface, whereas this topic relates more to the softcode elements/all of the UI so that they can be moved/integrated with new functions, options, and NWScript data.

I think your suggestion is fairly well explained, while this topic made need some decisions made regarding its intents and scope.

Jimbobslimbob

@Symphony OK, thanks. Must have missed that one.

FreshLemonBun

Just my 2 cents...

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.

Omnipsi

Everything FreshLemonBun said, and all fantastic ideas above as well. Client-side customization where possible is particularly nice, from re-positioning to rescaling, and perhaps saving and loading GUI customization profiles on the players end (switch between a caster and a fighter character/UI for one server with custom GUI elements, separate from caster and fighter and other UI profiles on the base game, etc).

flyinghtcher

receiving and sending HTML would be nice, so you can update info without using the toolset

hermyt

Whatever changes occur, and I do agree that having the UI customizable is a great option, please ensure that the existing UI and its functionality can be recreated.

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.

Thorsson

Obviously some people love using the keyboard, hence the suggestion elsewhere that I purchase a numeric keypad (a reasonable suggestion, but takes up too much desk real estate for me). However, personally I prefer doing as much as possible with the mouse, restricting the keyboard to a few functions, preferably using the larger or left-hand side buttons (ones that are easy to reach with my left hand with the keyboard in its normal position).

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.

Verilazic

@ Beamdog: What additional input can we send your way to help with this? Are there some more specific questions in here that you'd like to see more discussion about?

Barry_1066

I would like to be able to have a little control bar when summons or animals and familiars are being used - at present one needs to talk to them with a conversation - no combat - and it is not as simple as clicking a button. If that was customizable, many uses could be applied.

Altpersona

I'd like a Full character sheet. If for example, I have an AC Deflection bonus +2 vs Dragons*... it should say it somewhere other than searching out every clickable thing (Item descriptions, skills, feats).

*The terms 'AC', 'Deflection bonus', and 'vs Dragons' are chosen randomly and not meant to inpune or harass.

JuliusBorisov

This card has just been moved to the Icebox.

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.