Help With Twine

[Raelynn]

Okay so I'm very new to Twine. As in I just started using it today. I want to make a game with it and put it on here so everyone can play it but I'm having a bit of trouble when it comes to the pictures. I figured out how to use html code to put the picture in but when I publish the game and try it on a different computer the pictures won't show up. I have all the pictures and game in a special folder so they are all together I just can't figure out why they won't show up on a different computer. Any help would be greatly appreciated.

 

[Epadder]

Possible simple issue could be that the path to the files is wrong (hard to tell without you giving a small sample of code).

 

[Raelynn]

Possible simple issue could be that the path to the files is wrong (hard to tell without you giving a small sample of code).

The code I'm using right now is <img arc="C:\User\Home\Desktop\pics\19004008.gif" .

 

[Epadder]

Yep that's the issue, don't use absolute paths when coding anything. If you simply change the paths to look like <img src="pics\19004008.gif"> the browser will know to look for a pic folder in the folder where the html file is. So if it was on your Desktop for example you'd have the .html file and a pics folder.

 

[Raelynn]

Yep that's the issue, don't use absolute paths when coding anything. If you simply change the paths to look like <img src="pics\19004008.gif"> the browser will know to look for a pic folder in the folder where the html file is. So if it was on your Desktop for example you'd have the .html file and a pics folder.

I tried that but all I get is a blank page.

 

[Epadder]

actually looking at a functioning game I forgot you need to use forward slashes "/" instead of backslashes "\" with html

 

[Raelynn]

actually looking at a functioning game I forgot you need to use forward slashes "/" instead of backslashes "\" with html

Could it be because I'm using twine 2 and not twine 1?

 

[Epadder]

If it works on your computer and not another, it's because of the absolute paths. I mean possible other issues are the browser (If it's a different one / version on one computer vs the other).

 

[Raelynn]

If it works on your computer and not another, it's because of the absolute paths. I mean possible other issues are the browser (If it's a different one / version on one computer vs the other).

So what you're saying is it could be because one compute is using Firefox while the other is using crome?

 

[Epadder]

With those two in particular, I doubt it, but I mean at this point without having anything to actually pick through I just have to think of problems I've had in the past making web pages... which I know isn't exactly Twine but the image/video/formatting code is pure HTML

 

[Catapo]

It is not like absolute paths are evil but it is important to understand why they should be avoided and why they create the problem that you have

From what I see you keep all the images on the desktop in a folder called pics. When you play the game on a different computer the game expects the images to be in the exact same place C:/User/Home/Desktop/pics
but if I keep the game in another folder or another drive it can not find the images on my desktop because there is no pics folder there

The solution is to create a pics folder put all your images in there and replace all the absolute paths with src="pics/xxxx.png"

I assume twine exports an index.html file so make sure the picture folder is always near that file and on the same level and it should work on every computer

Another small note and hope you don't mind I am not trying to be mean but you just started development yet you were ready to blame the engine or browser because of your mistakes and that is not good behaviour

 

[Raelynn]

It is not like absolute paths are evil but it is important to understand why they should be avoided and why they create the problem that you have

From what I see you keep all the images on the desktop in a folder called pics. When you play the game on a different computer the game expects the images to be in the exact same place C:/User/Home/Desktop/pics
but if I keep the game in another folder or another drive it can not find the images on my desktop because there is no pics folder there

The solution is to create a pics folder put all your images in there and replace all the absolute paths with src="pics/xxxx.png"

I assume twine exports an index.html file so make sure the picture folder is always near that file and on the same level and it should work on every computer

Another small note and hope you don't mind I am not trying to be mean but you just started development yet you were ready to blame the engine or browser because of your mistakes and that is not good behaviour

Oh no I completely get what you are saying and I didn't mean to come off as blaming the engine or browser it's just I'm not real good with computers and stuff . I asked about the whole twine 2 Vs twine 1 thing because the twine wiki says that twine two can't embed multimedia yet and I was worried that was my problem .

 

