Tagged: file path

Twine for Beginners: Adding Local Images

Twine 2 lets you do a whole lot with simple text and hyperlinks, and it couldn’t be easier to get started. If you want to take things a step further and add images as well, that’s not hard either! There are actually a few different methods of doing this, each with their own strengths and weaknesses. I’d recommend adding images as Base64 where possible, but there are times when it’s handy to simply display a picture stored in the same place as your game, whether that’s on a website somewhere or on your computer.

About Local Images:

When I talk about “local images,” I’m referring to image files that are stored in the same place as the HTML file containing the actual Twine game. Your overall setup should look something like this:

This is a directory (which Windows refers to as a folder) containing the HTML Twine game itself – Visual Vera and the Three PNGs.html – as well as an image, bananas.png. When the player encounters the passage in which the banana image is supposed to appear, the game will look for a PNG named “bananas.png” in the same folder as itself and, if it’s there, display it in the appropriate place in the game. Continue reading