Trying to get some work done on some Tako mocks while I’ve got Caeli asleep in the Ergo!
Main Menu
I’m not sure about the little frill thing on the righthand side of the highlighted button. I imagine it as animating across the button, but I’m not sold on it. I will likely just not have that at all… But I’ll have to wait and see, once things are ingame.
The button size here is 128×16. The idea is to scale up the UI elements to 2x or 3x, and scale the gameplay window to fit the screen as needed. It’s important to have the UI readable, and it was my experience with Unagi (another project I have on the backburner) that scaling up the UI such that the 240-pixel-tall viewport fit the screen rendered the 5-point font I was using really hard to read.
I’m also avoiding drop shadows for the time being for the same reason — they take away from the font’s legibility.
Anywho, I picture the background for the main menu being a randomly-generated world scrolling slowly. With any luck, it’ll give the screen some flare without going too overboard.
Hmm… Come to think of it, I’m doing these mocks at 240px. I should be doing them bigger, if I’m doing the whole 200% scale thing rather than scale-to-fit. I’ll size the mocks to a 1440×900 screen, which means they should be 720×450. And actually, I think I’ll go for 300% instead of 200%, which makes the screens 480×300. Also, to account for 4:3 monitors, all of the UI layouts should fit within 400px across.
Codex
Here’s the first-pass at the Codex screen, with both a light- and dark-colored panel.
I want some way of signifying rarity throughout the game for various things like Races, Classes and Artifacts. I’m not totally sold on doing it like this… I’m thinking perhaps something more like Spiral Knights’ star rating system, where everything gets a rarity rating from one to five stars. Since the stuff that’s available in a campaign is randomized, but based on the ‘power level’ of the player’s avatar (ie: allow the player to unlock more exciting stuff by playing with more exciting stuff), I need a way to do so that’s clear, but not overly cumbersome in terms of UI. Colored rarity is fine at a glance for someone who’s used to the system, but for those who aren’t it’s a pretty big mystery. Star-ratings, on the other hand, are pretty straightforward no matter what.
Very very quick sketch…
I’m finding it extremely useful doing these mocks, though. I reckon I’ll probably revisit my task sheet once I get these done, and make sure I’ve captured everything I need to capture. Scroll bars, for example… I don’t think they’re on there. 🙂