I’m a huge fan of pictures in Twine. Sometimes even extremely simple images can add a lot to a Twine story. For example, the small square pictures in Porpentine’s Climbing 208 Feet Up the Ruin Wall are beautiful, brightly-colored little accents. But sometimes pictures can be more than accents– they help tell the story, or do the major work in setting the mood. I recently played a super-throwbacky little horror adventure called Mad Dog which used simple but evocative images to set the story in time and place.
Using pictures in Twine games is not a problem; unlike prose or poetry, hypertext fiction doesn’t have thousands of years of rules to follow about whether it’s OK to stick pictures randomly in our stories or not. So I think we should! Pictures everywhere! More pictures in Twine games! They’re fun and they make me happy. I don’t see them enough.
HOW TO PUT A PICTURE IN YOUR TWINE GAME
Let’s pretend we have a picture we want in a story. The picture could be any file format that displays in a web browser– picture.png, picture.gif, whatever. Today, though, we’re using picture.jpg.
The first thing you have to do is put the image file in the same folder as the .html file of your game.
Once you’ve done that, the syntax for placing picture.jpg in the story normally would be:
But what if you want to make the image clickable, like a word link? You definitely can! You can have the image act as a link to another passage in the story. Let’s pretend we’re writing a story where we want to have the player click on a map to find a buried treasure. The treasure is found in a passage called ‘treasure,’ and the image is called map.jpg. In that case, the picture link would look like this:
You don’t have to save the image in the same folder as your html file if you don’t want to, though. You can also link images directly from the web:
You can also make images link to webpages instead of other passages:
PLACES TO GET COOL IMAGES
If you’re looking for high-resolution pictures on a specific topic, it’s sometimes hard to find good art that you’re allowed to use in your own projects for free. However, there are some pretty reliable art resources out there that will connect you to creative commons or public domain images that you can use for whatever you want, or even modify.
This website will search image databases that contain a lot of creative commons images. Images under a creative commons license are free to use, but some are restricted. If you want to find a picture you can edit yourself, make sure the little box that says “modify, adapt, or build upon” is checked under the search bar.
My favorite database to search on this page is Flickr. It’s huge and, of course, very frequently updated.
Remember to cite the creators!
Free-to-use images from Wikipedia’s media collections. They currently have almost eighteen and a half million images. This means that navigating the content through the category browsing links on the front page can be a little daunting and overwhelming. However, the search function is good.
The Getty is a big art museum in southern California. It contains a lot of old and weird works of art purchased by an ancient captain of industry. They own the reproduction rights to some of the artwork they have. They also own a lot of art which is SO OLD that nobody has a copyright on it anymore. They’ve decided to release both of these kinds of images for free use to anyone who wants them.
The one thing about the GOCP is that searching this database can be hard. Addiionally, you’ll notice that most of the pictures here are pretty old, or are drawings of old things. We’re talking 1800s and older for most of the items in the database, including the photographs! However, if you’re doing something with an old-timey theme, this is a great resource.
Remember to cite the program in accordance with their rules!