ELA: Twine text adventure with HTML5-video

ELA is an interactive text adventure with audio and video content. ELA was created with the free storytelling tool Twine2. Twine is available as an online editor as well as a desktop application for multiple operating systems. The tool is licensed as an open source software. ELA is licensed under a creative commons license.

The story of ELA takes place in a fictive scenario in near-future. In this future the so-called ALGOs are responsible for the administration of cities. ALGOs are the advanced development of artificial intelligence- and big data-projects, which are realized with the technology of quantum-mechanical computers. ALGOs are developed with identities and human bodies, which can move freely in the cities. They have a human-like consciousness embedded to judge on decisions and take moral and ethical perspectives into consideration. When one of the ALGOs shows malfunction and chaos ensues, the player takes over the role of an ALGO supervisor, which has to decide wheter the ALGO-unit can be repaired and put into the city again.

PLAY ELA (german)

Please note: Unfortunately there is no german translation available right now.
ELA can be downloaded and played locally in the Mozilla Firefox Browser right now. Chrome and other browsers are not fully supported right now.

  1. Download BETA-version: 480p-version (188 MB) | 720p-version (410 MB)
  2. Extract zip archive to a new folder
  3. Open folder
  4. Select file „ELA.html“ and open it with Mozilla Firefox
  5. Turn on sound for full experience

Experimental online version: PLAY
(Good internet bandwidth recommended. If the videos cannot be played, please use the download version!)

Background

The media product was made in an academic seminar at Technischen Hochschule Köln (Cologne, Germany) under the supervision of Prof. Dr. Friederike Siller.

Making of – macros

The window of the storymap of ELA in twine
ELA story map window

I made some custom macros for the storyformat Sugarcube2 to embed the video and audio files. Only html5 tags were used for that, no flash. To control the media files I used javascript (The storyformat provides jquery by default). The source code can be found here:

Additionally I added the functionality of text-to-speech via the javascript plugin mespeakJS in combination with typedJS.

You can use these macros with the command „edit javascript“ in the story menu of twine.

Lizenz


This interactive work is licensed under a Creative Commons Namensnennung – Nicht-kommerziell – Weitergabe unter gleichen Bedingungen 4.0 International (CC BY-NC-SA 4.0) license.

Verwendete Videos

Verwendete Musik

Verwendete Soundeffekte

Challenges

Media files are in a separate folder. In order to test the story I always had to use „Publish to file“, because the test/debug-mode does not provide the possibility of an external path or something to the media files.
Another challenge is the preload-property of video files. The preload process is not that easy for twine, because it is difficult to foresee which video is the next one when there are multiple decisions. There is a possibility for forcing video to preload, but I did not test it yet.

Thanks a lot!

Thanks to the twine community for providing such a great and creative tool and thanks to everybody, who provides the creative commons content which I used. And thanks to the providers of javascript libraries. Lots of digital love to all of you! 🙂
Featured image: Screenshot of Dystopia – user generated cinema, Lizenz: CC BY-NC-SA 3.0