TwineGang is a server and client for cross-browser, cross-device Twine game control and synchronization. When two or more Twine games are synchronized, taking a link to a new passage in any of them will advance all other games to the same place. Plays nice with Heroku app hosting.
Originally developed for use in the Global Game Jam 2014 entry, "Get a Clue" (play, source).
- Demonstrate a game on a projector while controlling it with your phone.
- Hand a synchronized tablet to an audience member to allow them to play publicly.
- Play a Twine game collaboratively with a friend.
- Tear-off UI: add a QR code with the room URL to your Start passage. When another client joins, stop displaying passage text in the first browser and instead display full-screen images/video/Flash/Unity.
- Hosting platform that supports websockets (like Heroku or Nodejitsu)
- Browser with websocket support
- Install node modules with
npm install. - Build your Twine story to
index.htmlin this project's root next totg_server.js. - Start the server with
node tg_server.js. - Visit
http://localhost:3000. The URL to "join" that play session will be printed to the console (in the formhttp://localhost:3000/?room_name=867-5309).
Make sure your Twine HTML file loads the libraries TwineGang needs (after jQuery):
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/client/microevent.js"></script>
<script type="text/javascript" src="/client/tg_client.js"></script>
<script type="text/javascript" src="/client/twine_bindings.js"></script>You may add additional scripts and assets in the assets/ directory.
In your Twine story, at a minimum, you'll need to add a passage tagged 'script':
// requires jQuery
// ^^^ makes sure jQuery is included on the page. If you've enabled jQuery in
// your StorySettings passage, you may remove this line.
// Broadcast arrival at a new passage to other clients.
prerender.twineGang = function(div) {
if (typeof TwineGang !== 'undefined' && TwineGang) {
var passageName = this.title;
TwineGang.arrive(passageName);
}
};When each passage is rendered, this code will tell the server. The server will tell all the clients in the same "room" on the server to visit that passage.
You may attach your own event handlers to TwineGang events with TwineGang.bind:
TwineGang.bind('clientCount', function(count) {
$('#player-count').text(count);
});See tg_client.js for available events.
- Install Heroku Toolbelt.
heroku auth:loginheroku apps:create <appname>heroku git:clone <appname> && cd <appname>heroku labs:enable websockets- Copy your prepared Twine index.html (see Usage) to the newly-cloned app repository folder.
git add index.html && git commit -m 'Adds my story.'git push heroku master- Visit
http://<appname>.herokuapp.com.
- Add a generic message passing function and corresponding Twine macro for custom events.
- Support synchronizing more game state, like variables.
Thanks to Jerome Etienne for the MicroEvent library.