Spritesheet not loaded in Phaser.js

Question

I load a spritesheet in preload-method and in the create-method i assign and present it. this is working if i test it locally in the browser, but when i start the server with ip and want to test it on my phones browser the spritesheet is just black - sound is playing.

I also renamed the create function and try to call it in the callback-function of this.load.on("complete") or a after a timeout. No success.

The sheets size is 6400x720 (5 images, 1280x720).

  preload() {

    //called but also not working
    // this.load.on('complete', async () => {
    //   console.log("LOADING COMPLETE ");
    // })

    //load audio
    if (!!this.audioFilename) {
      this.load.audio(this.audioFilename, "assets/sounds/" + this.audioFilename);
    }

    //load background sheet
    this.load.spritesheet(`intro-sheet-${this.spriteFilename}`, "assets/spritesheets/" + this.spriteFilename, {
      frameWidth: 1280,
      frameHeight: 720
    });
  }


create() {

    //play background audio
    if (!!this.audioFilename) {
      this.audioSound = this.sound.add(this.audioFilename);
      this.audioSound.play({
        loop: true,
        volume: 0
      });
      this.tweens.add({
        targets: this.audioSound,
        volume: 1,
        duration: 100
      });
    }

    //prepare background animation
    this.background = this.add.sprite(ScreenHelper.sceneWrapperSize.width, ScreenHelper.sceneWrapperSize.height, `intro-sheet-${this.spriteFilename}`);
    this.anims.create({
      key: `intro-sheet-${this.spriteFilename}-anim`,
      frames: this.anims.generateFrameNumbers(`intro-sheet-${this.spriteFilename}`),
      frameRate: this.config?.animation?.framerate ?? 5,
      repeat: this.config?.animation?.repeat ?? -1,
      delay: this.config?.animation?.delay ?? 0
    });
    this.background.setPosition(0, 0)
    this.background.setOrigin(0, 0)
    this.background.setDisplaySize(ScreenHelper.sceneWrapperSize.width, ScreenHelper.sceneWrapperSize.height)
    this.background.play(`intro-sheet-${this.spriteFilename}-anim`);

    //fade in scene
    this.cameras.main.fadeIn(1250, 1, 1, 1)

    //show story text
    this.showText()

    // await AsyncHelper.delay(1000);

    //present next button
    this.presentDoneButton();
  }

Answer 1

Well there could be many reasons, but in your specific case, I must assume:

1. The music is not playing, since on mobile music doesn't play without user interaction (atleast one user touch). To test this out just create the phaser game on a button click or put a global phaser input event on touch that starts the music or so.
2. The sprite image file is too big (the max dimensions), for the phone (try to keep your sprite images up to 2048x2048, max size depends on what phones support, this can varies and is subject to change)
   btw.: sprites are not intended for background images, they are thought for animations (small images). For static images use simple images. If you want to keep the loading process easier and bundled look into multiatlas. link to documenation

Info: In you specific case, it might even work to stack you images into 2 x 3 image, that results in a 2560 x 2160 big image, but bare in mind some phones (especially older once) might still have the same problem, even if it works on yours, and also that your are actually misusing a feature.