• Register
Post news RSS Dev Diary #11 - User Interface

As we continue developing Shuyan, an action graphic novel, we'll keep you updated through devlogs on the progress. This week we have some updates on the user interface.

Posted by on

The UI is a big thing we've been trying to get right. The idea we're going for is to make it as simple as possible, make it as easy to use as possible, and still try to keep it in-line with the overall style. We've changed it around a few times now, and I think we're getting it to where we'd like it. Here's where it currently stands:

For the narrative scenes, we want to keep the focus as much as possible on the action. We want Shuyan to play out like a good movie, so we've gone with almost no UI, with the exception of the pause button.


NarrativeSceneUI 1

When reader choice comes into the narrative scenes, we want it to be as seamless as possible, and so the only UI items we add on these are the dialogue/action choices.

ChoiceUI 1

Combat, of course, changes things around, and we have a different UI for Arena mode and our Focus mode of combat.

With the Arena combat scenes, basically it's just the health bar, the block icon in the lower-left, and two bars on the lower right that charge with blocks and attacks, which can be used for special attacks when fully charged, (and of course the translucent pause button in the upper right).

ArenaUI 2

For the style parts, we include the martial arts school icon next to the health bar (Shuyan is part of the Phoenix school), and some simple designs around the block and charge-attack bars. Keep in mind, the interface I'm showing right now is for mobile, and we may change some of these with the ports (ie, a pause icon may not be necessary on PC, and the shield may or may not be necessary for blocking).

ArenaUI 1

In focus combat mode, the only constant icons are the power bars (and the martial arts school icons next to them). But during combat, players will get alerts on combos, special moves, blocks, greets, and occasional move sequences that play out like quick-time events. The challenge with all these, of course, is making them as seamless and as unobtrusive as possible, while still keeping them useful.

So here, for example, Shuyan just did a basic three-hit combo, so she gets the three arrows between the health bars (arrows up, showing "high" attacks), and an alert to the left saying "3 Hits":

FocusUI 1

The ability unlock screens are fairly simple (we made these sometimes pop up in-game after Shuyan learns a new move). You get an alert when a move is unlocked, which just has a simple stylized border and a bit about the move. These then get added to the moves menu, where readers can see and unlock new moves.

AbilityGainedUI 1


Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.