hello Manon
so my big brain found out I could upload zip files on itch.io and the game could be played on the browser 💀💀
the problem with my twine game is the pictures won't load, but the audio is fine.
any advise?
THANK YOU IN ADVANCE
Hi Anon!
Hard to say without seeing your code first. So I tried to cover anything I thought could be useful/relevant.
The post below will be long and explanatory, and maybe you know about it already. So here's a checklist first:
Where are your files located: online or in the Zip file? -> check the URL of the image
What code are you using to display the image? -> check if there are no typo/missing quotes/comma/etc...
Did you test your project before uploading to itch? And was it working as intended then? -> are your files in the correct place relative to your HTML file or still available publicly online?
Most of the times, placements of the file, a typo in the name of the file or sub-folder, or a missing character in the code is the issue.
Now, onto the explanatory part of asset import and use.
Assets and Relative Paths
When importing anything into a Twine project, you need to use a URL to define where the system can find it. For online assets, this is easy: it is just a run-of-the-mill plain URL (html://website/file). For local assets, the URL looks a bit differently. There are two ways of defining it: Absolute and Relative Paths.
The Absolute path is the path the computer will take from a Drive to reach a file. For example:
"C:\Projects\Coding\images\Introduction\cool.jpg"
The image is in the folder Introduction, which is in the folder images, which is in the folder Coding, which is in the folder Projects which is in the Drive C:.
But absolute paths do not work online (unless the person playing has the exact same setup and assets located in the same place). So we use Relative paths.
Like the name suggests, the relative paths is a path a system will take starting from the program or file it is running to find some assets. In Twine's case, it starts from the HTML file. If we take our previous example, where the HTML file is in the folder Coding, a relative path between that file and the image will look like this:
"images\Introduction\cool.jpg"
Or in another visualisation:
index.html images\ introduction\ cool.jpg
From the HTML file, the system will go to the folder images, then the introduction folder inside, to finally open the image.
But, because the web is the web, the relative path above is not completely correct (it might work, but usually the image won't display. Instead of the back slashes \, we need to use forward slashes /.
So "images\Introduction\cool.jpg" becomes "images/Introduction/cool.jpg"
Case Sensitivity and other name issues
Like any URLs, Relative paths are case sensitives. This means that if you write your URL all in lowercase, but one letter is in uppercase, the asset won't load. This is valid for: the folders, the name of the image AND the file extension!
cool.jpg is different to cool.JPG
So be sure to check that both the names of the folder, the files AND the extension is coded in the proper case. It is recommended to prefer lowercase when naming files/folder, rather than having a mix of both. You can find the file extension and whether it is in upper/lower-case in the file properties. You can normally change the case of the extension there too.
Another thing that will sometimes give the system trouble is having a space or special characters (é, ñ, à, etc...) inside the folder or the file's name. While you may be lucky and not get an issue, avoiding using those characters in the names will reduce the change of your project breaking for players. So instead of:
spaces, use - or _ or avoid them altogether
special characters, use plain letters (and numbers, if necessary).
Displaying an image
There are essentially two(-ish) way of displaying an image on Twine: in the passage or the stylesheet (CSS). Both are good, their use depends on what you want to do with the image.
In the passage, you have two ways of going at it: TwineScript or HTML.
[img[images/Introduction/cool.jpg]]
< img src = "images/Introduction/cool.jpg" >
I personally prefer using HTML, as it allows adding more customisation to the image (i.e. adding style="CSS rules" after the image URL) and it is less likely for me to think it's a link...
In the CSS, images are often displayed as background of an element.
body { background-image: url("images/Introduction/cool.jpg"); }
Note: it is sometimes also used with the content CSS rule in ::after or ::before elements.
In both cases, it is important to check that all quotes are not missing and are in the right place. Same with commas and semi-colon in the Stylesheet. Otherwise, the image will not show.
~~~~
Hope this helps!
