Build/Index.js gives errors when using latest version of Microsoft Edge

[MIsterHunterWolf]

Since I first started using PIxelbox, I noticed that games would run just fine in PIxelbox, but when I would use Microsoft Edge to play them, the game would fail to load.

I decided to look a little bit further to see why, & it led me to an error & a warning in Build/Index.js, stating the following:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Just to be sure, I checked another project, & running it gave me the same error, although I didn't get the warning, even though I didn't mess with anything audio-related in either project. Both of these projects were created in the same version of Pixelbox.

The only 2 things I can think of for causing these errors is either 1. Edge cannot properly run Pixelbox games due to Edge expecting something the project's file structure/content doesn't account for, or 2. My version of Windows 10 being stuck at a 2018 build because of hardware issues is affecting Edge's ability to properly execute Index.js.

I'm not going to doubt the second one, but I find it unlikely, as the version of Windows 10 being run seems to be inconsequential to these messages. It should be up to Edge to handle all the game's code and data, & not the operating system itself.

Since none of the resources added to either project seem to affect this problem, & that the problem lies in Index.js, a file created alongside a new project, I don't think that sharing any files of the problem and games are absolutely necessary, as I cannot think of anything I haven't already stated here that needs to be included. However, if you think I should add a file for further investigation, I will do so.

[MIsterHunterWolf]

After using a website to make the code easier to read, it appears the error happens here:

for (var h = u.getImageData(0, 0, n, o).data, l = [], p = 0; p < h.length; p += 4) h[p + 3] <= 1 || l.push((new t).fromPixel(h, p));

As for what it does, I'm not sure, but after Installing Firefoxt to test the program there, it gives the same error, saying

Uncaught DOMException: The operation is insecure.

[cstoquer]

The first error is probably related to cross-origin data. This is a security limitation with how JavaScript can use image with HTML canvas. I suppose you are trying to run the game by opening the index.html file directly in your browser.

For this to work, you need to use a local server to serve your game so that all file and images come from the same origin. Pixelbox editor comes with a built-in server to test your game in your browser: click on the button top-right corner of the editor. This will copy a link (it should looks something like http://localhost:53831/) to Pixelbox server. Then paste this link in the address bar of your browser.

When you want to distribute your game, you have several options:

• Upload a build on a real server (e.g. itch.io or a GitHub page)
• Embed your game in an Electron or Node Webkit application
• If you want to distribute the html file itself without asking the user to run a local server, you would need to encode and include all images in the JavaScript (using base64 encoding or your own system). This last solution is definitely possible but is a bit convoluted.

[epsseniyer]

change browser