Building the game menu frame that opens with I (GUI integration step 1)
Built the game menu frame that opens with the I key in the new skin, and locked movement, attacks, dialogue and the camera while it's open. It's the first of nine steps for applying the final mockups, and I fixed the HUD showing up in the blurred background.
From the GUI mockups I finalized the day before, I decided to start by moving the ones I could apply right away into the actual game. I left out the save/load, quest and combat mockups this time. But the game didn't even have a way to open a menu yet, so I had to build that first.
Instead of doing it all at once, I split it into nine steps and decided to check the result after each one before moving on. Step 1 covers the menu frame that will hold every tab, opening and closing it, and locking input.
Screens I built
The menu frame is made up of side tabs, the money display, a close button (X), key hints and a blurred background. I also built a shared toolkit for putting together windows, tabs, buttons, section bands and key hints. The next steps will reuse it.
Of the tabs, Quests, Save and Load aren't part of this round, so they're grayed out and locked. You can't click them, and Q/E skips right over them. The rest of the tabs are still empty windows with just a title and a "Coming in step N" note.
Controls: I to open (always starting on the character tab, and closing the menu if it's already open), Q/E for the previous/next tab (wrapping around at the ends), Esc or X to close, and clicking a tab.
For the blurred background, it grabs the screen at the moment the menu opens, halves it four times, scales it back up twice to blur it, and lays a dark overlay on top. The canvas reference is 1920×1080, and the skin parts are made at 2x size, so they stay sharp even at 4K.
This capture is from before the fix, so the blurred money HUD shows through the background in the top right (see the rabbit hole below).
I ran through I → character tab → E to cycle through equipment, items, skills, settings and character (skipping locked tabs) → Q in reverse → Esc to close, and the input lock set on opening was released properly on closing.
Things I thought about
- The game keeps running; only input is locked. The game doesn't pause while the menu is open. Instead, movement, click-to-move, attacks and NPC dialogue are locked the same way the shop does it, and right-click camera rotation and wheel zoom are blocked too.
- Deciding when it can't open. It won't open during dialogue, the shop, the opening or a scene transition, or in scenes without a player (combat). It closes on its own when a scene transition starts or when you load with F9.
- Handing the I key over to the menu. I used to open the small inventory window in the top right (step 29). Now the menu takes it, so the small window won't open until it's replaced in step 4 (the item tab). Until then, the only place to see your items is the shop's sell tab.
Rabbit hole: the HUD got captured in the blurred background
When I opened the menu, the money HUD in the top right got baked right into the blurred background. Since it grabs the screen at the moment the menu opens, whatever UI was up at that time got captured too.
I fixed it by turning off other screen UI like the HUD and NPC name tags for just the one frame where the background is captured, then turning it back on afterward. I also checked that all the other UI comes back on after the capture.
Next up
- Steps 2–9: character, equipment, item, skill and settings tabs, the shop, the dialogue box, the village HUD and loading
- The small inventory window stays unavailable until step 4 (the item tab)