Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

HTML files (used in the game UI) are not loaded in HTML5 game on itch.io

A topic by lwoleksii created Jun 12, 2024 Views: 259 Replies: 3
Viewing posts 1 to 3
(1 edit)

Hello,

I want to publish an HTML5 game made with Phaser JS framework. The thing is, in order to display the game UI, I utilize Phaser functionality that extends DOM with HTML. I.e. a menu element of dialog is a separate HTML file which is loaded when needed.

However, when trying to load these files in the game published on itch.io, the server responds with 403. Other assets are loaded properly. 

Could someone suggest what to do here please?

The game has not been published yet (as it won't work), but in case someone with escalated rights can check it, here is the link: https://lwoleksii.itch.io/unhurried

I tried changing the file extension from .html to .nothtml, but it didn't help:). So it's interesting what causes the 403 response and what's a workaround here.

Admin (1 edit) (+1)

The 403 error typically appears if you are trying to reference a path does not exist by your game. (It’s not the more commonly seen 404 error due to the security policy of the storage bucket)

Please read the common pitfalls section of our HTML guide here: https://itch.io/docs/creators/html5#common-pitfalls

Specifically these points:

  • Attempting to access a path that doesn’t point to a file – If you attempt to load a resource that doesn’t point to a file the request will fail. This includes attempting to access a folder (paths ending in /) instead of a specific file. Due to our security settings, our system will return a 403 error instead of the more commonly seen 404. (In Chrome you may see net::ERR_ABORTED 403).
  • Using absolute paths instead of relative paths – Your project is hosted on a subdirectory on our HTML CDN. If you use an absolute path in your sourcecode then it will cause the browser to attempt to make a request outside of the path of your project, and the request will fail. Absolute paths are paths that start with a /. You must use relative paths to access other files you have provided in your project.
  • Mismatched cases when referencing files – The server that hosts your project’s files is case-sensitive. MacOS and Windows computers allow for files to be loaded case-insensitive. It’s possible your project works locally on your computer but fails after you upload it. Please check that all files you reference use the exact case that is shown on your file manager. This is commonly associated with a net::ERR_ABORTED 403 error in Chrome. If you have a file named Hello.png, you must reference it as Hello.png, things like hello.png and HELLO.png will not work because the case does not match.

@leafo thank you very much!

This explanation showed that there are no restrictions on file types or how we load them that prevent HTML from loading. So I rigged a little deeper and it turned out that Phaser asset loader allows different path specifications when the game is hosted in domain's main folder, but more "strict" in terms of how it finds assets if the game is inside some other folder. 

That's why the game worked fine locally on localhost and on it's website, but on itch.io where path is like "https://html-classic.itch.zone/html/10661524/dist/assets..." it failed.

I will change the code to make it work. Hope it can be useful for other people who might run into similar problem.