So, can I not insert an image into my game that has been downloaded with the game? I really want my game to just be a package that can be played offline.
Say I want a room with a hat. I put this in the passage and made sure I have my image in the proper directory
<div align="center">[img[media/images/hat.png]]</div>
But when I go to play my game ....no image. Does sugarcube not have that option? I've played games that have images downloaded in a folder along side the .html file and they seemed to be using sugar cube so I'm confused. Any help is greatly appreciated.
Thanks!
Comments
If you're using Twine 2, the problem is being caused by Twine 2's status as an independent application. It does not create test play games in the same directory, hence your image links will never work during test plays.
However you put this in the 1.x section so I'm assuming that's not the issue. Regardless, I can only think of the directory as the problem.
If you want to make a download-only Twine game though I strongly recommend using NW.js to create an application. You can view a tutorial here: https://videlais.com/2014/08/26/twinetuesday-packaging-twine-with-node-webkit/
eg. Your file/folder structure would look like:
If you want to upload your HTML you will need to create an archive file (ZIP, RAR, 7z, etc_) contain the HTML file as will as the folders/image files.
you enter the room and see a hat on the floor
<div align="center">[img[media/images/hat.png]]</div>
<div align="center">[img[media/images/hat.jpg]]</div>
My published properly organized game passage looks like this in the browser;
you enter the room and see a hat on the floor
----
----
The dashes are to represent a highlighted area if I highlight everything in the passage. So, it's like both twine and the browser think there is suppose to be an image but alas....no image..
my directory is set up
-
game.html
media
images
hat.png
hat.jpg
audio
-
Thanks for your responses. Any thoughts on this?
1. I created a new folder on my hard-drive named virgal. 2. Within the virgal folder I created a new folder named media. 3. Within the media folder I created a new folder named images. 4. I placed a image named hat.png within the images folder. 5. I created a new Twine 1 story project and change it to use the SugarCube (not cane) Story Format.
6. I edited the Start passage and added your <div align="center">[img[media/images/hat.png]]</div> code to it, I then closed the Start passage editor and answered NO to the import image question.
7. I used the Build menu item to create my story HTML file, I named it story.html and saved it within the virgal folder.
8. When I opened the story.html within the virgal folder using a web-browser I was able to see the hat.png image.
Thanks a bunch! You guys are great!
"If you want to make a download-only Twine game though I strongly recommend using NW.js to create an application. You can view a tutorial here: https://videlais.com/2014/08/26/twinetuesday-packaging-twine-with-node-webkit/"
Doing this will ensure your game download is viewed by everyone in the same way, and it will run faster as well.
If you're just making a download-only game there's no reason to use a browser. It introduces all these kinds of cross-browser problems. The problem you encountered was one you encountered because browsers are made for viewing online content. They don't work very well for offline content.