Large sprites in browser error

[VileVillainEntertainment]

Does anyone have any experience optimizing their game to run in HTML5 on a browser?
I've had trouble finding any information online to help guide me through this process, and the most surprising thing to me, is that it seems to have trouble loading large sprite sheets with $ in the title. What are my options here?

EDIT: This same error occurs with all images that require a $ symbol to appear properly. This problem also only occurs when playing from a browser.

 

[ATT_Turan]

Are you sure that the filename is an exact match? Check the capitalization, even of the file extension.

A common mistake is using filenames that load correctly in playtests on your local system, but that don't match when deployed or loaded on another OS (most Web hosts use Linux). Some image editors might have exported it as .PNG.

The size of the file might cause some other problems if it's really large enough, but I don't think it should cause a loading error.

 

[Andar]

or the error could be in the folderpath above img - that screenshot is always an incomplete error message.
For the full error message and error trace you would have to press F8 on that screen, then go to the console tab and screenshot that.

 

[VileVillainEntertainment]

or the error could be in the folderpath above img - that screenshot is always an incomplete error message.
For the full error message and error trace you would have to press F8 on that screen, then go to the console tab and screenshot that.

Unfortunately this issue only happens while playing in a browser, so F8 doesn't work.

 

[ATT_Turan]

If you're certain it's happening on all filenames prepended with $, and only those, it sounds kind of like your Web host might not actually have the files correctly.

Do you have SSH access to be able to look at the directories and see that the files are in the folder and check their naming?

 

[VileVillainEntertainment]

Yes, it effects all instances of filenames with $. The website I'm using is Gamejolt, and the zipped project contained the correct file names with $, unless the website somehow changed them. I don't know.

 

[Andar]

Unfortunately this issue only happens while playing in a browser, so F8 doesn't work.

if you're playing in a full browser, then there is no need for F8 - the developer console is available through the regular browser menues under developer tools.

 

[VileVillainEntertainment]

So this issue is driving me nuts. To better explain what is going on, I threw together this video. Any help would be greatly appreciated.

 

[Arthran]

The '$' would normally be encoded to '%24' before the request is made to the web server, since '$' technically isn't a valid character for an http request. It's possible that you're using a plugin that has altered the normal image loading functions, and failed to properly encode the URL before making the request. Otherwise, perhaps the web server you're using is screwing things up somehow and failing to properly handle the the url conversion.

I'd recommend looking into the plugin situation first, since that's likely something that is easier for you to control. Otherwise, maybe try finding a different server to upload the project to, and see if the problem persists.

But just to correct a misconception that I noticed in your video, the '$' is *not* necessary in order to use big sprites. What the '$' does is tells the engine that the file only contains 12 sprites (enough for the walking patterns of 1 character), as opposed to the normal 96 sprites (enough for the walking patterns of 8 characters). You can use any sized sprite, regardless. If there is a '$', the engine will assume that the sprite width is 1/3 of the total width of the file, and the height is 1/4 of the total height of the file. If there is not a '$', the engine will assume that the sprite width is 1/12 of the total width of the file, and the height is 1/8 of the total height of the file.

So if you absolutely can't get this worked out, as a workaround, you *can* do away with the '$' and resize the file to match the standards that I mentioned above. However, it would be ideal if you could properly fix the problem, so that you don't have to load significantly larger files than what should be necessary into memory.

 

[VileVillainEntertainment]

The '$' would normally be encoded to '%24' before the request is made to the web server, since '$' technically isn't a valid character for an http request. It's possible that you're using a plugin that has altered the normal image loading functions, and failed to properly encode the URL before making the request. Otherwise, perhaps the web server you're using is screwing things up somehow and failing to properly handle the the url conversion.

I'd recommend looking into the plugin situation first, since that's likely something that is easier for you to control. Otherwise, maybe try finding a different server to upload the project to, and see if the problem persists.

But just to correct a misconception that I noticed in your video, the '$' is *not* necessary in order to use big sprites. What the '$' does is tells the engine that the file only contains 12 sprites (enough for the walking patterns of 1 character), as opposed to the normal 96 sprites (enough for the walking patterns of 8 characters). You can use any sized sprite, regardless. If there is a '$', the engine will assume that the sprite width is 1/3 of the total width of the file, and the height is 1/4 of the total height of the file. If there is not a '$', the engine will assume that the sprite width is 1/12 of the total width of the file, and the height is 1/8 of the total height of the file.

So if you absolutely can't get this worked out, as a workaround, you *can* do away with the '$' and resize the file to match the standards that I mentioned above. However, it would be ideal if you could properly fix the problem, so that you don't have to load significantly larger files than what should be necessary into memory.

This might be the most informative and helpful answer I've received across these forums, facebook groups and reddit. I will try this out and let you know what happens.

 

[VileVillainEntertainment]

I did it. Thank you for the help. I ended up just creating larger sprite sheets containing the oversized sprites, and I no longer needed the $ symbol. I couldn't be more relieved.

 

[Arthran]

No problem. I'm glad you got it working. In the event that you ever do want to try to figure out what was actually causing the problem, a good first step might be to post your plugin list here. It's possible that somebody might be able to recognize some potential culprits.