Custom UI for the game

[Shekn]

I would like to create a game UI from scratch. Using the demo example, the process is more or less clear. But I have a few questions:

1. I create a main game window with a message text area as in the demo:

game_window = GemRB.LoadWindow(0, "GUIW", WINDOW_VCENTER | WINDOW_HCENTER)
game_window.SetFlags(WF_BORDERLESS | IE_GUI_VIEW_IGNORE_EVENTS, OP_OR)
game_window.AddAlias("MSGWIN")
game_window.AddAlias("HIDE_CUT", 0)

text_area = game_window.GetControl(0)
text_area.SetFlags(IE_GUI_TEXTAREA_AUTOSCROLL)
text_area.SetResizeFlags(IE_GUI_VIEW_RESIZE_ALL)
text_area.AddAlias("MsgSys", 0)
text_area.AddAlias("MTA", 0)
text_area.SetColor(ColorRed, TA_COLOR_OPTIONS)
text_area.SetColor(ColorWhite, TA_COLOR_HOVER)

I want to hide this message window at the start of the game. So I call

game_window.SetVisible(False)

But then the window is still visible in the game. If I create a separate button and call this command on button click, then it is properly hidden. So who overrides the visibility flag and why? And how can I toggle the message window properly?

2. Are there any standard callbacks when some game events are happening. I mean for example the start of the dialogue with the NPC? Can I create a method that can be called automatically when the dialogue starts and ends? As I understand, I can add this call to the DialogStarted() and DialogEnded() methods in GUIWORLD.py, but it requires filtering the game type (to prevent calling non-existent methods for supported games).

3. How can I change the colours inside the message box? I can set different colours using the text area's SetColor method, but how is it possible to change the colour of the NPC name (green in the demo) and player (light pink in the demo)?

4. When the game is paused in the demo, a message appears in the text area, but nothing appears in my custom UI. What is missing in the settings?

[lynx]

1. Don't know of the top of my head. Perhaps the call is too early. Have you tried with ToggleGUIHidden instead?

2. In the engine core this is achieved with triggers, but that's not really useful if you want to do gui stuff. On the python side there's no general mechanism, so ifdefing is the way to go. Or if you make enough changes to the file, it can be copied, stripped of useless code and used as an override (things in game specific folders override shared/).

3. These colors are computed from the color stats of the actor. See IE_METAL_COLOR - IE_HAIR_COLOR.

4. Are you working from within the demo or with new files only? The first guess is that the string is missing from dialog.tlk.

[Shekn]

1. ToggleGUIHidden() works. But I do not fully understand why it works. As I understand, this command makes the whole UI invisible. But I need to hide only message window and leave other buttons visible. Yes, this command will only hide the message window and leave all buttons visible. Why is this? This command does not get any reference to the window to hide.

3. I test several values of the character colours and the colour of the name in the message window changes. But how can I calculate the result colour from 7 character colours? And where are the actual colours listed? For example, what is the Metal colour = 0?

4. I am trying to recreate the UI from scratch and try to use as few files from the demo as possible. For testing purposes I am using dialogue.tlk from the demo. It contains the words PAUSED (ref=79) and UNPAUSED (ref=80).

[lynx]

1. GemRB.SetTimedEvent (lambda: GemRB.GetView ("MSGWIN").SetVisible(False), 1)

This delay works in iwd2, didn't bother digging for the real cause.

3. In the originals, one could set the major and minor color via the inventory gui, skin, hair, maybe more during character generation. The rest were set by item effects. The values are  palettes numbers https://gibberlings3.github.io/iesdp/appendices/colourgradients.htm, so not that simple to reverse engineer if you want to be able to specify a specific final color. The originals used a hardcoded list. It would be simple to add another field to Actor to override the current behaviour or use a special value in one of the colors to signal a different interpretation. Looking at DisplayMessage::GetSpeakerColor I see I got it partly right, it was already somewhat changed.

4. Probably forgot to copy over demo/override/strings.2da.

 

[Shekn]

