- Sep 12, 2021
- 24
- 128
Hi,
TLDR:
I want to use masks (masking out part of an image with another image using css) in my html based game, but neither Edge, Firefox or Chrome seem to support this when opening the html as a file, ie: A://index.html. Is there a way to make it work, or should I just avoid using masks?
Long version:
I'm creating a game with Sugarcube, using Visual Studio Code and Twee. At first, I was using a live-server to preview the game, which would host the index locally. Because that became slower as the game grew, I stopped using that and just opened the index file in the browser, which I realise is what you usually do when you download html twine games. The file is then read by the browser as file:///A:/folder/index.html or a variation of that (this is relevant).
While working with the live server, I created a 'tool' that allows the user to modify their avatar. This 'tool' uses masks to function:
There's a picture of a round mirror. The mirror shows only the face of your avatar. Instead of loading seperate images for full-body and face, I figured I could mask off the bottom part of the full-body images for this mirror, saving me work and space. The masking worked like I wanted in the local host, all was good.
When I got back to the tool, however, it was no longer working. Images that had a mask applied to them were completely invisible. When inspecting the page, it looked like they were supposed to be there. I came across this thread a thread on StackOverflow that said this:
Thanks!
TLDR:
I want to use masks (masking out part of an image with another image using css) in my html based game, but neither Edge, Firefox or Chrome seem to support this when opening the html as a file, ie: A://index.html. Is there a way to make it work, or should I just avoid using masks?
Long version:
I'm creating a game with Sugarcube, using Visual Studio Code and Twee. At first, I was using a live-server to preview the game, which would host the index locally. Because that became slower as the game grew, I stopped using that and just opened the index file in the browser, which I realise is what you usually do when you download html twine games. The file is then read by the browser as file:///A:/folder/index.html or a variation of that (this is relevant).
While working with the live server, I created a 'tool' that allows the user to modify their avatar. This 'tool' uses masks to function:
There's a picture of a round mirror. The mirror shows only the face of your avatar. Instead of loading seperate images for full-body and face, I figured I could mask off the bottom part of the full-body images for this mirror, saving me work and space. The masking worked like I wanted in the local host, all was good.
When I got back to the tool, however, it was no longer working. Images that had a mask applied to them were completely invisible. When inspecting the page, it looked like they were supposed to be there. I came across this thread a thread on StackOverflow that said this:
And even though it's a 10-year old thread, I think that's the problem. Then I realized that everyone plays all these games as files, not as hosted html pages. Which means the masks won't ever work. My question then is: is that correct? Does anyone know if there's a workaround? Or should I just look for a solution that takes a different approach and avoid masks altogether?The problem is accessing your page using file:// instead of https://
Firefox and Chrome (and maybe others) will silently fail when attempting to apply a mask if you access your HTML file using the file:// protocol. You will instead see the entire CSS element masked out completely (i.e. it disappears, but it still occupies space on the screen). To fix it, you need to either open your page via localhost:// (eg, using a local Apache server) or upload to your remote server and test it from there.
Thanks!