Assist wanted loading SpriteFrames dynamically from JSON configuration in Cocos Creator 3.8.6 – Cocos Creator

Whats up Cocos Creator group,

I’m growing a 2D sport in Cocos Creator 3.8.6 the place every degree has a unique configuration saved in a JSON file. The JSON appears like this:

{
  "Ranges": [
    { "id": 1, "bg": "BgLevel1", "pointToBeat": 20 },
    { "id": 2, "bg": "BgLevel2", "pointToBeat": 20 },
    { "id": 3, "bg": "BgLevel3", "pointToBeat": 20 },
    { "id": 4, "bg": "BgLevel4", "pointToBeat": 20 },
    { "id": 5, "bg": "BgLevel5", "pointToBeat": 20 }
    // ... more levels
  ]
}

I load this JSON in a GameManager singleton part, which parses and shops the extent information. Then, in my SetLevel part, I attempt to load the background picture dynamically primarily based on the bg property of the present degree.

Right here is the related code snippet from SetLevel.ts the place I try to load the sprite:

const path = `Ranges/${levelData.bg}`; // e.g. "Ranges/BgLevel4"

assets.load(path, SpriteFrame, (err, spriteFrame) => {
  if (err) {
    console.error(`Error loading sprite at ${path}:`, err);
    return;
  }
  this.backgroundSprite.spriteFrame = spriteFrame;
});

My photographs are .webp information positioned inside belongings/assets/Ranges/. Within the editor, after I click on on these photographs, they present as sort SpriteFrame, so I anticipate assets.load to work with SpriteFrame sort.

Nevertheless, I get the next error at runtime:

Error loading sprite at Ranges/BgLevel4: Error: Bundle assets doesn’t include Ranges/BgLevel4

I’ve verified:

• The information are contained in the assets folder.
• The trail is appropriate and matches the file names precisely (case-sensitive).
• The mission is saved and rebuilt after including the belongings.
• backgroundSprite is correctly assigned within the editor.

Thanks very a lot upfront!