Request Trying to make a game in Twine, don't know how to use images

[SAmaster]

You must be registered to see the links

I'm trying to make a short TF themed game in twine just to see if I can do it. I'm ready to publish like the alpha version, but I can't seem to get the images to work. Through some research I figured out what the problem is, but not what the solution is.

So far I have images listed in it in the following format-

<img src="C:\Users\samcp\Documents\Twine\Stories\Girlfriend\nsfw, high quality, very detailed, [[dynamic lighting]], masterpiece, slight ani s-3706353299.png">

And from what I understand since this is basically telling the game where the file is in relation to my computers files, it doesn't tell people who would download the game where the files are (I tried moving the link and image folders to somewhere else in my computer to test this).

What I don't know is how to fix the problem. It sounds like from video's I've watched that I basically need to shorten it to only include the folder that'd be next to the game file? In this case I named the image folder 'Girlfriend' there, but that still seems to result in a blank image. So can someone please tell me how to fix this?

 

[lazerhawk1]

Warning: I never used Twine, but I have dev experience

What you shared is an "absolute" path for a resource (it starts with C:\Users...) while what you likely want is a "relative" path. That is a path that's relative to the location of the executable or HTML file that Twine creates so something like ".\Twine\Stories\Girlfriend\... FILE NAME .png"

Looking at the zip you provided I can see the image on the first screen fine because the image source is just the filename and that image file is in the same directory as the HTML game file. Then anything which has an absolute path like what you described does not get shown because I don't have that filepath on my computer.

Also consider removing all spaces and punctuation from filenames. Twine can probably support them, but it's good practice because not all file systems may treat them in exactly the same way. Just replace spaces with underscores.

 

[SAmaster]

Well I ended up changing how I had it- where I removed everything but the filename and put the html file in the image folder. That works, but I would prefer to have the images folder separate from the html file.

 

[Mr.Momo]

SAmaster, Mr.Momo can help you in your issue.

I would prefer to have the images folder separate from the html file.

So here's what Mr.Momo understands:

• Image Folder location -> C:\Users\samcp\Documents\Twine\Stories\Girlfriend
• Goal:

Stories/ 
├─ Girlfriend/ 
│  ├─ image1.jpg 
│  ├─ image2.jpg 
├─ game.html

To reach this goal, you will need to change the location your images are pointing to using (img src=). Currently, all (img src) in your .html file points relative to the current location of your .html file. Let's clarify:

Example
Let's look at an img tag:

<img src="nsfw, high quality, very detailed, [[dynamic lighting]], masterpiece, slight too s-3059551722.png" />

Your (src) is looking for a .png file with this filename in the same folder as your html:

nsfw, high quality, very detailed, [[dynamic lighting]], masterpiece, slight too s-3059551722.png

Solution
To reach the goal:

1. Place your .html file next to your "Girlfriend" folder
2. Set all (img src) to <img src="Girlfriend/<NAME OF IMAGE HERE>.<FILETYPE HERE>"
   • Example: <img src="Girlfriend/image1.png"

Why this works? You're telling html (well your browser) where to look for your images in relation to your .html file.
Mr.Momo also recommends looking into absolute vs relative file pathing to further strengthen your understanding!

Hope this helps!

 

[SAmaster]

SAmaster, Mr.Momo can help you in your issue.
So here's what Mr.Momo understands:

• Image Folder location -> C:\Users\samcp\Documents\Twine\Stories\Girlfriend
• Goal:

Stories/
├─ Girlfriend/
│  ├─ image1.jpg
│  ├─ image2.jpg
├─ game.html

To reach this goal, you will need to change the location your images are pointing to using (img src=). Currently, all (img src) in your .html file points relative to the current location of your .html file. Let's clarify:

Example
Let's look at an img tag:
Your (src) is looking for a .png file with this filename in the same folder as your html:

Solution
To reach the goal:

1. Place your .html file next to your "Girlfriend" folder
2. Set all (img src) to <img src="Girlfriend/<NAME OF IMAGE HERE>.<FILETYPE HERE>"
   • Example: <img src="Girlfriend/image1.png"

Why this works? You're telling html (well your browser) where to look for your images in relation to your .html file.
Mr.Momo also recommends looking into absolute vs relative file pathing to further strengthen your understanding!

Hope this helps!

This was what I was understanding thanks to some other people, but for some reason it wasn't working initially. Then for some other reason it suddenly did start working. I don't know what the transition point was, but at least the issue seems resolved.

By the way, if anyone is curious, I did do an update-

You must be registered to see the links