UI Design of Zifmia Branching/Turn Feature

[DavidC]

So I’m relatively close to getting a new website for Textfyre out…it will not be a corporate site but a game portal. Currently you can play a game from front to back, but I don’t have the save/restore mechanism implemented yet and that’s what I’m working on. This is strictly a design issue as the functionality is there and working.

When playing through the new portal, the server will store the results of every turn (in fact, I store a serialized version of the game engine, not a save game file).

For a given game session, this will mean that the player can go back and forth without any concern for undo, save, or restore. The UI will simply remember every turn regardless of the player’s intentions.

So let’s walk through this process…

Player starts game. Plays for 20 turns. They go back to turn 5 and enter a different command than on the original turn 5. This is a new branch. The player plays until turn 47. They go back to turn 25 and enter a new command. This is branch 3. If the player goes “back” to a turn prior to the beginning of a branch, they will automatically go back to the parent branch. If they enter a command at a branch or node that already exists, the server is smart enough to simply “place them” on that node.

Got it? good…

---

Now how do I display this capability to the player? I’ve been thinking about menus, tree controls, accordion controls, horizontal scrolling lists for turn numbers, mouse based controls, keyboard based controls, etc.

I think it’s safe to assume that the Page Up key will display the previous turn/node. Page Down, if available, will display the next turn/node in the current branch. If there’s a branch at the current turn/node, hitting Page Down will ask which branch you want to traverse, even allowing you to hit 1, 2, 3, etc on a branch turn/node.

There can be an “always on” control or a button to a modal ajax window that displays a control. But what sort of control?

The goal is to make this simple, intuitive, and informative.

Thoughts?

David C.

[matt_weiner (matt w)]

Spitballing, but maybe the archive page of Epicsplosion might be a model? This is a CYOA comic (which is being updated as it goes along), which tends to have long strings of panels between branch points; which will probably be even more true of your branching structure. You can look at any page in its context, and fold and unfold branches to hide and reveal them. Looks like it might be the sort of thing you’re looking for, though it might be hells of difficult to generate on the fly.

(There was some discussion about how the webmaster for the Epicsplosion site was having financial trouble a little while back, so if you want him to help you out with his code you’d probably have to pay him. OTOH, if you’re willing to pay him I expect he’d probably help you out with his code.)

[tove]

Strictly off the top of my head, I think a simple graphical tree view, like I7’s “skein view”, is most intuitive, but having the whole thing visible at all times would probably be distracting. So instead, I’m picturing a skein that only shows the currently-active command history, with a visual indication (different color? plus-sign?) of where the branches came off, that the player can expand. I’d definitely want to be able to click it (and in clicky-mode, I want hovering over a branch point to expand that branch temporarily), but I like the arrow key navigation as well.

[DavidC]

@tove

Strictly off the top of my head, I think a simple graphical tree view, like I7’s “skein view”, is most intuitive, but having the whole thing visible at all times would probably be distracting. So instead, I’m picturing a skein that only shows the currently-active command history, with a visual indication (different color? plus-sign?) of where the branches came off, that the player can expand. I’d definitely want to be able to click it (and in clicky-mode, I want hovering over a branch point to expand that branch temporarily), but I like the arrow key navigation as well.

I’m circling back to this…

I think the I7 skein is the right way to go, but I would probably have the entire tree visible. I would balance that out by having each node be a simple icon. Mouse overs would produce a balloon of the basic info for that node, such as room, turn, score, but also have a button to show extended info like inventory.

I would still enable page up/down buttons for following the current branch back and forth, but the tree seems like the best method.

Now…what sort of browser tech can I use to make this happen…the skein is written in C for each platform.

Does anyone know how I could (easily) implement a tree of nodes similar to the skein using html that can tie DOM events for mouseovers and clicks?

David C.

[Erik_Temple]

Maybe swipe some code from one of these?

jsplumb.org/jquery/flowchartConnectorsDemo.html
dl.dropbox.com/u/4151695/html/jO … ample.html

[George]

I’m pretty clueless in this area, but is relying on mouseovers a good idea if people might be using touch screens?

[DavidC]

I found a developer to help me with this…we’re still in the first of several iterations:

meltedlibrary.com/derek/davidc/2 … ndex2.html

I think collapsing ranges of turns will be optimal for visualization. Making it iPad friendly is a big feature. Better zoom and pan capabilities are in the works.

David C.