Common UI Designs
Many interactive fiction, dating simulator, and visual novel games share common user interface designs. Understanding these can help in creating an experience for a player that draws on their existing knowledge of how "to play" for a new game or story.
[[Dialogue wheel]]
[[Choice Prompt]]
[[Limited-time Responses]]Using Harlowe 2.0 alignment markers, we can create the same general user interface of a "dialogue wheel" found in many BioWare games. (In //Mass Effect: Andromeda// (2017), for example, the four choices of "tone" are Emotional, Logical, Casual, and Professional.)
|=
Upper left
=|
Upper right
|==|
|=
Bottom left
=|
Bottom right
|==|
Using HTML tables and a little CSS, we also also re-create it the same way.
<table>
<tr>
<td>Upper left</td>
<td>Upper Right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom Right</td>
</tr>
</table>
A common user inferface design found in visual novel games made with the <a href="https://www.renpy.org/">Ren'Py engine</a> is a 'choice prompt' (called "menu" in Ren'Py) where the player is given a set of choices.
Using a modal (and some CSS to style it), the same effect can be generated to give the player choices without leaving the passage.
{[
<div class="modal">
<div class="modal-content">
(link: "Choice 1")[ (replace: ?modal)[] ]<br>
(link: "Choice 2")[ (replace: ?modal)[] ]<br>
(link: "Choice 3")[ (replace: ?modal)[] ]<br>
</div>
</div>
](modal|}
(link-repeat:"Make a choice!")[(show:?modal)]Games like //The Walking Dead// series by Telltale and <a href="http://auntiepixelante.com/endoftheworld/">//Queers in Love at the End of the World//</a> (2013) by Anna Anthropy use limited-time responses to great effect. In a short amount of time, usually a few seconds, the player must make a choice from among those given to her.
{(set: $timer to 5)}
[
(link: "Choice 1")[ (replace: ?limited)[] ]
(link: "Choice 2")[ (replace: ?limited)[] ]
(link: "Choice 3")[ (replace: ?limited)[] ]
]<limited|
{
(live: 5s)[
(set: $timer to it - 1)
(if: $timer is 0)[
(stop:)
(replace: ?limited)[]
Out of time!
] (else:) [
You have $timer seconds remaining...
]
]
}