Advanced graphics for Inform 7

I have put up a second version of the hyperlink-based demo, responding to Jon Ingold’s suggestion (here). This version streamlines the input model so that only clicking on a button will issue a command. Clicking on a link no longer automatically issues the examine command; instead, it merely brings focus to the object clicked. There is now an button for examining in the object-focus window, which is how we issue the examine command.

Try the second version.

Update: A third version, implementing Jon Ingold’s suggestion that links not show until hovered over, as well as putting the description for objects in the focus window. The latter is actually my original implementation (rejected pre-release); it both presents the object description w/o the need for an additional mouse-click, and avoids the visual confusion of updating two windows at once.

I don’t feel that showing links only on hover works very well, at least when they “light up” individually: it’s pretty annoying to hunt and peck links in this way. It might work better if hovering anywhere on a paragraph showed all of the links in that paragraph. Unfortunately, the latter can’t be done with CSS, so I won’t be mocking it up here. (Hovering doesn’t work in a touch interface, so it doesn’t really fit the goals of this experiment as I originally defined them in any case.)

Try version 3.


Comments on: "Sand-Dancer Sans Keyboard: Take Two" (16)

  1. That definitely worked better for me; the extra step wasn’t a problem at all.

  2. veryalien said:

    If I’d actually commented on the second version, instead of under the first post, it might have been more accurate!

    As I said (unfortunately below for the first version), very nice, very good and looking forward to the final release!

  3. This version is great. But try one more version without a sidepane? Just highlight the selected phrase and drop the verbs into the transcript. When focus changes or an action is selected, hide the (old) verbs.

  4. In version 3, running Safari, I got some errors when clicking the (two!) Crumbling Concrete buttons from inside the building. Clicking the leftmost button I got something like “window 28 is requesting input of type 1”; clicking the rightmost button I got “Quixe run: TypeError: ‘null’ is not an object ‘null’ is not an object TypeError”. These show up in the top window, where the room name is supposed to go.

    I also found myself clicking on direction names in the transcript, even though they weren’t highlighting. Maybe automatically turning directions into “go” links would be useful? You can’t always go in a direction just because it’s in the transcript, but often you want to.

    I also had some trouble in the mostly dark room, partly because I found myself unable to guess the verbs — I felt the wall and floor, and then the duct tape and hole showed up in the side pane even though I hadn’t seen them in the transcript. What was supposed to happen there? (This may not be the UI’s fault, except in that it’s revealing objects before the game does.)

    • There are two Crumbling Concrete buttons because Sand-Dancer maps multiple directions to the same room on occasion. An acceptable shortcut when there’s no exit lister, but it leads to odd behavior when there is one. I could have avoided this by just using directions in the buttons, but I thought it was more important to show the possibilities than to avoid the awkwardness.

      I couldn’t reproduce the Safari error you mentioned in Firefox, but version 3 wasn’t tested at all before posting, so it’s definitely possible that I left out some kind of check. (Can’t think what it would be off-hand, but that doesn’t mean much!)

      I made a decision early on that links in the transcript should do one thing and one thing only–move focus to objects. I diluted this later with auto-examine (which remains a controversial question!), but I’d rather not dilute it further. Also, some are already complaining that there are too many links in the transcript; adding more (and in different colors) probably won’t help rectify that complaint. In any case, I suspect that the desire to click on directions in the transcript would probably disappear when using a touch interface–the buttons at the bottom are more convenient if you aren’t already pixel-hunting for highlighted words, which you wouldn’t be doing anyway if hover isn’t in the picture.

      I didn’t even think of trying to feel the floor (the author’s solution here is to flick the lighter in your inventory to reveal the desk). When you type “feel the floor”, the “hole in the floor” object is the actual target of your action; there is no floor object. For some reason I haven’t investigated, the way that Aaron blocked the examine action for the hole isn’t being triggered by the auto-examine action in the focus window.

      • Ah, the lighter! I was kind of thrown by the auto-examine, and also by the way the room description seemed to suggest I should feel stuff. And by not being too familiar with lighters. (“Feel floor” is just getting “no surprises,” though I guess that’s the default response to “feel” — in this case, the hole in the floor.) I’m still not sure how to find the whole again, especially because I just seemed to crash it again — I’ll e-mail you the transcript.

        The two directions thing makes sense; maybe you could put an abbreviated direction in the button with the room name? Something like “se: Crumbling Concrete.” In a game like Escape from Santaland it would be helpful to know which way you were going as well as which room you were going to.

        A lot of my complaints probably aren’t helpful for touch-screen interfaces anyway. One of my complaints about having to move the cursor to different parts of the screen is that that’s annoying on my touchpad, but that’s not a problem on the touchscreen. The issue with having to look at different parts of the screen may still hold, but probably isn’t as big a deal.

  5. “It might work better if hovering anywhere on a paragraph showed all of the links in that paragraph. Unfortunately, the latter can’t be done with CSS, so I won’t be mocking it up here.”

    Sure it can, like this:

    Anyway, you’re right about the touch interface problem.

    • Ack, you’re right! Quixe’s output model is a bit more complicated than most standard pages (lots and lots of spans ), which I thought might foil that approach–but I was able to get it working easily by using the div container class (.BufferLine). And Version 3 now highlights all links in a paragraph when you hover over that paragraph, instead of requiring you to hover over a given word or phrase.


  6. Erik, did you design the CSS for the demo?

    • Yes. (I didn’t bother to try testing in IE or older versions of the big three browsers–apologies to those who like their browsers fusty!)

  7. Gary Penn said:

    Without realising exactly how this worked I found myself expecting a pop-up to appear when I hovered the mouse pointer over a highlighted element. That felt more like a natural means of examining something. Clicking on a highlighted element feels like a more physical interaction.

    • Since this example is aimed at a touch interface, I’m not really considering hover as a design option (at least not until touch screens can register a hovering finger!) However, the idea of having a pop-up menu display the commands is certainly one to consider. This recently released app brings up a modal dialog box containing possible commands when a word is tapped:

      I don’t think I like the feel of it, but possibly there are ways to implement it so that it would feel more organic. Either way, if you have an Android or iOS device, you can download it yourself and see what you think.

  8. […] is also a descendant of the hyperlink-only web interface that was elaborated in prototypes here, here, and here. I beta-tested the game and I think that, in addition to being a good game, it provides […]

  9. […] The Colder Light (online play, IFDB page) is the latest game from Jon Ingold: in this case, a spare, melancholy tale about life on the ice. It also uses an interface evolved from some work by Erik Temple (see for example Erik’s alternate interface to Sand Dancer). […]

  10. I think this looks great. The only issue I had was – in the story – throwing my lighter at the window and thus being unable to progress once I got inside the house. But the interface itself I really like. I hope it gets more use in IF in the future.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: