Game doesn't work on webbrowser and especially safari

[Felicia_Debye]

I am in the process of testing my game and have therefore set up an Apache web server on my Windows machine from where I host the game. On my Windows and Android devices the game loads, but in the web view some pictures are only shown as black boxes. When I call the page from the same link on my Apple devices, the page appears but not even the boot scene is executed. What could be the reason for this?

main.js:
var graphics;
var touch = false;

window.addEventListener(‘load’, function() {

//game configuration
var game = new Phaser.Game({
"title": "infoteam-Universe",
"width": 1920,
"height": 1080,
"type": Phaser.WEBGL,
"backgroundColor": "#88F",
"parent": "game-container",
"physics": {
    default: 'arcade',
    arcade: {
        gravity: { y: 1080 },
        debug: false,
    }
},
"scale": {
    "mode": Phaser.Scale.FIT,
    "autoCenter": Phaser.Scale.CENTER_BOTH
},
"input": {
	activePointers: 3
},
dom: { 
	createContainer: true } 
});
game.scene.add("Boot", Boot, true);

});

class Boot extends Phaser.Scene {

preload() {
	this.load.pack("preload-pack", "assets/preload-pack.json");
}

update() {
    //start first scene of game
	this.scene.start("Preload");
}

}

And the view on my IPad:

[Felicia_Debye]

Here are two more pictures, one in Mozilla Firefox (with pictures) and one in Chrome (without pictures). Whereby the pictures are displayed on the PC in both browsers.

[Thyebe]

Some suggestions:

1. Declare var game; outside the document.addEventListener;
2. Add the key

       scene: [Boot]

in the game config and remove

       game.scene.add("Boot", Boot, true);

3. Add

      constructor(){ 
            super("Boot");
      }

before the “create()” method.

After these changes, run the game and see if the problem persist.

[Felicia_Debye]

Unfortunately it is still the same problem…

[Thyebe]

Could you please share the entire modified code?

I will try to run it on my PC

[David_Montoya]

Hi, I was also having some problems with my game in apple devices, one of the issues was that I was using some JS new functionalities, like default parameters on the functions, which is not supported on IOs browsers.
Because there is no console in mobile browsers, is very useful to have a message log in the top of the webpage, I used this code :

HTML:
< div id=“prompt” style=“position: absolute;color:red; font-size: large;”> < /div >

JS:
window.onerror = function (e) {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
document.getElementById(‘prompt’).innerHTML = e.toString();
}

Hope that helps you a little

[BlunT76]

Hi,
For mobile dev, you can use remote debuging, more info here

How to debug JavaScript code with mobile browsers

For the new js functionalities, webpack and babel can help you to transpile your code to es5.
I personnaly always use the Phaser 3 webpack template, all the config is already done.