Village HUD and loading mockups — a panel-free text HUD and a black loading screen

For the dialogue box I went with option 1 in 164. This time I drew all the small screens at once.

Right now the gold display is a brown panel with a gold border in the top right. NPC name tags are 22px text in a single color, #FFF7DB (the same for all 12 NPCs), and only show within 6 m. The save notification is a small notice at the top center, and F5/F9 only work in development builds. Scene transitions are just a black fade with no loading indicator. Coming out of an interior takes 0.35 s, and the first village load takes about 4 s.

Screens I built

For the HUD I went with B, text style. It uses shadowed text with no panels. The gold display gets a dark band that fades out from the right and a blue underline, name tags get shadowed text with a blue underline, and the save notification gets a band that's dark in the middle and fades out to both sides, with blue lines above and below.

The background is a screenshot of the plaza. The old gold display and name tags that were in it got painted over with the surrounding background.

A, the panel style, uses the same charcoal panel and metal double line as the windows. Its save notification has a blue check and an F5 label. I kept it. At first I wrote down A as the final pick by mistake, and corrected it to B in 171.

For loading I went with A. "Loading" in the bottom right of a black screen, with 3 diamonds that light up blue one by one.

Loading B has a place name card in the middle of a deep navy screen, with "Entering…" and a blue progress bar below it. There's no place name data yet, so "Adventurers' Guild" was just example text. I kept this one too.

Things I thought about

• Loading A. It doesn't feel awkward even on a short 0.35 s transition.
• Dropping the item tooltip. Right now the tooltip is only used when you hover in the shop. Both inventory option 1 and shop option 1, which I picked, have an info panel on the right, so it's not needed. I didn't even draw a mockup for it and decided to cut it.

Next up

• Remove the item tooltip and the shop hover hookup when applying