Adding images to your passages
It’s pretty easy to add images into your game. They can be used to enhance locations and stories or you can use them as image links. So clicking on the image would take you to another passage.
If you already have the images stored online then you’ll just need their URL.
If you’ve got them on disk then we should get them stored online somewhere. There are many options for this – but I like the ease of http://imgur.com. You can just drag & drop the files to the website without even needing to make an online account.
After a minute or two you should have all your files uploaded:
You’ll want to make a note of the Direct Link. In the case of my upload it is:
http://i.imgur.com/az7ytsj.jpg
To simply add the picture to a passage. Use the img command:
<img src="http://i.imgur.com/az7ytsj.jpg">
You can optionally add a width and height parameter.
<img src="http://i.imgur.com/az7ytsj.jpg"; width="100" height="100">
You can also make images into links using the square brackets:
[[<img src="http://i.imgur.com/az7ytsj.jpg">|entrance hall]]
Note that the format is: [[ image to display | passage to link to ]]
It’s possible to use this format when you want to display to the user different text from the passage that you link to. This means we can jump to the same passage from different displayed links.
Hide the back button:
You may have noticed that every page has a back button.
This feature might allow a player to break your game. Fortunately, it is very simply to remove this.
You need to paste this code into the CSS window – which you can access from the menu on the bottom-left of the screen:
tw-sidebar {<br /> display: none;<br /> }
Adding background music
Music is not hugely well supported in the online version of Twine. There is a way of adding individual music tracks to each passage using the audio tag.
<audio src="https://incompetech.com/music/royalty-free/mp3-royaltyfree/Danse%20Macabre.mp3" autoplay>
The problem with this method is that the music restarts every time you start a new passage. A simpler option exists which allows you to play a single track on loop throughout the entire game. This code gets added to the ‘Edit Story Javascript’ section.
var audio = document.createElement("audio");</p>
audio.src = "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Danse%20Macabre.mp3";
audio.loop = true;
audio.play();
An added problem is that you’ll need to obtain some royalty free music and find somewhere to host it online. Unfortunately, there is no imgur equivalent for music. Probably the best option is to store it on your own dropbox and access it from there.
The links I’m using are off a fantastic website called incomptech.com where musician Kevin MacLeod has hundreds of royalty free tracks that you can use.
You can access the songs section of the incompetech website here: