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();
}
Well there could be many reasons, but in your specific case, I must assume:
2048x2048
, max size depends on what phones support, this can varies and is subject to change)multiatlas
. link to documenationInfo: 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.