[Catapo]

Oh no I completely get what you are saying and I didn't mean to come off as blaming the engine or browser it's just I'm not real good with computers and stuff . I asked about the whole twine 2 Vs twine 1 thing because the twine wiki says that twine two can't embed multimedia yet and I was worried that was my problem .

Ok. I hope you manage to fix your problems and good luck with your games

 

[Raelynn]

Ok. I hope you manage to fix your problems and good luck with your games

Thanks! And no I haven't fixed my problem yet. I'm still trying though.

 

[lobotomist]

try this instead? is based on twine:

You must be registered to see the links

You must be registered to see the links

 

[HiEv]

Okay so I'm very new to Twine. As in I just started using it today. I want to make a game with it and put it on here so everyone can play it but I'm having a bit of trouble when it comes to the pictures. I figured out how to use html code to put the picture in but when I publish the game and try it on a different computer the pictures won't show up. I have all the pictures and game in a special folder so they are all together I just can't figure out why they won't show up on a different computer. Any help would be greatly appreciated.

As mentioned by other people, you want to use a relative path for your files. However, that means that they won't normally show up when you're testing in Twine 2. Here's the trick to get around that:
(Note: This assumes you're using the SugarCube 2 story format in Twine, which I would highly recommend.)

if (window.hasOwnProperty("storyFormat")) {
    setup.Path = "C:/User/Home/Desktop/";  // Running inside Twine application
} else {
    setup.Path = "";  // Running in a browser
}
setup.SoundPath = setup.Path + "sounds/";
setup.ImagePath = setup.Path + "pics/";

That code should be added to the top of your JavaScript section. (Change the above file path as necessary.)

Once you've done that you can use "setup.ImagePath" to display your images correctly, both in and out of Twine, using either of these methods:

[img[setup.ImagePath+'image.png']]
       - or -
<img @src="setup.ImagePath+'image.png'">

(Note: If you aren't using the latest version of SugarCube, currently v2.27.0, I'd recommend

You must be registered to see the links

and

You must be registered to see the links

to the latest version since there've been a few improvements and bug fixes.)

Another thing to be careful of is capitalization. If the file is named "Xyz.jpg" and you try to display "xyz.jpg", then that will work in some browsers and operating systems, but not in others. I'd recommend renaming all of your images to lowercase, and only referring to them in lowercase, to avoid that problem. The same thing goes for the names of the directories (a.k.a. the file path) that you use.

Oh, and regarding Twine 2 embedding media, you really don't want to do that. "Embedding media" means encoding the images and other files into base64 format and building them into the HTML itself, which is usually a bad idea. Encoding them in base64 usually makes the files around 60% larger, and some browsers can't handle large HTML files. It's better to leave them as external files.

If you need help in the future you can try the "

You must be registered to see the links

" site or, if it includes some adult content, you might want to try the

You must be registered to see the links

You must be registered to see the links

in the "

You must be registered to see the links

" sub-forum.

Hope that helps, and have fun!

 

[Raelynn]

As mentioned by other people, you want to use a relative path for your files. However, that means that they won't normally show up when you're testing in Twine 2. Here's the trick to get around that:
(Note: This assumes you're using the SugarCube 2 story format in Twine, which I would highly recommend.)

if (window.hasOwnProperty("storyFormat")) {
    setup.Path = "C:/User/Home/Desktop/";  // Running inside Twine application
} else {
    setup.Path = "";  // Running in a browser
}
setup.SoundPath = setup.Path + "sounds/";
setup.ImagePath = setup.Path + "pics/";

That code should be added to the top of your JavaScript section. (Change the above file path as necessary.)

Once you've done that you can use "setup.ImagePath" to display your images correctly, both in and out of Twine, using either of these methods:

[img[setup.ImagePath+'image.png']]
       - or -
<img @src="setup.ImagePath+'image.png'">

(Note: If you aren't using the latest version of SugarCube, currently v2.27.0, I'd recommend

You must be registered to see the links

and

You must be registered to see the links

to the latest version since there've been a few improvements and bug fixes.)

Another thing to be careful of is capitalization. If the file is named "Xyz.jpg" and you try to display "xyz.jpg", then that will work in some browsers and operating systems, but not in others. I'd recommend renaming all of your images to lowercase, and only referring to them in lowercase, to avoid that problem. The same thing goes for the names of the directories (a.k.a. the file path) that you use.

Oh, and regarding Twine 2 embedding media, you really don't want to do that. "Embedding media" means encoding the images and other files into base64 format and building them into the HTML itself, which is usually a bad idea. Encoding them in base64 usually makes the files around 60% larger, and some browsers can't handle large HTML files. It's better to leave them as external files.

If you need help in the future you can try the "

You must be registered to see the links

" site or, if it includes some adult content, you might want to try the

You must be registered to see the links

You must be registered to see the links

in the "

You must be registered to see the links

" sub-forum.

Hope that helps, and have fun!

Okay so I did exactly what you said and it worked sorta. I can see the image if I publish the file but that's it. And only works if I use the "<>" version of the code. Thank you for the help!

 

[HiEv]

Okay so I did exactly what you said and it worked sorta. I can see the image if I publish the file but that's it. And only works if I use the "<>" version of the code. Thank you for the help!

Did you fix the path on this line?

setup.Path = "C:/User/Home/Desktop/";

Also, I'm assuming your images are in the "pics/" directory below that. If they aren't then you may also need to fix this line too:

setup.ImagePath = setup.Path + "pics/";

I put all my code in "C:/Games/gamename/" and images in "C:/Games/gamename/images/" (it's safer there than on the desktop, since the desktop has some security permissions, but "C:/Games" won't have any such security problems).

If it's still not working for you, and you want it to work, then post your file paths and the relevant code you're using (both from the JavaScript section and the image display code in the Twine passage) and I can fix that for you.

 

[Raelynn]

Did you fix the path on this line?

setup.Path = "C:/User/Home/Desktop/";

Also, I'm assuming your images are in the "pics/" directory below that. If they aren't then you may also need to fix this line too:

setup.ImagePath = setup.Path + "pics/";

I put all my code in "C:/Games/gamename/" and images in "C:/Games/gamename/images/" (it's safer there than on the desktop, since the desktop has some security permissions, but "C:/Games" won't have any such security problems).

If it's still not working for you, and you want it to work, then post your file paths and the relevant code you're using (both from the JavaScript section and the image display code in the Twine passage) and I can fix that for you.

This is my JavaScript Code --->
if (window.hasOwnProperty("storyFormat")) {
setup.Path = "C:/User/Home/Desktop/"; // Running inside Twine application
} else {
setup.Path = ""; // Running in a browser
}
setup.SoundPath = setup.Path + "sounds/";
setup.ImagePath = setup.Path + "pics/";


and this is my Image Display Code ----> <img @src="setup.ImagePath+'1.gif'">

 

[HiEv]

This is my JavaScript Code --->
if (window.hasOwnProperty("storyFormat")) {
setup.Path = "C:/User/Home/Desktop/"; // Running inside Twine application
} else {
setup.Path = ""; // Running in a browser
}
setup.SoundPath = setup.Path + "sounds/";
setup.ImagePath = setup.Path + "pics/";

and this is my Image Display Code ----> <img @src="setup.ImagePath+'1.gif'">

You didn't post your file paths like I asked, but if I had to guess, it's probably because you have "C:/User/Home/Desktop/" instead of "C:/Users/Home/Desktop/", since that directory is normally called "Users", not "User".

(My sample code used that path, because that's the path you had in your second post here. I'm guessing that's why the code in that post didn't work either.)