search

phoboslab / Impact

HTML5 Game Engine
MIT License
1.99k stars 204 forks source link

Issue with Pong Example #88

Closed Descent098 closed 3 years ago

Descent098 commented 3 years ago

I don't know if this repo is associated with the website with the demos, but one of the examples on the site (pong) has a bug that keeps the game from loading.. The error seems to be coming from this line and reads:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at Object.getImagePixels (file:///C:/Users/Kieran/Desktop/pong/lib/impact/impact.js:225:10)
    at Class._loadMetrics (file:///C:/Users/Kieran/Desktop/pong/lib/impact/font.js:124:15)
    at Class.onload (file:///C:/Users/Kieran/Desktop/pong/lib/impact/font.js:20:8)
    at Class.onload (file:///C:/Users/Kieran/Desktop/pong/lib/impact/impact.js:509:19)

This keeps the loading bar from progressing, and causes the game not to load. Here is a screenshot:

image

I am not familiar enough with the codebase, or these low level DOM operations enough to submit a patch, but thought it was worth flagging.

phoboslab commented 3 years ago

You're loading the game directly from disk (i.e. by just double clicking the index.html). When using the file:/// protocol many DOM operations are not permitted. This is one of them. Loading MP3/OGG files this way has similar problems if I recall correctly. Generally loading through file:/// is not supported by Impact and I don't think there's much we can do about it.

The fix is to load the game through an HTTP Server: Upload it somewhere or start a local server in this directory. If you have php installed you can for instance start php -S localhost:8080 in this directory and then access the game through http://localhost:8080 in the browser. Python and NodeJS have similar HTTP Servers built in for testing and development.

Descent098 commented 3 years ago

@phoboslab Makes sense, thanks for the explanation and your work maintaining this project. Is it possible to chuck that up on the site just as a note for other people like me?

phoboslab commented 3 years ago

It's in the Getting Started guide, right in the first paragraph :)