Matthias Andrasch's Blog

Web Development, Green Web & Climate Justice 💻 🌳

ELA: Twine text adventure with HTML5-video

Eine Frau liegt an Kabeln angeschlossen in einem Tank

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PGlmcmFtZSB0aXRsZT0iRUxBOiBUd2luZSBUZXh0YWR2ZW50dXJlIG1pdCBIVE1MNS12aWRlby9hdWRpbyB1bmQgQ3JlYXRpdmUgQ29tbW9ucyBJbmhhbHRlbiAoVGVhc2VyKSIgd2lkdGg9IjUwMCIgaGVpZ2h0PSIyODEiIHNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQva25MM0hJZ0lZbjg/ZmVhdHVyZT1vZW1iZWQiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

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)

ELA can be downloaded and played locally in the Mozilla Firefox Browser. Chrome and other browsers might have issues.

  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

Background

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

Making of – macros
Twine storymap der Geschichte ELA mit den vielen einzelnen Feldern

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.

License


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.

Sources: videos

Sources: music

Sources: sound effects

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