Hello everybody! I have been noticed that Phaser has troubles to run on Google Chrome. I’m learning Phaser making read some tutorials. I have been some progress too. I want to be a game developer and I’m betting on the Phaser to start.
You’ll need to be more specific I’m afraid. Phaser was literally built using Chrome, it’s the first browser every new feature is tested in. So, detail what actually happens. What errors, what warnings, etc.
1 Like
Interesting, I usually get the best performance and had little problem with Chrome.
1 Like
Yes, I use Chrome also. BUT, I’ve also learned that you might have to restart Chrome and delete the browser cache to see changes. Usually after an hour, I start noticing the lack of updates (XAMPP and Chrome; I’ve given up on trying to use brackets due to loaded images are seen as “Infantry symbols”)
1 Like
For Chrome: Developer tools > Network > Disable cache
2 Likes
Hi, Rich! Just Chrome shows a big black screen according to code ( this is correct ) but it does not pass that point. When I get FireFox or even Edge, it works fine. Follow below some errors:
Access to XMLHttpRequest at ‘file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/assets/audio/chicken.ogg’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:57374
phaser.js:57424 Phaser.Loader error loading file: chickenSound from URL assets/audio/chicken.ogg
fileError @ phaser.js:57424
The image element contains cross-origin data, and may not be loaded.
at PIXI.WebGLRenderer.updateTexture (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:6618:8)
at PIXI.WebGLSpriteBatch.renderBatch (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:7918:37)
at PIXI.WebGLSpriteBatch.flush (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:7847:18)
at PIXI.WebGLSpriteBatch.end (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:7529:10)
at PIXI.WebGLRenderer.renderDisplayObject (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:6572:22)
at PIXI.WebGLRenderer.render (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:6538:10)
at Phaser.Game.updateRender (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:26560:23)
at Phaser.Game.update (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:26487:18)
at Phaser.RequestAnimationFrame.updateRAF (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:46326:19)
at _onLoop (file:///D:/amf/Capacity/Cursos%20On%20Line/Udemy/Game%20Programming/Phaser%20Game%20FrameWork/Complete%20Mobile%20Game%20With%20Phaser/Toddler%20Farm%20Animal/16-text/js/phaser.js:46310:30)
I have been done that. In fact, this happens when I run out of Brackets ( editor ). If I try under NotePad++ all time this happens but FireFox,Edge, IE works. So, I have to suspect that Chrome has some issue. See below ( the first message was too large ):
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
boot @ phaser.js:58387
phaser.js:26166 Phaser v2.3.0 | Pixi.js v2.2.8 | WebGL | WebAudio http://phaser.io 
phaser.js:5442 Uncaught DOMException: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
at PIXI.WebGLRenderer.updateTexture (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5442:8)
at PIXI.WebGLSpriteBatch.renderBatch (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6747:37)
at PIXI.WebGLSpriteBatch.flush (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6676:18)
at PIXI.WebGLSpriteBatch.end (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6358:10)
at PIXI.WebGLRenderer.renderDisplayObject (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5396:22)
at PIXI.WebGLRenderer.render (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5359:10)
at Phaser.Game.updateRender (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:26428:23)
at Phaser.Game.update (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:26354:18)
at Phaser.RequestAnimationFrame.updateRAF (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:44881:19)
at _onLoop (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:44865:30)
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/gameMusic.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:56337
phaser.js:55975 Phaser.Loader - audio[gameMusic]: error loading asset from URL assets/audio/gameMusic.wav
asyncComplete @ phaser.js:55975
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/gameMusic2.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:56337
phaser.js:55975 Phaser.Loader - audio[gameMusic2]: error loading asset from URL assets/audio/gameMusic2.wav
asyncComplete @ phaser.js:55975
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/eatingApple.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:56337
phaser.js:55975 Phaser.Loader - audio[eatingApple]: error loading asset from URL assets/audio/eatingApple.wav
asyncComplete @ phaser.js:55975
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/eatingCandy.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I have been done that. In fact, this happens when I run out of Brackets ( editor ). If I try under NotePad++ all time this happens but FireFox,Edge, IE works. So, I have to suspect that Chrome has some issue. See below ( the first message was too large ):
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
boot @ phaser.js:58387
phaser.js:26166 Phaser v2.3.0 | Pixi.js v2.2.8 | WebGL | WebAudio http://phaser.io
phaser.js:5442 Uncaught DOMException: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
at PIXI.WebGLRenderer.updateTexture (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5442:8)
at PIXI.WebGLSpriteBatch.renderBatch (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6747:37)
at PIXI.WebGLSpriteBatch.flush (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6676:18)
at PIXI.WebGLSpriteBatch.end (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6358:10)
at PIXI.WebGLRenderer.renderDisplayObject (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5396:22)
at PIXI.WebGLRenderer.render (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5359:10)
at Phaser.Game.updateRender (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:26428:23)
at Phaser.Game.update (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:26354:18)
at Phaser.RequestAnimationFrame.updateRAF (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:44881:19)
at _onLoop (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:44865:30)
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/gameMusic.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:56337
phaser.js:55975 Phaser.Loader - audio[gameMusic]: error loading asset from URL assets/audio/gameMusic.wav
asyncComplete @ phaser.js:55975
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/gameMusic2.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:56337
phaser.js:55975 Phaser.Loader - audio[gameMusic2]: error loading asset from URL assets/audio/gameMusic2.wav
asyncComplete @ phaser.js:55975
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/eatingApple.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
xhrLoad @ phaser.js:56337
phaser.js:55975 Phaser.Loader - audio[eatingApple]: error loading asset from URL assets/audio/eatingApple.wav
asyncComplete @ phaser.js:55975
phaser.js:56337 Access to XMLHttpRequest at ‘file:///D:/AMDEV/Games/VirtualPet2/assets/audio/eatingCandy.wav’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Even doing that, keeps not working.I’m in Phaser V2.3.0
It is phaser 2 and it is a really old version (here is phaser 3 category)
Here is the final official version of phaser 2: https://phaser.io/download/release/2.6.2
And here you can find latest version of phaser ce: https://github.com/photonstorm/phaser-ce
Phaser CE is the community edition of Phaser 2
You can try running your code with the final official version of phaser 2. It is quite stable as far as I know. You should also consider learning Phaser 3.
Thanks for the links and this short explanation about Phaser CE, my friend. I gonna get these links.
Hey there, I was just testing the Phaser3 examples on different browsers and i was puzzled by chrome’s performance. All examples are very slow, I don’t know if it’s my setup (macbook 2011 model with intel graphics card) but i can confirm that on firefox and safari all examples run really well and on chrome they are sluggish as hell. All browsers are up to date, i even reinstalled chrome and reset its settings.
however it’s not a problem with phaser, i tested pixi.js and three.js, some examples where the frames per seconds are shown reveal that chrome is 10x to 15x slower than firefox and safari. I’m pretty clueless there.
This example (three.js) gives me around 60fps on firefox and safari whereas on chrome i get only 4 fps
https://threejs.org/examples/#webgl_animation_cloth
maybe it’s just my setup, or can some confirm these awful results for chrome?
Thanks for the additional information.
The problem is that you’re not using a web server. You’re trying to just open the html file in Chrome and it won’t work due to security permissions. You can tell this from all the file:// errors in the log above. It wouldn’t say that if the files were coming from a web server. Sort that part out and Chrome will almost certainly work fine.
Rich, I’m doing some tests with these versions: Phaser 2.3.0, Phaser 3.0.0 and Phaser 3.15.1. As soon as I have concrete details, I’ll post answering your feedback. I’m using to code the Bracket editor that has a web server. I intend to run the same code and test under these versions above, to warning other friends from the community about results. Also, I’ll put the version of my browsers under test. Thanks for your attention.
Feel free to test the different versions, but you’ll find the same happens in them all. I understand that Brackets has a web server built-in, but if you get file:// errors then it’s not being used, or isn’t configured properly.
Hi, like I told you, I did a lot of test under the same code getting some versions of Phaser. My intend is to help others, and me too, just this. So follow below, results of test.
** Phaser versions **
Phaser 2.3.0
Phaser 2.6.2
Phaser 3.0.0
Phaser 3.15.1
** Browsers **
Google Chrome is up to date
Version 71.0.3578.98 (Official Build) (64-bit)
FireFox 64.0 (64 bits )
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
Internet Explorer 11
Update Version 11.0.101 (KB4483187)
** Editors **
Brackets
NotePad++
Test on Brackets editor ( running inside brackets )
Seems bracket pick the defaul browser in my case ( Google Chrome ).
#Google Chrome is up to date
Version 71.0.3578.98 (Official Build) (64-bit)
Phaser 2.3.0 - works
Phaser 2.6.2 - works
Phaser 3.0.0 - error: Uncaught TypeError: Cannot read property ‘add’ of undefined
at main.js:4
Phaser 3.15.1 - error: the same to Phaser 3.0.0
Test using NotePad++ ( running with “run menu” on NotePad++ )
NotePad++ allow us to choose the browser
Google Chrome is up to date
Version 71.0.3578.98 (Official Build) (64-bit)
Phaser 2.3.0 - a lot of errors in phaser library, how expected, for instance:
" Uncaught DOMException: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.
at PIXI.WebGLRenderer.updateTexture (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5442:8)
at PIXI.WebGLSpriteBatch.renderBatch (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6747:37)
at PIXI.WebGLSpriteBatch.flush (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6676:18)
at PIXI.WebGLSpriteBatch.end (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:6358:10)
at PIXI.WebGLRenderer.renderDisplayObject (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5396:22)
at PIXI.WebGLRenderer.render (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:5359:10)
at Phaser.Game.updateRender (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:26428:23)
at Phaser.Game.update (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:26354:18)
at Phaser.RequestAnimationFrame.updateRAF (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:44881:19)
at _onLoop (file:///D:/AMDEV/Games/VirtualPet2/js/library/phaser_v2.3.0/phaser.js:44865:30)"
Phaser 2.6.2 - the same like above
Phaser 3.0.0 - error: Uncaught TypeError: Cannot read property ‘add’ of undefined
at main.js:4
Phaser 3.15.1 - error: the same to Phaser 3.0.0
FireFox 64.0 (64 bits )
Phaser 2.3.0 - works
Phaser 2.6.2 - works
Phaser 3.0.0 - error: TypeError: game.state is undefined ( details below )
//initiate the Phaser framework
var game = new Phaser.Game(360, 640, Phaser.AUTO);
game.state.add(‘GameState’, GameState);
game.state.add(‘HomeState’, HomeState);
game.state.add(‘PreloadState’, PreloadState);
game.state.add(‘SetupState’, SetupState);
game.state.start(‘SetupState’);
Phaser 3.15.1 - error: the same to Phaser 3.0.0
Internet Explorer 11 : Update Version 11.0.101 (KB4483187)
Phaser 2.3.0 - works but sounds was affected ( no sounds: game music, actions music, etc )
Phaser 2.6.2 - the same 2.3.0
Phaser 3.0.0 - error: Unable to get property ‘add’ of undefined or null reference
//initiate the Phaser framework
var game = new Phaser.Game(360, 640, Phaser.AUTO);
game.state.add(‘GameState’, GameState);
game.state.add(‘HomeState’, HomeState);
game.state.add(‘PreloadState’, PreloadState);
game.state.add(‘SetupState’, SetupState);
game.state.start(‘SetupState’);
Phaser 3.15.1 - error: the same to Phaser 3.0.0
*** Called direct on browsers ( out of editors, open with… ) ***
#Google Chrome is up to date
Version 71.0.3578.98 (Official Build) (64-bit)
Phaser 2.3.0 - a lot of errors ( the same issues like shown above )
Phaser 2.6.2 - the same errors like 2.3.0 immediately above
Phaser 3.0.0 - error: Uncaught TypeError: Cannot read property ‘add’ of undefined
at main.js:4
Phaser 3.15.1 - error: the same to Phaser 3.0.0
FireFox 64.0 (64 bits )
Phaser 2.3.0 - works
Phaser 2.6.2 - works with this warning -> InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
Phaser 3.0.0 - error: TypeError: game.state is undefined[Learn More] main.js:4:1
file:///D:/AMDEV/Games/VirtualPet2/js/main.js:4:1
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
Phaser 3.15.1 - error: the same to Phaser 3.0.0
Internet Explorer 11 : Update Version 11.0.101 (KB4483187)
Phaser 2.3.0 - works but sounds was affected ( no sounds: game music, actions music, etc )
Phaser 2.6.2 - works but sounds was affected ( no sounds: game music, actions music, etc )
Phaser 3.0.0 - Unable to get property ‘add’ of undefined or null reference
Phaser 3.15.1 - error: Unable to get property ‘add’ of undefined or null reference
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
Phaser 2.3.0 - works
Phaser 2.6.2 - works
Phaser 3.0.0 - error: Unable to get property ‘add’ of undefined or null reference
Phaser 3.15.1 - error:Unable to get property ‘add’ of undefined or null reference
1 Like
You can’t run the same code on Phaser 2 and Phaser 3. They APIs are different. This is almost certainly why it doesn’t work.
Thanks, Rich. So, what version should I get? Just, I’m beginner in Phaser, not in development. I confess I’m a little concerned about what version I should start in Phaser. I did some silly games to my son ( 3 years old ) and when I tried to transfer the game to a cell phone, I had a surprise
Doesn’t matter too much which version you pick, as long as you’re consistent with it and the code in it.
1 Like