So you can create an HTML-based 'Choose your own adventure' game using the Twine 2 editor




Many of you will remember and you will have read / played the book collection 'Choose your own adventure', which in the 70s inaugurated what we call 'interactive fiction': books in which were your own decisions as a reader ("If you knock on the door, go to page 100, if you run, go to page 105") those that determined the evolution of their plots.



The commercial glory days for these books are years past, in part because of competition from video games, which offered an even more interactive and immersive form of interactive fiction. However, there is a hybrid format between the two: interactive video games based on (hyper) text, which replace the "go to page X" for a mouse click.



I present to you Twine 2



The good news is that, compared to more 'traditional' video games, this format is much easier to program if we use the right tools. In this case, we are going to take an introductory look at the most popular of them, Twine 2, an interactive fiction open source editor that generates games based on HTML5, CSS and JavaScript and is available for Windows, Linux and Mac OS X… And it is also available in a 100% online version.



We, however, are going to install it from said website (the installation process has no mystery); once we start it, we will be in front of a window like this:




Twine2




To start our first interactive story, all you have to do is click on the green button named 'History'. A dialog box will appear for us to indicate how we will name this story: after writing the name, we just have to click on 'Add'.




Twine2 3




That will place us before a screen in which each box is a scenethat — once we add more — it appears linked with others according to the structure of the possible 'reading paths'.




Twine2 6




If we double click on the first scene, we can edit its title and content. We will write our first scene (it can be as short or long as you deem appropriate), and we will include, somewhere in the text 'hyperlinks' to one or more new scenes, which will be created automatically once we close the editing window:




Editing




To create the hyperlinks, just use the editor at the top of the window, selecting the text and clicking on the 'Link' button. If we specify a 'Passage name', we can establish a specific name for the new scene, which will be very useful once we start accumulating scenes in the editor.



And, of course, by clicking on the 'Play' button from the main window, we can go viewing in our browser how is the game doing:





Nobel


Viewing the first scene. No, literary talent is not included with the software, how have you noticed?









In the beginning it was the conversational adventure








The options that the editor gives us



A review of the editor shows us the options that exist for format to the text (bold, italic, titles, lists, text color and background) ... but we can also use more complex forms of customize what is displayed to the user by editing the game's CSS and JavaScript. Ah: it is also possible insert images, video and audio inserting HTML tags.



With a little skill, we can have something as attractive as this:





Gi2lj


Screenshot of 'Shadows of Huntshire', available at Itch.io.



Besides that, we can see that the editor also allows us use macros, variables, random number generator, conditional commands, etc. Thus, it is possible to resort to methods more typical of role-playing games (such as dice rolls) or to make a past choice of the player affect another scene by resorting to variables (such as' If he touched the Cursed Gem, subtract 20 points of life when I enter the Temple of Evil ').



Knowing that (don't worry, there are multiple tutorials available on the Internet), we just have to keep adding scenes until we complete the plot (s) of our adventure and lead the user to the 'END'. Once done we can publish our game as HTML... or use a third-party tool to generate an executable file:




To post