title: Loading texture atlas from base64 URI Phaser 3
body: <p>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 <a href="https://supernapie.com/blog/loading-assets-as-data-uri-in-phaser-3" rel="nofollow noreferrer">here</a>.</p>
  
  <p>I'm using Webpack and <code>url-loader</code> to pull in base64 encoding for my assets, and I'm loading them like this: </p>
  
  <pre><code>import platformSrc from './images/platform.png';
  import triggerSrc from './images/trigger.png';
  </code></pre>
  
  <p>Then, I'm using the <code>preload()</code> function to add them to my texture manager.</p>
  
  <pre><code>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) =&gt; {
      this.cache.audio.add('sfx', buffer);
      nLoaded++;
      if (nLoaded &gt;= assetList.length) {
        var actualCreate = this.createGameObjects.bind(this);
        actualCreate();
      }
    }, (e) =&gt; { 
      console.log("Error with decoding audio data"); 
      nLoaded++;  
      if (nLoaded &gt;= assetList.length) {
        var actualCreate = this.createGameObjects.bind(this);
        actualCreate();
      }
    });
  }
  </code></pre>
  
  <p>All of this works. My <strong>issue</strong> is trying to load an atlas using this method. I have a <code>atlas.png</code> and <code>atlas.json</code> file containing a few packed images. I created this atlas with the <a href="https://www.leshylabs.com/apps/sstool/" rel="nofollow noreferrer">Leshy SpriteSheet Tool</a> and exported in the <code>JSON-TP-Array</code> format. </p>
  
  <p>I have tried loading my atlas like this: </p>
  
  <pre><code>this.load.atlas('atlas', atlasImg, atlasJson);
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>this.textures.addAtlas('atlas', atlasImg, atlasJson);
  </code></pre>
  
  <p>and this: </p>
  
  <pre><code>this.textures.addBase64('atlasImg', atlasImg);
  this.json.cache.add('atlasJson', atlasJson);
  this.load.atlas('atlas', 'atlasImg', 'atlasJson');
  </code></pre>
  
  <p>All to no avail. I keep getting this error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Failed to execute 'texImage2D' on
    'WebGLRenderingContext': No function was found that matched the
    signature provided.</p>
  </blockquote>
  
  <p>I've been pouring over the <a href="https://photonstorm.github.io/phaser3-docs/Phaser.Textures.TextureManager.html" rel="nofollow noreferrer">TextureManager</a> documentation trying to figure out what I'm missing, but can't seem to put it together. Any help is greatly appreciated. </p>