Tagged: GIF

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

Twine for Beginners: Adding Images as Base64

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. This guide will lead you through my favourite.

About Base64:

Base64 is a method of encoding binary data as strings of text. Put simply, it takes all the 1s and 0s that make up a file (such as a JPEG, PNG or GIF) and translates them into an ungodly string of letters, numbers and symbols that you can paste directly into Twine.

Why would anybody do this, you ask? Because this allows you to include images as part of your Twine game. If you want to share your game with people, you can send them the finished HTML file (or upload it somewhere such as philome.la), and any pictures you’ve added in this way will be right there inside it. Here’s a run down of why you might (and might not) want to use this option: Continue reading