Vodacom Now!
24th Sep 19


How to add music and colour to your Twine game

24th Sep 19

Drew Hook
By Drew Hook134 Followers

In our previous article, we went over the basics of creating a playable text-based game using Twine, a free, web-based programme for aspiring game developers. Now that we have the fundamentals under our belt, it's time to take a look at how to personalise your game with your own sounds, colours and images. 

Adding an Image

Nothing helps build a mood or create a sense of place than some evocative imagery. So you no doubt will want to include some images in your twine game, to help set the mood. You can either create your own illustration and upload it to the web, or use an existing image (with the owner's permission of course). Once you know what your image's URL is, having it display in your story is as simple as entering the correct HTML code to show up:

<img src="the URL of your image" width="500" height="300" alt="Two foxes">

The width and height part of the code control the size of your image on the page. If you leave them off, then it will display the image in the dimensions as you saved it.

Adding a Video

Instead of an image you may want to include some sort of motion video. The code to enter for a video is similar to what you use for an image:

<video src="the URL of your video" width="640" height="480">

There are a lot more options for customizing how your video appears – try this HTMl5Rocks article for details.

If you'd like to embed a video from a service like YouTube or Vimeo, check the page for an option to embed it. See YouTube's help and Vimeo's help for specific instructions on how to get the embed code and customize it. Once you have that code, enter it as-is into your passage to have it display.

Adding Sound Effects and Music

Writing a story about a haunted house? Why not add some sound effects of footsteps from above or some creaking floorboards? The code to add a basic sound effect looks like this:

<audio src="the URL of your sound effect" autoplay>

The autoplay attribute causes it to play as soon as the passage it is in is displayed.

That said, SugarCube has features that make using audio much simpler, and also allow for music. If you use the code above, you'll find that any music ends as soon as the reader navigates to another passage, which is probably not what you'd like to have happen. There are two steps to using audio in SugarCube. First, you'll need to cache it. Caching it allows the browser to load your audio ahead of time, so that there isn't a delay when you ask it to be played. It also allows you to give each sound effect or piece of music a short name to make

<<cacheaudio "door-opens" "the URL of your sound effect">>

The best place to cache audio is right at the start of your story. On a later passage, playing a sound effect is as simple as writing:

<<audio "door-opens">>

There are many other options that let you fade in and out sounds, play multiple at the same time, and even move to another passage when a sound effect finishes. For more information, see the Audio section of the SugarCube macro documentation.

External Resources

  • DJ White created a library called Twine Audio for incorporating narration into Twine stories. It only works on Chrome and Opera browsers, however. The original web site twineaudio dot com seems to currently point to spam sites.

  • Dan Cox has published a tutorial video on adding images with the SugarCube story format.

Suggested Posts

How is Vodacom affected by load shedding?

How is Vodacom affected by load shedding?

Vodacom | 8th Dec 19

View more
Have you ever wondered how load shedding affects the Vodacom network and how this may impact you? Here's everything you need to know. 
Vodacom 1652 Followers
Apps to improve your lunch break

Apps to improve your lunch break

Megan Ellis | 4th Dec 19

View more
Whether you prefer to order in, eat out or bring food from home, these apps will help you make the most of your lunch break.
Megan Ellis
Megan Ellis58 Followers
Festive season in your 'hood

Festive season in your 'hood

Biddi Rorke | 28th Nov 19

View more
Not travelling for the holidays? No problem. Make the most of your city staycation with these foolproof ideas.
Biddi Rorke
Biddi Rorke21 Followers
Vodacom 2019. All rights reserved