Загрузка атласа текстур из base64 URI Phaser 3

#javascript #phaser-framework #2d-games #texture-atlas

#javascript #phaser-фреймворк #2d-игры #текстура-атлас

Вопрос:

Я создаю игру с Phaser 3, которая будет развернута и запущена внутри базовой оболочки Chromium. У меня нет возможности добавить сервер за кулисами для обработки доставки изображений (и предотвращения проблем с CORS), поэтому я загружаю свои ресурсы в свою игру, используя метод, описанный здесь .

Я использую Webpack и url-loader использую кодировку base64 для своих ресурсов, и я загружаю их следующим образом:

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

Затем я использую preload() функцию, чтобы добавить их в свой менеджер текстур.

 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();
    }
  });
}
  

Все это работает. Моя проблема заключается в попытке загрузить атлас с помощью этого метода. У меня есть atlas.png atlas.json файл и, содержащий несколько упакованных изображений. Я создал этот атлас с помощью инструмента Leshy SpriteSheet и экспортировал в JSON-TP-Array формате.

Я попытался загрузить свой атлас следующим образом:

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

и это:

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

и это:

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

Все безрезультатно. Я продолжаю получать эту ошибку:

Ошибка неперехваченного типа: не удалось выполнить ‘texImage2D’ в ‘WebGLRenderingContext’: не найдена функция, соответствующая предоставленной подписи.

Я просматривал документацию TextureManager, пытаясь выяснить, чего мне не хватает, но, похоже, не могу собрать это воедино. Любая помощь приветствуется.