loadTexture() not firing txLoaded event inline unless at least one animation loop has occurred

[hiratariq]

We have encountered this problem in our code, where we intend to access the width of the rendered text, and to do that we force it to loadTexture(). For consistency reasons, we rely on txLoaded event to set the renderWidth of the element, in this case we access it immediately after executing loadTexture(). However, it does not work as expected because txLoaded fails to fire inline the first time. This code from this jsfiddle best explains the problem.

class LoadTextureExample extends lng.Application {
	static _template() {
		return {
    	Text1:{ x: 0, y: 0 },
    }
	}
  
  _init() {
  		let renderWidth;
  		this.tag('Text1').on('txLoaded', () => {
      	renderWidth = this.tag('Text1').renderWidth;
      	console.log("Text1 loaded");
        });
      
      requestAnimationFrame(() => { // Frame 1
      	console.log('txLoaded does not execute in between 1 and 2')
        this.tag('Text1').patch({ text: { text: 'Text one', textColor: 0xffffffff }});
        console.log(1);
        this.tag('Text1').loadTexture(); // console logs Text1 loaded after 2 and not inline, bug?
        console.log('renderWidth', renderWidth); // as a result this is undefined
        console.log(2);
        
        requestAnimationFrame(() => { // Frame 2
          console.log('at least one render loop has occurred, now txLoaded executes inline');
          this.tag('Text1').patch({ text: { text: 'Text one one', textColor: 0xffffffff }});
          console.log(1);
          this.tag('Text1').loadTexture(); // now console logs Text1 loaded inline i.e. before 2
          console.log('renderWidth', renderWidth); // this is 230, as expected
          console.log(2);
        });
      });
    }
}

const options = {
	stage: {
		w: 250,
		h: 250,
		clearColor: 0xFF000000,
		useImageWorker: false
	},
	debug: true
}
const app = new LoadTextureExample(options);
document.body.appendChild(app.stage.getCanvas());

[frank-weindel]

Hi @hiratariq! Sorry for the delay. Much of the team has been on vacation.

Unfortunately, this is by design. We do not call txLoaded for a texture until it and its Element are "Activated" (see Lifecycle Events). This activation process does not occur until the first render loop.

If you're using loadTexture() in this way, you can actually access the w/h of the texture directly:

class LoadTextureExample extends lng.Application {
	static _template() {
		return {
    	Text1:{ x: 0, y: 0 },
    }
	}
  
  _init() {
    console.log('txLoaded does not execute in between 1 and 2')
    this.tag('Text1').patch({ text: { text: 'Text one', textColor: 0xffffffff }});
    this.tag('Text1').loadTexture();
    console.log('renderWidth', this.tag('Text1').texture.source.w);
    console.log('renderHeight', this.tag('Text1').texture.source.h);
  }
}

https://jsfiddle.net/uxdnr1zt/