- 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?
Thanks!