0 votes
by (200 points)
edited by
I'm making a choose-your own adventure game for school and was wondering how to put in a cool "Game Over!" picture when you reach one of the endings. Tried setting variables and doing the (display:) stuff, but this is way over my head. help?

1 Answer

0 votes
by (159k points)

Please use the Question Tags to state the name and full version number of the Story Format you are using, as answers can vary based on that information. Based on the syntax of the macro you referenced in your question I will assume you are using a version of the Harlowe, without knowing which version I will assume that it is v2.1.0

The Add an Image, Movie, Sound Effect, or Music page of the Twine 2 wiki includes non Story Format specific information about adding an image to a Passage.

Assuming that your image is named game-over.jpg and that this image is contains within a folder named media, and that the media folder is a child-folder of the one you are saving the Story HTML file you are generating via the Publish to File option in.
eg. something like the following file / folder structure.

c:\my-project\
    media\
        game-over.jpg
    my-adventure.html

... then your img element within the Game Over Passage in your story would look something like the following:

<img src="media/game-over.jpg" alt="Game Over">

Note the usage of a forward slash character to represent the separation between the media folder and the game-over.jpg image file, forward slashes are used (instead of back slashes) for web based technologies.

by (200 points)
edited by

I did what you said: 

<img src="Genius hour project OPEN TO PLAY/game over.jpeg" alt="Game Over">

and got a little image icon next to a "Game Over" text snippet... when I tried taking out the alt="Game Over" par, it just had the image icon. Did I miss anything? Went to the http://twinery.org/wiki/twine2:add_an_image_movie_sound_effect_or_music but found that twine2 can't do pictures. Should I just not have the image? Thanks though! :)

by (159k points)

...got a little image icon next to a "Game Over" text snippet

The little "Missing Image" icon is shown whenever a web-browser can't locate or load the image file referenced by an img element, if the img element also includes an alt attribute then the text assigned to that attribute will also be shown when the referenced image can't be shown.

..found that Twine 2 can't do pictures...

As explained in that warning, the Twine 2 application can't display / play locally referenced media files (like your image) when either the Test or Play options are used to view the generated Story HTML. The reason this is the case is because the Story HTML generated by those options only exists in the web-browser's memory, so there is no actual HTML file for the media files to be stored relative to.

If you use the Publish to File option to generated a Story HTML file and then save that file within a folder structure like the one I described in my original answer then you can display / play locally referenced media files.

by (200 points)
edited by

K I tried this: 

''"You are dismissed."'' The booming voice cuts through the air, braking the silence and almost
your eardrums. You Walk out the door, sad and gloomy, and walk down the street. Maybe you can
start over as a potato farmer?


<img src:"Media for projects/game over.jpeg" alt="GAME OVER">

But got the same thing. Note: I am saving this inside my CENTON REMOVABLE USB so my file breakdown looks like this

c: /CENTON removable USB/
         /Media for projects/
              /game over.jpeg/
              /Knight's veiw.html/

if that changes anything.... Thanks though! Felt good to get advice from an expert! :)

by (159k points)

a couple of things:

1. You have a syntax error in your Passage example, there is a colon character between the img element's src attribute name and it's value instead of the required equals sign character.

2. Folder / File names.
Web-based technologies are very particular when it comes to a folder / file name, because of this it is generally not a good idea to use either mixed cased (upper & lower case) letters or space characters, nor is it a good idea to use punctuation characters. Two exceptions to this later point is the standard dash / minus sign and the underscore character, both of which can be used to separate the words within a multi-word folder/file name.

/* Bad folder / file names */
/Mixed Case Folder Name/File With Punctuation within it's Name.jpg

/* Good folder / file names */
/media/game-over.jpg

3. Relative URLs
The relative part of this topic relates to the fact that the referenced file is stored relating to the HTML file making that reference. So in your folder/file structure example you have the following:
a. A top level folder named CENTON removable USB which is located on your C: drive.
b. A folder named Media for projects which is a child of the folder in point A.
c. A Story HTML file named Knight's veiw.html which is stored within the child folder in point B.
d. A image file named game over.jpeg which is also stored within the child folder in point B.

Based on the above structure the Relative URL required to reference the game over.jpeg image file from within a Passage contained with the Knight's veiw.html file would look like:

<img src="game over.jpeg" alt="GAME OVER">

 

Personally I would change your folder / file structure to something more like the following.

c:\CENTON removable USB\
	Knight's view project\
		knights-view.html
		media\
			game-over.jpeg

a. A top level folder named CENTON removable USB which is located on your C: drive.
b. A folder named Knight's view project which is a child of the folder in point A, and is used as the parent folder for all things related to this project.
c. A Story HTML file named knights-view.html which is stored within the parent folder in point B.
d. A folder named media which is which is a child of parent folder in point B., this folder is used to store all media files referenced from the Story HTML file.
e. A image file named game-over.jpeg which is stored within the child folder in point D.

Based on the above structure the Relative URL required to reference the game-over.jpeg image file from within a Passage contained with the knights-view.html file would look like:

<img src="media/game-over.jpeg" alt="GAME OVER">

 

by (200 points)

k did that (even renamed all my files to match your description)

<img src="media/game-over.jpeg" alt="GAME OVER">

 but it's still not working... thank you though. project is going perfect otherwise! :)

...