NPC dialogue box mockups — a wide bottom window with a name tab
I made two mockups moving every current dialogue feature, from the talk prompt to lines and choices, into the new skin, and picked the wide bottom window + name tab (option 1). This is also when I decided small screens would get a window-style feel.
For the shop I picked option 1, full screen, in 163. Personally I like the window style more, but thinking about future expansion, full screen seemed better. Small screens that won't need to expand (dialogue box, tooltips, notifications) will get a window-style feel instead.
The current dialogue box has a name, the line, a next prompt, a close X, choice buttons, the "[F] Talk" prompt near NPCs, and the portrait in the combat dialogue box. In this mockup I moved all of that into the new skin.
Screens I built
I went with option 1. A name tab hangs over the top-left corner of a 1400-wide window at the bottom (with a blue line under it), and the bottom right shows 2/4 and F Next ▼.
The line is the 2nd of 4 from Noel the merchant, taken as is: "The fruit on display was picked just this morning." The background is Noel's stall too.
Choices appear as 3 buttons above the window on the right, and you pick with the 1, 2 and 3 keys. The selected button glows blue. The choice text comes from Luka the merchant's dialogue (Buy / Sell / Leave), but I only swapped the text, so the character in the picture is still Noel.
Both options put a small "[F] Talk" plate (with a little pointer at the bottom) under the name above the NPC's head.
Option 2 puts the name and close X on a black band at the top of an 1100-wide window in the center, and the choices open as a list inside the window, which grows upward. I kept it.
Next up
- Draw the combat dialogue box with the portrait along with the combat UI mockups
- Apply once every mockup is final