Loading texture atlas from base64 URI Phaser 3

Question

I'm building a game with Phaser 3 that will be deployed and run inside a basic Chromium shell. I don't have the ability to add a server behind the scenes to handle image delivery (and prevent CORS issues), so I'm loading my assets into my game using the method described here.

I'm using Webpack and url-loader to pull in base64 encoding for my assets, and I'm loading them like this:

import platformSrc from './images/platform.png';
import triggerSrc from './images/trigger.png';

Then, I'm using the preload() function to add them to my texture manager.

preload() {
  const assetList = ['platform', 'trigger', 'audio', 'audioJson'];
  let nLoaded = 0; 

  this.cache.json.add('audioJson', audioJson);
  nLoaded++;

  this.textures.addBase64('platform', platformSrc);
  nLoaded++;
  this.textures.addBase64('trigger', triggerSrc);
  nLoaded++; 

  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  audioCtx.decodeAudioData(toArrayBuffer(audioSrc), (buffer) => {
    this.cache.audio.add('sfx', buffer);
    nLoaded++;
    if (nLoaded >= assetList.length) {
      var actualCreate = this.createGameObjects.bind(this);
      actualCreate();
    }
  }, (e) => { 
    console.log("Error with decoding audio data"); 
    nLoaded++;  
    if (nLoaded >= assetList.length) {
      var actualCreate = this.createGameObjects.bind(this);
      actualCreate();
    }
  });
}

All of this works. My issue is trying to load an atlas using this method. I have a atlas.png and atlas.json file containing a few packed images. I created this atlas with the Leshy SpriteSheet Tool and exported in the JSON-TP-Array format.

I have tried loading my atlas like this:

this.load.atlas('atlas', atlasImg, atlasJson);

and this:

this.textures.addAtlas('atlas', atlasImg, atlasJson);

and this:

this.textures.addBase64('atlasImg', atlasImg);
this.json.cache.add('atlasJson', atlasJson);
this.load.atlas('atlas', 'atlasImg', 'atlasJson');

All to no avail. I keep getting this error:

Uncaught TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': No function was found that matched the signature provided.

I've been pouring over the TextureManager documentation trying to figure out what I'm missing, but can't seem to put it together. Any help is greatly appreciated.

Loading texture atlas from base64 URI Phaser 3

0 Answers0