Twine - no good for a VN?

Question

Hi,
I know the subject of of Twine and displaying images has been brought up many times before.
But, as a new Twine user, I'd like to know if I'm wasting my time with Twine when creating a VN, which really requires adding images to the story. Otherwise - it's just a text based story.

As far as I can tell - the only reliable way of creating a story in Twine with images is to use the online editor (since the download app doesn't support images in the preview) and publish the file every time I change the story. And than launch it in a browser to see the images. If I'm lucky and the image URL works.

Is that about right?
I hope I'm wrong, because otherwise Twine would be perfect to compose a VN.
Please.. tell me I'm wrong..?  :)

Answer 1

Just do what I do.  Add the following code to your StoryInit passage:

<<set $Testing = true>>
<<if $Testing>>
	<<set $ImagePath = "C:/Games/YourGame/Images/">>
	<<set $SoundPath = "C:/Games/YourGame/Sounds/">>
<<else>>
	<<set $ImagePath = "Images/">>
	<<set $SoundPath = "Sounds/">>
<</if>>

Change the paths in the above code to the paths for your images and sounds.

After that, whenever you have to refer to an image just use $ImagePath + "image.jpg".  This works because you're not using a relative path when $Testing is set to true.  Just remember to change $Testing to false before you publish, then set it right back to true after you publish and you should be fine.

Comments

Thanks!
I tried to load an image with

<img src=$ImagePath + "car2.jpg" />

and I'm getting this in my browser after publishing. Instead of seeing the image:

<img src=C:/Temp/Twine/Images/ + "car2.jpg" />

I am very new to Twine, so I probably got the syntax wrong.
And I am using SugarCube btw.

Also, I had posted another comment in regards to this, and that comment is still waiting for approval since yesterday..

---

That's just a bit off.  Because you're using it in an HTML element you have to use the @ symbol to get SugarCube to convert it (see HTML Attribute Directive in the SugarCube documentation), and you have to put it all together inside quotes like this:

<img @src="$ImagePath+'car2.jpg'" />

Also, if you're using more than one @ symbol inside an HTML element like that, make sure you have SugarCube v2.23.5 or later, because there was a problem with multiple directives in a single HTML element in earlier versions.

Alternatively, you can use SugarCube's image markup to display the image:

[img[ $ImagePath + "car2.jpg" ]]

Hope that helps!  :-)

---

It sure did - thank you! :)

Not only can I now see my images in the browser - I can also see them in Play mode from within the editor. Even better!
I thought the offline editor wasn't capable of showing images and you have to run the game in a browser for that.. - but, I'll take it!

Thanks so much. I'll start digging into the SugarCube documentation.

---

This works great thanks!

I had to use "Web Server for Chrome" to get this method to work on a Mac using Google Chrome Browser. It turns your local project folder into an http address and lets you access the files in-browser. The alternative constant publishing to check images was a bit tedious.

---

Is it normal for this forum that posts from new users don't get approved within 48 hours and longer?
I had posted to this thread 3 days ago and it still says:

" Your comment will be checked and approved shortly. "

Please - don't rush on my account.. :)

Answer 2

Yeah, the test mode of Twine 2 doesn't show images from relative urls in test mode, which means you'll have to publish to file to see your images. The online version is the same way -- you can't actually have relative-sourced images online, so, yeah. Images you get from an external source with a complete url are fine in either version.

Also, there are other compilers you can use like Tweego and Twine 1, but they actually don't use Twine 2's weird stripped down test mode at all, so your only option is to compile.

Compiling to test your images really isn't that big of a deal. If that's your only concern, that strikes me as an odd one. The test mode in Twine 2 is weird because it does all the work of building and compiling your story, but it keeps it in memory rather than saving it. That's pretty much the only difference.

Comments

clarification: The reason you can't see Relative URL based media files when using either the Test or Play options of any Twine 2 release is because the temporary HTML document created by those modes only exists in the web-browser's memory, so there is no physical HTML file for the media files to be relative too.

This is why you always need to use the Publish to File option to create a physical HTML file before you can see/play Relative URL based media files.