Skip to content

The New UI System: How to Use It

2456789

Comments

  • mf2112mf2112 Member, Moderator Posts: 1,919
    edited March 2016
    I am slowly starting to figure this out a little tiny bit....I decided to map the tabs out since I didn't understand the overall layout, but this helped me a lot.

    Tab 1 - Character Sheet
    Tab 2 - Class
    Tab 3 - Proficiencies
    Tab 4 - Inventory
    Tab 5 - Kit Description
    Tab 6 - Stats
    Tab 7 - Biography
    Tab 8 - Ability
    Tab 9 - Combat Stats
    Tab 10 - Spells

    Looking through the latest ui.menu, at line 132 is a list of options below. Some of these seem to be used in each tab section below to define what can show up there and what can't.
    showPortrait = 0
    ShowClassInfo = 0
    showJustText = 0
    showXPBar2 = 0
    showXPBar3 = 0
    showSpells = 0
    showMemorized = 0
    showBothLists = 0
    showStats = 1
    showAbilityBonuses = 0

    On line 145 in the tab section I see the if-then for Tab 1. It has these options. Since it is the Character Sheet it makes sense to show the portrait, but none of the other options.
    showPortrait = 1
    showStats = 0
    showSpells = 0
    It then builds a list of the ability scores.
    listItems = {
    { characters[currentID].attr.str, 9582 },
    { characters[currentID].attr.dex, 9584 },
    { characters[currentID].attr.con, 9583 },
    { characters[currentID].attr.int, 9585 },
    { characters[currentID].attr.wis, 9586 },
    { characters[currentID].attr.cha, 9587 }
    }

    Next is tab 2. Since it is the Class tab it is set to show the class info, then builds another list and shows the bars.
    showClassInfo = 1
    showStats = 0
    showSpells = 0

    listItems = {
    { characters[currentID].classlevel.first, characters[currentID].classlevel.first },
    { characters[currentID].classlevel.second, characters[currentID].classlevel.second },
    { characters[currentID].classlevel.third, characters[currentID].classlevel.third },
    }
    if (characters[currentID].classlevel.second) then
    showXPBar2 = 1
    end
    if (characters[currentID].classlevel.third) then
    showXPBar3 = 1
    end

    Next is tab 3. It is the Proficiencies tab, which starts by building a list starting with Lore, so here is your chance to (re)move it. Also Reputation should go somewhere else.

    listItems = {
    { characters[currentID].proficiencies.lore.strRef, characters[currentID].proficiencies.lore.current, characters[currentID].proficiencies.lore.helpStrRef },

    { characters[currentID].proficiencies.numAttacks.strRef, characters[currentID].proficiencies.numAttacks.current, characters[currentID].proficiencies.numAttacks.helpStrRef },

    { characters[currentID].proficiencies.reputation.strRef, characters[currentID].proficiencies.reputation.current, characters[currentID].proficiencies.reputation.helpStrRef },

    }
    There is much more but unfortunately this is about as far as I can get tonight. I am feeling better now though that I might be able to use and edit a character sheet graphic and show the things I want to see in the places I want to see them.
    Mostly on Tab 1 is what I am shooting for, similar to the existing 1.3 character sheet but with the boxes a bit resized. The ability score box needs to be smaller, the portrait moved to the left, then those boxes expanded some to not have scroll bars ideally. At least until TOB. :D
    I will get rid of bio, kit description, and inventory tabs, no need for them. I would like to move most of what is in Combat Stats to Tab 1.
    Hopefully this helps someone else, it helped me going through it all like this.
    Also, I have been using Notepad++, it is free and has Lua as a language option so the formatting comes out nice.
    Post edited by mf2112 on
  • cmk24cmk24 Member Posts: 605
    @Dee do you have any idea where I can find the bit of logic that handles the UI scaling? I want to attempt to make the game display at a scale mid way between "on" and "off."
  • DeeDee Member Posts: 10,447
    edited March 2016
    @cmk24 The Beamdog folks are off for Easter weekend, but I'll try to get an answer for you on Tuesday when they all get back to the office. The UI scaling may be deeper in the engine's code, so you might not be able to fiddle with it. But I'll find out for certain on Tuesday.

    @mf2112 I wouldn't recommend getting rid of the Biography tab, unless this is just for your own personal use; a lot of players spend time on their character's biographies and they'll probably want an easy way to access it (the Customize menu is for changing your bio, not reading it). That tab also allows you to learn more about the NPCs who join your group.

    For the Classic-Style Character Sheet I provided on the previous page, I created a new variable, "showAbilityScores", which I used to enable the portrait, ability stack, and status effects regardless of the currently selected tab. Make sure you set that variable at the top of the "tabs" block, and don't set it to 0 within that block; then find the elements for the things you want to keep visible, and change the "enabled" line to look for "showAbilityScores = 1" instead of its current variable.

    (There's almost certainly a cleaner way to do that, but as I said, I'm not a programmer.)
  • lroumenlroumen Member Posts: 2,538
    @mf2112 Instead of resizing the text boxes you can also resize the line spacing between text in the tables.

    I'm liking this ui.menu capability. Makes it really easy to fix some text alignment issues I have with the distributed screen layout.

    Also, nice that we can easily change text and box colours now (I gave the xp bar a nice calm yellow colour instead of the screaming red. I gave to find the same entry for the red selection colouration).

    Still have to look into the inventory screen but I am progressing well on the character screen.

    I also have to find the colour settings for the tool tips (to make them unison when tabbing on a character and next to a character and to remove the clear text that I prefer not to have, I hope these things are in the uo.menu).

    @Dee do you know if it is possible to split this huge file into smaller chunks (separate files). It would help if not all ui menus are in this 1 file but are divided as appropriate.

    Nevertheless, this is the best feature of the patch for me! Thanks so much for the short tutorials (finally my lua knowledge comes in handy again).
  • DeeDee Member Posts: 10,447
    edited March 2016
    @Iroumen I'm not sure if that's possible with the .menu format. I'll ask on Tuesday. I do know that making changes to BGEE.lua don't take effect until you restart the game; F5 won't catch them.

    Also, pro tip: if you add the following line to an element's block:
    mosaic   "filename"
    

    Then that element will use FILENAME.png as its background. Useful for creating more modular designs (you don't need to create an element for the background and then a separate element for the text that appears on that background).

    See the attached screenshot:
    jq72fbta7b7u.png

    Here's the code block, so you can see it in context:
    label
    	{
    		area		92 10 680 44
    		mosaic		"FLAMEME"
    		text		"GRAPHICS_TITLE"
    		text style	title
    	}
    

    If you put the "mosaic" line below the "text" line, it will show the mosaic image on top instead of behind. You can use that to do fun things like... this:
    l6fzb334943b.png

    And again, here's the code block:
    button
    	{
    		enabled		"showPortrait"
    		name		"BUTTON_2_2"
    		area		357 101 180 279
    		--text		lua "characters[currentID].portrait"
    		text align	center center
    		text point	10
    		text color	B
    		bitmap		lua "characters[currentID].portrait"
    		mosaic		"WINDOW"
    		action
    		"
    			Infinity_Log(dump(characters, 0))
    		"
    	}
    
    Post edited by Dee on
  • mf2112mf2112 Member, Moderator Posts: 1,919
    edited March 2016
    Hi Dee, you are right, I had really just been thinking about my local install and I have seen the bios and kit descriptions so many times, but it would be better to move things around versus getting rid of them completely. I am a hacker/slasher/engineer, a terrible artist, and a novice scripter, so I am not going to challenge any of the real modders. :) I just like to play and learn more about a 18 year old now unlocked treasure chest.
    lroumen wrote: »
    @mf2112 Instead of resizing the text boxes you can also resize the line spacing between text in the tables.

    I'm liking this ui.menu capability. Makes it really easy to fix some text alignment issues I have with the distributed screen layout.

    Also, nice that we can easily change text and box colours now (I gave the xp bar a nice calm yellow colour instead of the screaming red. I gave to find the same entry for the red selection colouration).

    Still have to look into the inventory screen but I am progressing well on the character screen.

    I also have to find the colour settings for the tool tips (to make them unison when tabbing on a character and next to a character and to remove the clear text that I prefer not to have, I hope these things are in the uo.menu).

    @Dee do you know if it is possible to split this huge file into smaller chunks (separate files). It would help if not all ui menus are in this 1 file but are divided as appropriate.

    Nevertheless, this is the best feature of the patch for me! Thanks so much for the short tutorials (finally my lua knowledge comes in handy again).

    @Iroumen That is an elegant idea, thanks!! I also like the idea of splitting up the file into chunks to make it more understandable and easier to manage. I guess that could be done within the existing file though with some comment blocks from the devs? (hint, hint @Dee :) )
  • cmk24cmk24 Member Posts: 605
    Something odd is happening when I make changes via F11 and then reload UI.menu via F5:

    Before F5 reload:
    b8dd0ru5z46k.png

    After F5 reload:
    0w0fbtvf6sxt.png

    If I quit the game and load it back up it goes back to what it was in the first image. Any ideas what could be causing the dialog box to shift down when reloading via F5?
  • DeeDee Member Posts: 10,447
    edited March 2016
    Nothing comes to mind, but it's worth a bug report.

    In the meantime, you should be able to fix it by pressing Esc twice, without having to reload.
  • lroumenlroumen Member Posts: 2,538
    edited March 2016
    @mf2112 Some minor shuffling of the current interface and reduction of the table cellheight gives all tabs shown without the scrollbar.
    2wff1h8yeluv.png (btw, the levelup XP bar glows from light to dark yellow, it is elegant on screen but the screencapture was at the extreme light yellow so it may seem that the text is poorly visible). I am not certain about the order, still trying to sort the content first.

    @cmk24 That happens when I make changes to the character sheet UI as well. I simply switch screen/tab and go back to where I was editing and it should now reload what you have changed.

    @Dee Again, thanks for the help :)


    Post edited by lroumen on
  • cmk24cmk24 Member Posts: 605
    @lroumen @Dee thanks, double esc or opening a different menu fixes the issue.
  • PeccaPecca Member Posts: 2,218
    Splitting would be nice. Or if we could perhaps create partial .menu files (for example inventor.menu and create inventory tweaks in it) and that file would override the respective parts in the UI.menu. Somehow. :)
  • cmk24cmk24 Member Posts: 605
    Here are my first tweaks that make the dialog box wider and the journal popup wider and taller.
    g4m1zkkp9ec7.png
    wrhd1fxre6d1.png

    I also agree, if they UI.menu could be split up then people could mix and match what UI mods they have installed (e.g. the inventory from one mod and the character sheet from another).
  • DeeDee Member Posts: 10,447
    From what I gather there's no way to split UI.menu into multiple files; it had to be done that way in order to support the f5 and f11 commands.
  • mf2112mf2112 Member, Moderator Posts: 1,919
    edited March 2016
    lroumen wrote: »
    @mf2112 Some minor shuffling of the current interface and reduction of the table cellheight gives all tabs shown without the scrollbar.

    Hi @Iroumen are you using SetSpacing(spacing) somewhere for that? Never mind, Google just showed how much more I am biting off what i can chew. Sigh. this is also screwing me up for what I am supposed to be learning, PowerShell.
  • lroumenlroumen Member Posts: 2,538
    edited March 2016
    I would like to support the statements from Dee. It will take you some time to get used to the syntax but in the end it is not difficult to change items using the lua code.
    Normal proficiency screen
    sianmlh9ltnr.jpg

    Extra info hidden. The weapon styles (red box) currently disappear in the Beamdog version. I put them back because I think it is still worthwile to see.
    bwhko4ngz84q.jpg

    Red boxed items in UI.menu fix that (do not look at line numbers, I already modded a lot). Granted, this may not be the most elegant fix and it will probably be fixed by Beamdog anyway, but still. I was able to simply find this piece of code in the updateAttrTable function (which updates the character screen and tabs UI) and just copy the code to part where the button does something I do not agree with.
    qf4caehw17j2.png
    Post edited by lroumen on
  • JuliusBorisovJuliusBorisov Member, Administrator, Moderator, Developer Posts: 22,758
    I can't wait to get the fix of the problem which currently doesn't let me save changes in the lua file. I want to play with the UI too.
  • DeeDee Member Posts: 10,447
    I have figured out what to do for the next guide. I think some of you will be pleased. Stay tuned!
  • lroumenlroumen Member Posts: 2,538
    Those F5/F11 keys are very handy. I think it would be very cumbersome without them. The UI.menu file is overall clear enough with respect to function names, but to test what you change without that F5 button... there is the challenge (manu restars will take the fun out of it).
  • lroumenlroumen Member Posts: 2,538
    edited March 2016
    mf2112 wrote: »
    lroumen wrote: »
    @mf2112 Some minor shuffling of the current interface and reduction of the table cellheight gives all tabs shown without the scrollbar.

    Hi @Iroumen are you using SetSpacing(spacing) somewhere for that? Never mind, Google just showed how much more I am biting off what i can chew. Sigh. this is also screwing me up for what I am supposed to be learning, PowerShell.
    @mf2112 Not at all. It is already predefined in the code itself. I just go for the functional block that asserts how the table or list is to be plotted and change the number there (rowheight). See example on the spell tab.
    The text is a list. The spells are inside a table of that list... So in the spell table I reduced the size of the cell for both the icon and the text (and set an offset to center the icon). Then in the list itself I also change the rowheight. fx1yvhraai66.png

    Result, smaller icons, closer together, neat spell UI. (note that all changes may scale with resolution, so my numbers are optimal for the resolution I like to play at).
    fs8f0qqsa9zk.jpg

    Post edited by lroumen on
  • DeeDee Member Posts: 10,447
    edited March 2016
    Using Lua and UI.menu
    UI.menu supports Lua code. The very first thing you see when you open UI.menu is a block of Lua:
    `
    --reload language
    if(uiTranslationFile) then
    	Infinity_DoFile("L_" .. uiTranslationFile)
    else
    	Infinity_DoFile("L_en_us")
    end
    listMetaInfo = {}
    `
    

    Everything inside the ` symbols is Lua. I won’t tell you what it means, because I don’t know what it means, and the goal of this guide is to give you the basics so you don’t get yourself into trouble. If you already know how Lua works, you can probably figure it out anyway.

    Before you make changes to an existing copy of UI.menu, be sure to back up your copy so you don’t lose any of your work. Making changes to UI.menu while the game is running can cause corruption in the file.

    Meet me in the button to learn how to add Lua to a button.
    Tutorial: Auto-Reroller
    So you know how it goes. You’re up late, you want to play the game, and you get to the Abilities screen in character creation. Here we go again, you think, as you settle into the process of methodically rerolling your ability scores. Wouldn’t it be great if you didn’t have to sit there for an hour and a half waiting for that 92 to show up?

    Let’s see if we can make that dream come true.

    So you’re on the Abilities screen in character creation. Hit F11, and mouse-over the Reroll button.

    wfjcpn3unekj.png

    Take note of the line number, and open UI.menu. Find that line, and you’ll see something like this:
    button
    	{
    		area 368 628 142 40
    		bam GUIOSTSM
    		sequence 0
    		text "REROLL_BUTTON"
    		text style "button"
    		action "createCharScreen:OnAbilityReRollButtonClick()"
    	}
    

    That line at the end—action “createCharScreen:OnAbilityReRollButtonClick()”—is Lua, calling to the game’s engine to use a specific action that the engine already understands. In this case, the action will reroll the ability scores once.

    Well, we don’t want to reroll once. We want to reroll as many times as it takes to get a total of 92. Luckily, the Total you see on the screen gives us exactly what we need. Find this block:
    label
    	{
    		area 362 568 50 54
    		text lua "chargen.totalRoll"
    		text style "normal"
    		text align center center
    	}
    

    The displayed text for that field is driven, again, by a Lua variable—chargen.totalRoll.

    If you’re familiar with the basic principles of Lua, you know that you can set a “while” condition to repeat an action until the specified condition is no longer true. So we can say, in plain English:
    While the total roll is not equal to 92, reroll.

    Now, all we have to do is convert that into language that the engine will understand:
    • “while” is how we start the command
    • “the total roll” we now know to be chargen.totalRoll
    • “is not equal to” in Lua is written as “~=”
    • “92” is our target number
    • “reroll” we know to be createCharScreen:OnAbilityReRollButtonClick()
    • every “while” block has to end with “end” on a line by itself

    Put that all together, and we get:
    while chargen.totalRoll ~= 85 do
    			createCharScreen:OnAbilityReRollButtonClick()
    		end
    

    Now, copy the block for the Reroll button, and paste it right beneath the existing button. Comment out the first copy so we have it saved for later, and now replace the contents of the action “ “ with our new block of code. The new button’s action should look like this:
    action "
    		while chargen.totalRoll ~= 92 do
    			createCharScreen:OnAbilityReRollButtonClick()
    		end
    		"
    

    Save that, and return to the game and press F5. Press the Reroll button, and voila! Nothing but 92 totals.

    td44oym6l3ed.png

    Now, I’ve done a little tinkering of my own beyond what you see above. See if you can figure out how I did it, using nothing but the following screenshot to guide you:

    9uzoaqhf431d.png

    To Recap:
    • You can enter Lua code in UI.menu as long as you surround it with ` symbols
    • You can call a Lua variable to generate a piece of text for a label using the text lua field
    • You can script a button to perform a block of Lua code using the action field

    Return to Index
    Post edited by Dee on
  • PeccaPecca Member Posts: 2,218
    Dee, the game doesn't allow to expand the height of the known spells and spell descriptions areas in the mage book (it always changes it immediately back). Is there something wrong with that?
  • BillyYankBillyYank Member Posts: 2,768
    This is very cool. I can't wait to get my hands on the update and see about making a portrait chooser.
  • gnaumiecgnaumiec Member Posts: 62
    I've been playing around with it for a little bit now, and this is what I have come up with so far. I was wondering if anyone knew how i can actually display a value for reputation. I'm tired and am giving up for the night, but will try again tomorrow. It is quite fun to mod!
    goa83ylyw808.jpg
  • chilvencechilvence Member Posts: 50
    Hmm... I haven't looked at this yet because I can't get in on the beta, but would it be conceivable to make a 'full party inventory screen' using this new functionality? Basically I mean the one from Pillars of Eternity...

    Because if it is, then that would be awesome. I love these games, but the interface design has really become long in the tooth over the years...I am so tired of it, and I'm really looking forward to see what people come up with. I got loads of fun out of hacking the interface in GemRB before, but now it looks like anyone can have a go - came as a totally unexpected surprise for me, nice to see that the devs are mod friendly. Well, I mean it's not quite a source code release, in the way that id software originally championed, but it's something at least :)
  • mf2112mf2112 Member, Moderator Posts: 1,919
    edited March 2016
    So I am not as hopeless as yesterday after a long week, I finally figured out how to use the F11 GUI in the game while editing the UI.menu file and reloading with F5. I didn't realize I could do both at the same time, editing in the game and having the UI.menu file open in Notepad++ works fine as long as I click Reload when clicking back over to Notepad++.

    Big thanks to @Iroumen, the rowheight command was what I was missing to reduce the size of the lists.

    updating...Okay, this is much better. I went back and compared Dee's ui.menu file and mine side by side and realized where I had caused some issues. I got almost everything working, except the ability scores just won't show up for some reason on any page except for the strength number, the stats page I am not sure how to deal with exactly, and the bio page causes the strength number to disappear completely.

    Front page edit mode. I got everything resized and compacted to remove a lot of scroll bars. Now it is easy after a couple hours playing around. Somethings are a little confusing at first though with the shared page elements. I would change one tab and find that something had changed on another tab, like moving the abilities list box also moved the list box for proficiencies.
    z84t7htjkbcp.jpg

    Character Sheet
    6as028hzkojg.jpg

    Combat stats. I wish there was a way to add a Hide/Show Details button. I did try to add it and it sort of worked but not exactly as expected.
    frlf7kqxlwza.jpg

    Proficiencies.
    ejldpvthtdw0.jpg

    Ability. For some strange reason a scroll bar suddenly shows up on the attributes list. No attributes though.
    b8fzfpy5f5x5.jpg

    Skills. Scroll bar remains on the attributes list.
    d9hyr1hcffid.jpg

    Stats. I am not sure what to do with this exactly. I like to see it sometimes especially after killing a boss to see who got credit for it.
    83juv91rtoqg.jpg

    Bio. No strength score at all.
    9bapepm35d7o.jpg

    Pretty close now, just a few little weird things. This is fun. The other thing I would like to figure out is how to put AC, hit points, THAC0, and damage in the space below where the attributes are supposed to be. I think I just need to copy/edit a list item...did I mention how much I appreciate Iroumen's rowheight tip...
    53o2iij6dwbs.jpg


    Post edited by mf2112 on
  • lroumenlroumen Member Posts: 2,538
    edited March 2016
    @gnaumiec
    Reputation was in the proficiency tab. If you look for proficiencies.reputation I think you should find it (something like character[].proficiencies.reputation). That is how I switched it from the proficiencies to the abilities menu (except I call that one miscellaneous). The number is obtained by using proficiencies.reputation.current (see
    some of the loops, they call it v.current).

    I'm puzzling now how to get all possible keys from character[].proficiencies.ability because the k, v ipairs does not show the key (and the number of keys and order is dependent on class) and using pairs instead of ipairs (which should show the key) seems to mess up. I really want to sort the ability bonuses better. It's messy.

  • gnaumiecgnaumiec Member Posts: 62
    Thanks @Iroumen, that did the trick!
  • lroumenlroumen Member Posts: 2,538
    edited March 2016
    Making the UI more uniform (includes other tweaks). For now this fixes most alignment issues that I had with the UI. I made <Charname> the Center of the UI and moved all other UI parts downwards accordingly.
    No complete redesign of the UI, but that is my next project.
    Character
    5j3z7l0my4sq.jpg

    Proficiencies
    wvmla0e3hhqm.jpg

    Statistics
    9ep2ho2u78ls.jpg
    Post edited by lroumen on
  • FrecheFreche Member Posts: 473
    @Dee is it possible to use some kind of pause/wait (ms) in UI.menu?
    Tried to google a bit but as I understand lua doesn't have a native pause/wait command and what I tried didn't seem to work out.
  • XKalXKal Member Posts: 58
    lroumen wrote: »
    ...

    Looks really nice! I haven't dug into the UI editing at all yet, but is there an easy way to either extend the red selector a few pixels to the left, or nudge the menu headers a few pixels to the right, so the left border of the red selector doesn't align so closely with the first character of the selected menu header?

Sign In or Register to comment.