Skip to content

The New UI System: How to Use It

DeeDee Member Posts: 10,447
edited March 2016 in UI Modding
If you’re reading this guide, it’s because you want to know how the new UI system works and how you can make use of it to create your own UI layouts. Happily, the UI system created for v2.0 of the Infinity Engine is a lot more friendly to modification than the old system of CHU files.

What you'll need:

• A good text editor (I recommend Sublime Text)
• A keyboard with working F5 and F11 keys
• A desire to create stunning UI layouts

It also doesn't hurt to familiarize yourself with the Lua programming language, but it's not absolutely necessary. (If you want to know more about the Lua programming language, I highly recommend this guide as a one-stop shop for everything you'd want to know. Google is your friend.)

It's very important to save and back up your work often. There may be occasional hiccups that can corrupt your UI.menu, which can ruin hours of hard work if you're not careful.

Guide Index

1. UI Edit Mode and the F11 key
2. Changing Game Fonts
3. An Introduction to UI.menu
4. UI Sample: Classic-Style Character Sheet
5. Using PNGs Instead of MOS Files
6. Using Lua in UI.menu

In each section, I’ll start with the basics, and then provide a short tutorial on how to do something specific. If after reading through the entire guide you have questions about how to do something, please don’t hesitate to ask. I’ll do my best to answer your questions, or to find the answers out from our programmers.
Post edited by Dee on
JuliusBorisovDoubledimasAdulPeccalroumenAbelFlashburnillathidUlfgar_Torunncmk24GrammarsaladIthualdib[Deleted User]elminsterCrevsDaakKerozevokDymeDefAxie
«13456789

Comments

  • DeeDee Member Posts: 10,447
    edited March 2016
    This post didn't work right. Skip to here for the guide on how to use UI.menu
    Post edited by Dee on
  • DeeDee Member Posts: 10,447
    The above posts should give you a taste of what you can do with the new UI system. I'll be adding to those posts (including the "Next Section: Changing a Menu" post, which is currently a stub) with additional information and tutorials as time allows. If you have specific questions about how you might do something, post them below and I'll do my best to answer them.
    JuliusBorisovcmk24
  • JuliusBorisovJuliusBorisov Member, Administrator, Moderator, Developer Posts: 22,713
    edited March 2016
    Kudos to you for all this work! 

    I have one quick question: is editing the game in the way that is described here is considered modding from the MP point of view? Will all the participants of the MP game have to get the unified UI?
    Post edited by JuliusBorisov on
    mf2112
  • argent77argent77 Member Posts: 3,428
    edited April 2016

    Update: The Near Infinity release found in this post can handle MENU and LUA resource types correctly.




    The current public release of Near Infinity (v1.36-20160214) doesn't recognize resources of type MENU and LUA yet. You can still export them, however. The file "UI.MENU" is called "UI.Unknown (408h)" and can be found in the "Unknown (408h)" folder, and the "BGEE.LUA" is available as "BGEE.Unknown (409h)" in the "Unknown (409h)" folder of the navigation tree.

    Select the file in the navigation tree and press the "Export" button at the bottom of the main view. You should change the name of the file in the export dialog to their respective "real" names:

    • UI.Unknown (408h) => UI.MENU
    • BGEE.Unknown (409h) => BGEE.LUA

    and export them into the override folder of the game. The export dialog should provide an option to create it if it doesn't exist yet.

    Post edited by argent77 on
    Dee
  • PeccaPecca Member Posts: 2,174
    Can I change a font of the specific element only? For example an "amount of gold" box in the inventory.
  • DeeDee Member Posts: 10,447
    Pecca said:
    Can I change a font of the specific element only? For example an "amount of gold" box in the inventory.
    You can create a new style in BGEE.lua by copying one of the existing blocks and changing its name, like this:

    gold =
    {
    color = 'B',
    font = 'REALMS',
    point = 12,
    valign = 'top',
    halign = 'left',
        useFontZoom = 1,
    },

    Then change the "text style =" entry for the label in UI.menu. You can also change the font directly for a given element by adding a "text font =" entry right after the "text style =" entry.

    (For your convenience, the "Gold" element on the Inventory screen starts at line 5977 in UI.menu, if you want to play around.)

    CrevsDaak
  • PeccaPecca Member Posts: 2,174
    Cool, thanks! This is going to be a long night. :)
    FlashburnAedanCrevsDaak
  • lroumenlroumen Member Posts: 2,508
    Cannot wait for the menu changing part.
    Is it possible to add text boxes or change text in textboxes?
    Suppose I want to move a text bit in the character sheet from the statistics tab to the proficiency tab, would that be a ui editing action (i.e. discussed here) or a string replacement exercise (discussed elsewhere)?
  • DeeDee Member Posts: 10,447
    @Iroumen That's a UI editing task, which will be covered in a bit of detail in the next section (which I'm posting in a few minutes here....)
  • DeeDee Member Posts: 10,447
    Sigh...

    The next section is up, but WYSIWYG ate a lot of the formatting. Bear with me...
  • DeeDee Member Posts: 10,447
    edited March 2016
    An Introduction to UI.menu
    Up until now we’ve been swimming in the shallow end of the pool. Now it’s time to get out the hard hats and the adult-size crayons and start making things do magic. If you haven’t chosen your text editor by now, go do that now. Trust me, it will make your life a lot simpler to have things highlighted for you, and with keyboard shortcuts to handle commenting.

    Again, I recommend Sublime Text, and that’s the tool I’m using, but there’s a wealth of excellent text editors out there. Find one you like, and that you’ll be comfortable using for a long time.

    If you kept the copy of UI.menu that was created back when we were moving things around the main menu, go ahead and open that up with your text editor. If you can, set that text editor as the default program for this file; if you’re serious about UI modding, you’ll be opening this file a lot.

    A lot.

    Sublime Text lets me change the language, which allows the editor to highlight syntax in a way that makes it easy to spot things I need. If your editor doesn’t have this feature and syntax highlighting is important to you, find a tool that has it. I’m setting my language to “Lua”, and setting .Menu files to always use this language. (If you do work with other .menu files that aren’t related to Baldur’s Gate, don’t do that last part; otherwise, it will make your life easier in the long run to have this set as a default.)

    Now that you’ve got UI.menu open, you’ll see what looks like a horrible, horrible mess. Like something that Cthulhu might have spat up in the sink and said “Ew, gross, what’s that” (except in the mind-disintegrating language that Cthulhu speaks, rather than English).

    If you’re familiar with Lua or other programming languages, you’ve already begun to figure out what it all means. For the uninitiated, what you’re seeing is code.

    Don’t worry. We’re going to be very safe about this.

    With this file still open, launch Baldur’s Gate: Enhanced Edition, and on that first menu screen, press F11. Hover the mouse over the Tutorial button and press the Tab key on your keyboard.

    You’ll see a tooltip appear with the following text:
    Type: Button
    Line: 7160
    Pos: 50, 306
    Size: 300x44
    

    “Type: Button” means that this element is in a block with the “button” type. Pos defines the x,y coordinates of the element’s top-left corner, and Size defines the element’s pixel width and height (respectively) on the screen.

    The “Line” entry means that when you open UI.menu, this element is defined on or around line 7160. So let’s go take a look.

    Open up UI.menu, and find line 7160. If your text editor doesn’t show you line numbers, find a text editor that does and use that instead.

    You’ll see that 7160 is in the middle of a block that looks like this:
    button 
    	{
    		bam 'STARTMBT'
    		sequence 6
    		area 50 306 300 44
    		align center center
    		text style "button"
    		text "TUTORIAL_BUTTON"
    		action 
    		"
    			startEngine:OnTutorialButtonClick()
    		"
    	}
    

    This block defines everything about that Tutorial button, from the graphic that’s used for its background (the “bam” entry) to what happens when you click on it (the “startEngine:OnTutorialButtonClick()” block). Any changes you make to that block will be reflected in the corresponding element in game.

    In fact, you can see the change you’ve made right away without having to restart the game! Just press F5 from in-game, and the screen will refresh to read the changes you made to UI.menu. You may need to switch back and forth between screens to see everything populate, but that’s a lot faster than having to shut down the game between previews.

    Follow me into the button, where I’ll walk you through the process of making a simple change, through UI.menu, to the Tabs list on the Character Sheet.
    Tutorial: Modifying the Tabs list

    First, get your copy of UI.menu open in your favorite text editor. Now, launch the game, load one of your current saves, and open the Character Sheet screen by pressing the “R” key. Press F11 to enter Edit Mode.

    s5vmbnpnkgyw.png

    Now, hover over the list of tabs on the left side of that Character Sheet window, and press the Tab key. You’ll see a pop-up with the following information:
    Type: List
    Line: 796
    Pos: 130, 218
    Size: 182x358
    

    Now switch over to UI.menu, and find line 796. What you’ll see is a block that looks like this:
    list
    	{
    		
    		column 
    		{ 
    			width 100
    			label
    			{
    				area		0 0 -1 -1
    				text		lua "t(tabs[rowNumber][1])"
    				text style  'normal_parchment'
    				
    				text align	left center
    			}
    		}
    
    		area 130 218 182 358
    		
    		rowheight	40
    		table		"tabs"
    		var			currentTabIndex
    		scrollbar	'GUISCRC'
    		action
    		"
    		currentItem = 0
    		helpTextString = ''
    		showPortrait = 0
    		showStats = 1
    		showClassInfo = 0
    		showJustText = 0
    		showXPBar2 = 0
    		showXPBar3 = 0
    		showAbilityBonuses = 0
    		showSpells = 0
    		showMemorized = 0
    
    		currentTab = tabs[currentTabIndex][2]
    		updateAttrTable()
    		"
    	}
    

    The piece we’ll be modifying is the table that shows the list of tabs (Character Sheet, Ability, etc.). So since we know we’re looking for a table, find the row that starts with “table”. You’ll see that the table we’re looking for is called “tabs”.

    At the very top of UI.menu is a group of function blocks. The “tabs” table is one of those blocks; it starts at line 82, and it begins like this:
    tabs = { }
    			
    	table.insert(tabs, {'CHARACTER_SHEET_LABEL', 1})
    	table.insert(tabs, {'CLASS_LABEL', 2})
    	table.insert(tabs, {'COMBAT_STATS_LABEL', 9})
    	table.insert(tabs, {'INVENTORY_LABEL', 11})
    	table.insert(tabs, {'PROFICIENCIES_LABEL', 3})
    	
    	table.insert(tabs, {'ABILITY_LABEL', 8})
    	table.insert(tabs, {'KIT_DESC_LABEL', 5})
    	table.insert(tabs, {'STATS_LABEL', 6})
    	table.insert(tabs, {'BIOGRAPHY_LABEL', 7})
    

    Every time you see “table.insert”, that’s telling the UI to display the specified tab. Each tab here is numbered so that you can explore more deeply the specific things that each tab includes (look for blocks that start with “if currentTab == 1” or something similar).

    For now, though, let’s get rid of that Biography tab. No one likes biographies, right? How many times have you really looked at your character’s biography? I mean, really looked at your character’s biography.

    Getting rid of it is as easy as deleting this line:
    table.insert(tabs, {'BIOGRAPHY_LABEL', 7})
    

    But wait! What if you want to restore that tab later? You probably don’t want to delete it completely. Instead, what you’ll want to do here is comment it out. In programming terms, “commenting it out” means adding a symbol to the beginning of the line that tells the code to ignore everything on that line. In UI.menu, that’s a pair of dashes. The line should look like this:
    -- table.insert(tabs, {'BIOGRAPHY_LABEL', 7})
    

    Now go back into the game, and press F5. Switch to Inventory and then back to the Character Sheet, and scroll down. Look at that—no more Biography tab!

    ovytwl84gex3.png

    To Recap:
    • If you want to adjust something specific in an element, start by finding that element in game and look it up by line in UI.menu
    • Look for the part of the element’s block that pertains to the thing you’re trying to change; if it refers to a table or a specific function, look for that table or function at the beginning of UI.menu first
    • Comment out a specific line out by adding a pair of dashes to the beginning of a line. ( Pro Tip: This can also be done in Sublime Text and some other text editors by pressing Ctrl-/ )

    Return to Index
    Post edited by Dee on
    JuliusBorisovillathidDoubledimasCrevsDaak
  • BelegCuthalionBelegCuthalion Member, Mobile Tester Posts: 453
    Just a question: assuming i do this on my windows pc, and i transfer the ui files i generate to some other machine (other windows, osx, android, ... with maybe other zoom, ui-scaling, font sizes, ...) – will it just work, or is this kind of editing intended to fix small things to ones own taste on one installation?

    (i ask because there are specific pixel coordinates and sizes used instead of relative units like percent or em, but maybe my thinking is too much web and responsive webdesign driven here)
  • DeeDee Member Posts: 10,447
    Just a question: assuming i do this on my windows pc, and i transfer the ui files i generate to some other machine (other windows, osx, android, ... with maybe other zoom, ui-scaling, font sizes, ...) – will it just work, or is this kind of editing intended to fix small things to ones own taste on one installation?

    (i ask because there are specific pixel coordinates and sizes used instead of relative units like percent or em, but maybe my thinking is too much web and responsive webdesign driven here)

    It should just work. We've been passing UI.menu files around the office and it hasn't churned up any noticeable issues--and that's going from Windows to Mac in some cases.

    Like with most modding, though, the best way to find out is to try it for yourself. You may find some odd behaviors that you'll need to account for, but (fingers crossed) it might work out-of-the-box like you planned.
  • lroumenlroumen Member Posts: 2,508
    Looks very straightforward. That will get some attention this weekend....
  • BelegCuthalionBelegCuthalion Member, Mobile Tester Posts: 453
    edited March 2016
    bewtiful, i like! :wink:

    (waiting for the tut how to change the red color in this (active tab, bars) into something more shiny-fantasyish instead of fady-grady.)
  • AedanAedan Member, Translator (NDA) Posts: 8,550
    @geminibruni, take a look at this thread. I am sure you will find it very useful :)
    CrevsDaak
  • mf2112mf2112 Member, Moderator Posts: 1,919
    edited March 2016
    Hi @Dee could you please give us the current 1.3 character sheet files from BG2 like the example above? I started to capture and edit them but then I thought you might be able to share the original png's. Thank you!
  • PeccaPecca Member Posts: 2,174
    So far I'm struggling. :) Dee, can you tell me for example what everything I need to change to get the attribute scores out of the tab to the default screen? I'm trying to compare the code, but I'm still missing something.
  • GrammarsaladGrammarsalad Member Posts: 2,582
    This thread really feels like it should be sticky
    cmk24Flashburn
  • cmk24cmk24 Member Posts: 605
    Thanks @Dee for all the information. Now I can make sure my journal has high-contrast fonts :smiley:
  • DeeDee Member Posts: 10,447
    mf2112 wrote: »
    Hi @Dee could you please give us the current 1.3 character sheet files from BG2 like the example above? I started to capture and edit them but then I thought you might be able to share the original png's. Thank you!

    1.3 uses MOS files, which you can export using Near Infinity.
    mf2112
  • DeeDee Member Posts: 10,447
    Pecca wrote: »
    So far I'm struggling. :) Dee, can you tell me for example what everything I need to change to get the attribute scores out of the tab to the default screen? I'm trying to compare the code, but I'm still missing something.

    Look for the following: "showAbilityScores = 1"
    Pecca
  • BelegCuthalionBelegCuthalion Member, Mobile Tester Posts: 453
    So modifying things that are "there" in current screens looks rather easy for anyone who has some experience with script languages.

    How about things that are not currently present on a screen, like I want - just for the sake of the example - have my characters strength value visible in his spell book ... Is there an object or variables reference somewhere what can be accessed what must be present in the engines internals somewhere?

    And what about things like not just displaying existing variables/values somewhere, but actually do something with them before displaying a result? Once again as an absurd example for the sake of it: what if I wanted to show the sum of my pickpocket skill points and my strength value in the new tab "chaotic neutral relevant things here" in character record screen? Can it be done with ui tools and if so, how?

    (I know this examples are nothing one would really want to do, but if that could be done, then a lot of more useful things can be done.)
  • DeeDee Member Posts: 10,447
    The short answer is a resounding "yes" to everything you just proposed, @BelegCuthalion - but explaining it is going to take more words than I have time for at the moment.

    My next guide will be for using Lua in UI.menu. I'll be using Lua to add a button to everyone's favorite character creation screen. We'll see how it goes.

    @bengoshi to answer your question from much earlier--multiplayer should work fine with differing UI setups; the UI doesn't dictate or alter the in-game mechanics, so you should be safe whether you've got the same or different UI.menus working on each player's installations.

    (There may be exceptions, of course; but generally speaking you should be okay.)
    JuliusBorisovcmk24BelegCuthalionGrammarsalad
  • BelegCuthalionBelegCuthalion Member, Mobile Tester Posts: 453
    @Dee Thanks, no urgency here. For my part I'll dive into the official 2.0 ui first and try to embrace it before even thinking about doing changes. But knowing the tools capabilities allows to develop ideas.
  • BelegCuthalionBelegCuthalion Member, Mobile Tester Posts: 453
    Oh oh one more thing :smiley:
    Those tabs in your example have declared a rowheight ... Is this set in each tablist in the game locally, or could such a value be set globally for all undeclared lists, or global override to make local settings be ignored?

    The thought just was to have big tabs for tablet use, but elegantly shrink them on mouse input devices to save space with a single global command like it would be done in CSS:
    List item { rowheight:20; } //to standardise all who have no local value set
    List item { rowheight:20 !important; } //to override local values
Sign In or Register to comment.