The New UI System: How to Use It
Dee
Member Posts: 10,447
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.
• 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.
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.
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 key2. 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
27
Comments
UI Edit Mode and the F11 key
First, find the file “baldur.lua” in the directory where your saved games are located, and open it with your trusty text editor.Add the following line to the top of this file, and save it:
SetPrivateProfileString('Program Options','UI Edit Mode','1')This will allow you to do three things:First, it will let you enter “Edit Mode” on the game’s user interface by pressing F11 on your keyboard. With Edit Mode, you can drag objects around the screen and place them exactly where you want them to live. Press F11 again to leave Edit Mode and save your changes.
Second, it will let you preview changes you make to UI.menu without having to restart the game, by pressing F5.
Finally, if you hover over an element and press the Tab key, you'll see exactly what line in UI.menu defines that element. This is profoundly helpful when making changes that require you to change the code, and we'll be using it extensively in the other two sections.
Your changes are saved to UI.menu, which will be copied to your override folder in the game's installation directory. If at any point you decide you want to get rid of all your changes and return to the game's default menu layouts, just rename UI.menu to something else or delete it altogether. Don't do this while the game is running. If you rename or delete UI.menu while the game is running and press F5, the game will crash because it's looking for the changes to a file that no longer exists.
If all you want to do is move buttons around on the screen, Edit Mode is all you need to get started. Meet me inside the button below for a quick tutorial on moving things around.
Tutorial: Moving Screen Elements in Edit Mode
First, make sure that you’ve added the following line to baldur.lua and saved it:SetPrivateProfileString('Program Options','UI Edit Mode','1')Now, launch Baldur’s Gate: Enhanced Edition. When you get to the main menu screen, press F11.See those yellow rectangles? Each one of them represents a UI element that you can resize and move. To start, hover the mouse over the Quit Game button until its entire rectangle is blue, and click and drag it up about a quarter of an inch.
Moving screen elements is as simple as clicking and dragging. Some smaller elements, though, may need to be enlarged before they can be moved. If you try hovering over the version number, for instance, you’ll notice that no matter where you put your mouse, you can’t get the entire rectangle to be blue.
So before we move it, we’ll need to make it bigger. Hover over the top edge of the version number’s rectangle until that top edge turns green, then drag it up just a bit. Now when you hover over the rectangle you should be able to find the “sweet spot”. Move it down to the space below the Quit Game button.
You can also make text boxes smaller, and the text will wrap itself automatically. Let’s move the information text from the top right into the space above the Quit Game button.
Whoops! This text box is too big for the space and it looks bad. Luckily, we can resize it. Just click on the left edge of the rectangle and drag it in until it fits in the space.
And there you have it.
Any element can be moved or resized. Be aware, though, that shrinking or enlarging graphic elements like buttons and screen backgrounds won’t shrink or enlarge the graphics themselves. Think of it like cropping an image: changing the size of the rectangle’s frame changes the viewable area of the image, but doesn’t alter the image itself.
Press F11 again, and you’ll leave Edit Mode. Check out that handiwork!
To Recap:
Return to Index
Changing Game Fonts
Let’s say you really like Comic Sans. Like, love it. When you write a paper for school, you write it in Comic Sans. When you create a poster, you use Comic Sans. Wouldn’t it be great if you could see Comic Sans in Baldur’s Gate, too?In this section, I’ll be showing you how to change the fonts that are used in-game, and how to make sure they’re displayed correctly and legibly.
For this, you’ll need a copy of Near Infinity, because you’re going to be exporting BGEE.lua to your override folder. @argent77 is currently maintaining Near Infinity; you can find the latest version here.
Install Near Infinity and set it up according to argent77’s instructions. Once it’s set up and running, find the folder called LUA and expand it. Click on the file “BGEE.lua” and then, in the panel on the right, click “Save” to save a working copy of this file to your override. Now close Near Infinity, and open BGEE.lua using your favorite text editor.
(You can do everything in this section from Near Infinity instead, but we’ll be using that text editor a lot and it’s important to be able to make changes quickly.)
With the text editor open, find the following line:
fontcolors = {}When you first open the file, this will be somewhere around line 648.Everything for the next 150 lines or so pertains to the fonts that are used in-game. The first section dictates the colors: Change the color for a given code using ARGB codes. You can find more information about ARGB codes here.
The single-character “code” (ex. fontcolors[‘M’]) is used to call the listed color in the various styles, which are described in the next section. Here’s an example: This block contains all of the information about this style; when you use the “normal” style in UI.menu, this is the style you’re using.
Some Terms:
- “color” selects the fontcolor defined in the previous section. You can also set an 8-character hex code directly, but for consistency it’s better to change your colors in the fontcolors section.
- “font” selects the specific font that will be used. You can use one of the game’s existing fonts, or you can copy a TTF file into your override folder and use that one. Be aware, though, that the file name must be eight characters or less; if your font has a longer name, you’ll need to shorten its file name before it will be recognized here.
- “point” determines the default size of the style. If you’ve ever used a word processor, the size you use for text is exactly the same as the size used here. If you decide to use a font that looks smaller or large, you may want to adjust this “point” size accordingly.
- “valign” determines vertical alignment for the text within the frame. “top” will align it to the top; “bottom” will align it to the bottom; “center” will center it within the frame.
- “halign” determines the horizontal alignment for the text within the frame. “left” will align it to the left side of the frame; “right” will align it to the right side; “center” will align it to the middle.
- “upper” determines whether the text will be displayed in all upper-case letters (1) or not (0). If you don’t include an entry for this field, it will default to 0.
- “pad” assigns padding to the borders of the text frame, ensuring that the text will always be a specific number of pixels from each edge. This field is listed as a series of four numbers, which refer (respectively) to the frame’s left, top, right, and bottom edges.
- “useFontZoom” is what determines whether or not this style will resize itself based on the user’s Font Size settings. If this field is set to 0, this style will always appear at the defined point-size, regardless of the user’s Font Size settings (which is important if you’re putting text on a button, but less important for item descriptions).
If all you want to do is swap out an existing font for a new one, of course, you don’t need to open BGEE.lua at all; just copy the desired font to your override folder, and rename it “NORMAL” or “STONESML”, or any of the other fonts that you see defined in the “styles” block.Meet me in the button for a pair of examples: one where we change all the fonts in the game to Comic Sans using just override files, and one where we do it through BGEE.lua.
Tutorial: Working with Fonts
Before we begin here, you will want to grab a copy of your Comic Sans font. This font comes installed on most computers, and you can find it in your Font Book (Mac) or Fonts library (Windows). If you need help finding your fonts, Google is your friend.Once you’ve found Comic Sans, make sure you have it as a .ttf file; .otf and .ttc won’t be recognized by the game’s engine. (You can use any font you like, but Comic Sans is a visually distinct font that will also be a little goofy to see in game.)
Changing Fonts with BGEE.lua
Copy the Comic Sans ttf file to your override folder. Now, rename it to something that’s eight letters long. I’ll be using COMIC.ttf for ease of reference. It should be sitting happily right next to BGEE.lua.Now, open BGEE.lua (you saved a copy to your override already, and find the “styles” block.
Within this block, every time you see a line beginning with font =, change the text in the single-quotes to COMIC. The full line should look like this: Comic Sans is a smaller font; because of this, you may want to increase the point-size on some of the styles that are used as set-pieces.
When you’re done, save BGEE.lua and launch the game. Voila! Everything’s in Comic Sans!
Changing Fonts with Font Overrides
That was an easy and straight-forward way to change the fonts. But sometimes you don’t want to dive into the code; instead, you want to drop a file into your override and see how it looks in-game.For our purposes, we’ll be using Comic Sans to change the font of the game’s dialogue and text descriptions. Copy your Comic Sans font to the override folder, and change its file name to NORMAL.ttf.
Now, just launch the game and see your font in action. Any time the font “NORMAL” is called, the game will use Comic Sans instead.
To Recap:
- Modify BGEE.lua when you want to make specific changes to one or more text styles.
- Use override files to test the visual appearance of fonts and see them in game.
It is better to make changes using BGEE.lua once you know how you want your fonts to appear; you can more clearly define how the game’s text appears, and you’ll save yourself a lot of copying of the same font file as well.Return to Index
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?
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:
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.
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.)
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)?
The next section is up, but WYSIWYG ate a lot of the formatting. Bear with me...
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” 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.
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.
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:
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!
To Recap:
Return to Index
(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.
A couple people (okay, more than a couple) wanted a way to use the old Record screen layout with the new Character Sheet style of tabs. So here it is:
I'm also going to attach a zip file containing my copy of UI.menu and my (modified) version of the GUIRECBG.png file used for the screen's art. Bear in mind, I'm still not an artist.
Otherwise, enjoy!
A quick disclaimer: this screen is on our list to be redesigned. When it is, this sample will continue to work as-is but will not receive any new changes. Use this sample as a sandbox to play around with the UI, but this is not meant to be an official replacement for the default UI.
Return to Index
This one seemed like such an obvious thing that I didn't realize it was new until our lead programmer pointed it out to me. But you no longer need to convert your UI art to .MOS in order to use it in-game.
What does this mean? It means I can take my Classic Record, shown above, and do this:
To make it work, you'll need to make sure that you use a 24-bit PNG. But then just drop it into your override, reference it in UI.menu, and voila. Instant UI art. I'll attach the PNG I used in the above screenshot so you can see what it looks like on your own system.
Return to Index
(waiting for the tut how to change the red color in this (active tab, bars) into something more shiny-fantasyish instead of fady-grady.)
1.3 uses MOS files, which you can export using Near Infinity.
Look for the following: "showAbilityScores = 1"
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.)
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.)
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