Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

inserting an offline image

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 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.



  • edited June 2016
    Your code works fine on my SugarCube game.

    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:
  • If you save the HTML file (story.html) you created using the Build option into a folder, and you create a sub-folder within the first folder named media, and you created a sub-folder within the media folder named images, and you stored a image named hat.png within the images folder then your example code will work.

    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.
  • I have "published" the game file and made sure my directories were correct but when I go to play my built version of the game the picture doesn't appear but if I highlight the text on the passage it shows that there is suppose to be an image there but there isn't. I don't know if I'm explaining myself very well but it's like the game is recognizing that an image is suppose to be there, so I think my code is fine too.

    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 image..

    my directory is set up






    Thanks for your responses. Any thoughts on this?
  • p.s. I tried a .jpg and .png because I thought that might be the issue but I guess not...
  • @Virgil282: A more detailed description on how I tested you code example.

    1. I created a new folder on my hard-drive named virgal.
    eg. c:\virgal
    2. Within the virgal folder I created a new folder named media.
    eg. c:\virgal\media
    3. Within the media folder I created a new folder named images.
    eg. c:\virgal\media\images
    4. I placed a image named hat.png within the images folder.
    eg. c:\virgal\media\images\hat.png
    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.
    eg. c:\virgal\story.html

    8. When I opened the story.html within the virgal folder using a web-browser I was able to see the hat.png image.
  • edited June 2016
    I figured out what it was. It was an HTTP protocol on IE that wouldn't let me view the images for some reason. The images appear when using chrome or firefox though. Not sure why though..also don't know how to change the protocol will google that later.

    Thanks a bunch! You guys are great!
  • edited June 2016
    If it was a cross-browser problem, my original post had the correct answer:

    "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:";

    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.
  • I'll definitely check that out! Thanks!
Sign In or Register to comment.