Missing frame on initial load

[PaulB-H]

Sometimes, only on live server, even though the "tiles" spritesheet loads, we get a texture error.

Mashing reload / ctrl+shift r (to force reload without cache) can sometimes reproduce it.

Only happens on live server, cannot duplicate on development

[PaulB-H]

When logging the total number of frames for the sprite sheet, it can occasionally only list 1.

The issue was NOT resolved by re-running the preload scene, currently doing a full page reload when this is detected, not optimal but at least detectable now...

[PaulB-H]

Implemented page-reload workaround with commit 9f711ed

Leaving the issue open, hoping to find a proper fix...

[PaulB-H]

Seems to be resolved by bypassing Cloudflare's cache by putting the site into development mode... Confused to why this resolved the issue, since it appears the image appears to have been sent/received OKAY even with Cloudflare's cache enabled...

[PaulB-H]

Created page rule on cloudflare to bypass cache for paulbh.com/breakout, since development mode only lasts for 3 hours.

[PaulB-H]

Not resolved, have been able to replicate this since enabling development mode and or the page rule... 😩

[PaulB-H]

Disabling cache in NGINX not resolved

[PaulB-H]

Not resolved by pausing Cloudflare on site all-together...

[PaulB-H]

Updated PM2 on VPS - Not resolved

[PaulB-H]

After more testing tonight, disabling Cloudflare on the site all-together does in fact seem to resolve the issue.

Not wanting to do this, I enabled "Optimized Delivery" and "Rocket Loader™" from Cloudflare under "Speed → Optimizations", and it seems to happen significantly less.... but maybe not totally resolved.

Edit: after more testing, issue still rarely reproduceable. Disabling CloudFlare may have helped because the assets were served just a bit faster than with it, avoiding the bug mentioned lower down 👇

[PaulB-H]

Still definitely able to replicate in Firefox at least... Texture asserts true, image loads, but treated as having one frame...

Will try loading normal map as image / removing normal map tomorrow...

[PaulB-H]

Have not been able to replicate on mobile Firefox OR Chrome since changes, so that's nice at least...

[PaulB-H]

Issue in phaser with loading normal map with spritesheets.

After speaking to others in Discord, it turned into:

phaserjs/phaser#6491

[PaulB-H]

Work-around from samme:

this.load.image('face-normalMap', 'assets/sprites/metalface78x92-n.png');
this.load.spritesheet('face', 'assets/sprites/metalface78x92.png', { frameWidth: 78, frameHeight: 92 });
this.load.once('complete', function (loader) {
    const sheet = loader.textureManager.get('face');
    const normalMap = loader.textureManager.get('face-normalMap');

    sheet.setDataSource(normalMap.getSourceImage());
});

[PaulB-H]

Work-around from samme:

this.load.image('face-normalMap', 'assets/sprites/metalface78x92-n.png');
this.load.spritesheet('face', 'assets/sprites/metalface78x92.png', { frameWidth: 78, frameHeight: 92 });
this.load.once('complete', function (loader) {
    const sheet = loader.textureManager.get('face');
    const normalMap = loader.textureManager.get('face-normalMap');

    sheet.setDataSource(normalMap.getSourceImage());
});

So this worked "mostly", except would occasionally result in the normal map being loaded as the image for the spritesheet... Resulting in a psychedelic adventure:

This was seemingly resolved by updating from Phaser 3.55 to Phaser 3.6

HOWEVER

The issue with missing frames still exists when trying to load the normal map the "new" way, even on 3.6:

this.load.spritesheet({
  key: SHEETS.Tiles,
  url: "assets/main-tileset/breakout-extruded.png",
  normalMap: "assets/main-tileset/breakout-extruded_n.png",
  frameConfig: {
    frameWidth: 16,
    frameHeight: 16,
    spacing: 2,
    margin: 1,
    startFrame: 0,
    endFrame: 99,
  },
});

So issue phaserjs/phaser#6491 in Phaser still stands, but I am closing this as my workarounds are working.

edit.
I thought I was still on 3.55, but checking commits it seems I updated to phaser 3.6 in commit fa691ca, did I manually update package.json and not actually update phaser? Regardless, even after this change (or reinstall) the issue trying to load normal map with spritesheet still exists.

[PaulB-H]

This has been fixed in Phaser 3.70.0

phaserjs/phaser#6665

phaserjs/phaser#6491 (comment)

We can go back to the modern way of loading normal maps with spritesheets:

this.load.spritesheet({
   key: SHEETS.Tiles,
   url: "assets/main-tileset/breakout-extruded.png",
   normalMap: "assets/main-tileset/breakout-extruded_n.png",
   frameConfig: {
      frameWidth: 16,
      frameHeight: 16,
      ...
   },
});