Dialog Mockups

Sometimes I can't decide on a damn thing.  Well, at least when it comes to tweaking the finer details.  These mockups show my decisions on how to create menus over time.

To your left is a very recent mockup.  There are more interesting screens after the cut.

( Read More )





Screenshots:

This was one of the earlier mockups made for FaeSaga.  The first one was acually box C at the bottom, with the second being box B and finally, coming to box A.  I quickly realized that a lot of these layouts didn't look as good as the others, so at the time I made this 3-up, I had decided on box A (the top box).  Various bitmap fonts were employed for these boxes, and right now, they're all expressed as styles over a shape layer, which when I've finally decided on a final design for the boxes, I will write a pixel shader for.  (Or possibly just write a 9-patch loader of some kind as a compromise...)

You may have noticed if you looked closely that box A has a subtle halftone applied.  These are to give the reminiscent impression of scanlines, while still "modernizing" the window.  I carried this concept over to future menu designs, although I still haven't decided on the ultimate opacity of the backdrop...

This mockup was done today, after thinking again about changing the design.  Once again, I can't really decide how I want to consistently display windows, which is why the "indicator" in the upper-left corner of the menus appears to have a different size (and a different font).  I can't really decide on the opacity level on the tab itself, either.  Having a pure white tab inset into the window is actually very distracting and hard to read, which is why I originally messed around with the font color, insetting the font, and the tab's opacity.  I hope I can settle on a reasonable comprimise, as I want the tabs to represent either the current menu name, or the name of the person talking.

At the resolution we're making the game (1024x768), some of these bitmap fonts don't look so good, so again as a compromise, I figured a 12px bitmap font for the tab would work for the majority of the cases.  The main font is a variable-width replica of a classic 8px computer font.

Shopkeeper placeholder graphic is probably a Akira Toriyama design (straight out of the Google, sorry!);  seems a bit ironically appropriate considering what series this menu style is most associated with :)

Please Share

Tweet