+1 vote
by (160 points)
Hi there, first time using this Q/A forum.

Working on my game, and all background images / other graphics are currently hosted on the web. However, since there will be many assets I'm using, and potentially music, I'm looking into the option of local storage.

The idea is to minimize the download time for content and that awkward moment when assets are missing.

Google Fu is rather vague on the topic, so I was wondering what the current status is with local or embeddable assets like this in Sugarcube 2

1 Answer

+1 vote
by (159k points)

You need to state which series (1.x or 2.x) of the Twine application you are using, as answers can be different for each series. I will assume you are using one of the versions of Twine 2.

The status of accessing a locallly referenced image file is the same as it was in the past, and that is simple store the image file in either:

A. the same folder as the story HTML file you generated using the Publish to File option, then you can reference that file like so:



<img src="image-name.jpg">

B. a child folder of the folder as the story HTML file you generated using the Publish to File option, then you can reference that file like so:



<img src="child-folder-name/image-name.jpg">

NOTE: the image will only appear what the generated story HTML file is view in a web-browser, the image will not appear when the story is viewed using either the Test or Play options.


The state of embedding an image within a story project is a little more complex, and the answer depends on if you are using one of the web-browser based releases of the Twine 2 application or if you are using one of the install-able based releases.

1. Web-browser based release:

Story Projects are stored within the web-browser's local storage cache, and by default most brands of web-browser limit this cache to 5-10MB which doesn't allow a lot of images to be embed within a project.

2. Install-able based release:

Story Projects are stored within text files on your local hard-drive which allows for more images and/or larger images to be stored within the project. The application itself does not have not built-in feature for embedding an image within Passage but it is possible to do manually using the following process.

2a. Create a new Passage to store the image in, giving a meaningful name (eg. Man) and then assign that passage a Tag of Twine.image

2b. Convert your image into a Base64 String value.
You can use a website like Base64 Image Encoder to so this, simply drag and drop the image into the indicated area in the top right corner of the page and then click on the small show code button to open the dialog containing decoded String. You will then want to click on the small copy to clipboard button to the right of the For use in <img> elements title.

2c. Paste that encoded String in the body of the passage you created in the first step.

2d. To show the embedded image within the contents of another Passage simple use image markup like the following, which references the name of the Passage containing the embedded image.