Ok, thank you very much.

I solve the hide/show window task by moving it out of the window frame (when it should be hidden) and back in (when it should be visible). Maybe it's not idiomatic, but it works.

About the colour of the character name in the message. As I understand it, this colour comes from the palete16 resource (pal16.png in the demo). It gets the line with the index defined at the main character colour, and then selects the 5th pixel in this line (with index=4). As far as I know, the first eight lines of this file can be filled with any colour. So eight pixels from the 5th column can be used for the character name.

[Shekn]

One more question. How do I set the colour of the text font? In the website there is a COLOR column in the fonts.2da file. But in the demo this file does not contain such a column. Also, as I notice from Interface::LoadFonts() method, this column is not used either. So, the question is, how can I define the colour of the normal text correctly?

And another related question: is it possible to add some kerning to the text? It's mentioned on the site that TTF fonts support basic kerning. How do I define it?

[lynx]

For text colors you can use tags like  

[color=%02X%02X%02X]some text[/color]

to change it at will.

Kerning works to some extent by default (I highly doubt your ttf font does not provide the data), but I don't know our font code enough. Perhaps the way we do the glyph atlas is too limiting. Anyway, this should all be ripped out at some point in favour of SDL_ttf, which would also get us a bunch of missing features. Until then, monospaced fonts work the best.

[Shekn]

I am having problems with text colours. The tags are not working for the text for the button label. I set the button label using Button.SetText("Some Text"). The color tag is interpreted as text in this case. So the button label is always drawn with white colour.

The text colour in the message area can be adjusted by calling text_area.SetColor(dict, TA_COLOR_NORMAL). But dialogue parts are always drawn with white for the NPC and blue for the player. And I would like to change these colours to something else. Is this possible?

And one more thing. The letters of the text have a small black border. It looks fine when the background of the message box is dark. But it's not OK on a light background. As I understand it, this border is created when the engine renders letter glyphs at the stage of converting ttf to bam fonts. Is it possible to make my custom bam font? If so, how can I do it?

[lynx]

For buttons you can use SetColor, just like with textareas. I suspect you might see the same problems, since you can only specify the foreground color. The background one is currently hardcoded to black just before drawing. I'll go change that.

Yes, copy gemrb/unhardcoded/shared/colors.2da to your data path and edit it as you will.

Custom bam fonts are easy, it's one letter per cycle. If you have any of the original games, you can just open one up for inspection, so you know what goes where (eg. normal.bam).

[Shekn]

I notice the following. The background colour only works with bam-font. With ttf-font I can set the main text colour, but the background is always black. With bam-font the main and background colours work correctly.

Also, bam-fonts only works with bam v1. When I save bam v2, the engine crashes. V1 clamps the alpha and the resulting glyphs are not correct.

[lynx]

Yeah, said as much in the commit message:

Quote

 

works for bam fonts with the BACKGRND value set

doesn't work in the demo, since we don't pass this background flag to ttf
fonts. If you do that, you hit the odd composing we do in Font, so the
bg color usually outmatches the fg. If you skip that for non-default colors,
so only the fg is used, it stops affecting everyone, but you can still see a
slight border on bigger font sizes. So not much to gain.

 

Haven't tried with v2, so a crash is not unexpected. Can you share such a font bam for testing?

[Shekn]

Here is an example.

bgnormal.zip

I simply get normal font from BG2 and save it as bamV2 in Near Infinity.

[lynx]

That looks nasty, I'll ask Marcel who knows more about graphics.

[lynx]

Ok, that's now fixed. Using a background color, however, doesn't really work and color tags will show the same problem. With BAMv2 you can just prepare the images upfront, better, anyway, but that can only take care of the first problem. Clearly we have more work to do for this to be useful. Now you can safely test partial transparency.

[Shekn]

Great. I see that the bamV2-font looks antialiased, but the colour is always black. Here is a screen from my UI

Is it possible to create a bamV1-font with antialiasing? Like the original BG2 font. Maybe you know how to set pixel transparency and save it in bamV1?