New set texture doesn't show up

[josescxavier]

Hi,

I'm having a problem after setting a texture. It doesn't show up. It only show the new texture after modify it.

Here is the code where I create the objects:

this.pixicanvas = new PIXI.Application({width: 600, height: 800});
this.rx_image = null;
this.zoom_min = 1;
this.aim_tmp = 0;
this.state = {
   pixi_height: 0,
   pixi_width: 0,
};
this.handleZoom = this.handleZoom.bind(this);
this.rx_image = new PIXI.Sprite(PIXI.Texture.EMPTY);
this.container_points = new PIXI.Container();

Here where I update the texture:

updateRxSprite(new_img){
    PIXI.loader.reset();
    PIXI.loader.add('resource-key', new_img).load( (loader, resources) => {
      this.rx_image.texture = PIXI.Texture.fromImage('resource-key');
      
      var scale = 1;
      var scale_screen = this.pixicanvas.screen.width;
      var scale_rx_image = this.rx_image.width;
      var aspect_ratio_sprite = this.rx_image.width/this.rx_image.height;
      var aspect_ratio_screen = this.pixicanvas.screen.width/this.pixicanvas.screen.height;
      
      if(aspect_ratio_sprite<=aspect_ratio_screen){
        scale_screen = this.pixicanvas.screen.height;
        scale_rx_image = this.rx_image.height;
      }

      if(scale_screen > 0 && scale_rx_image > 0){
        scale = scale_screen / scale_rx_image;
      }

      this.rx_image.scale.x = scale;
      this.rx_image.scale.y = scale;

      this.zoom_min = scale;
      
      this.rx_image.x = (this.pixicanvas.screen.width-this.rx_image.width)/2;
      this.rx_image.y = (this.pixicanvas.screen.height-this.rx_image.height)/2;

      this.rx_image.on('pointerdown', this.props.onClick);

      this.d3zoom_element.on(".zoom", null);
      this.d3zoom_behavior = D3ZOOM.zoom().scaleExtent([this.zoom_min, 5]).on("zoom", this.handleZoom);
      this.d3zoom_element.call(this.d3zoom_behavior);
      var new_transform = D3ZOOM.zoomIdentity;
      new_transform.k = this.rx_image.scale.x;
      new_transform.x = this.rx_image.position.x;
      new_transform.y = this.rx_image.position.y;
      this.d3zoom_element.call(D3ZOOM.zoom().transform, new_transform);

    });
  }

After this code the new texture isn't showed up until I modify it, per example, set a new position to sprite.

Before it stopped work I added the sprite to stage after set the new texture. Now because I need the sprite on a specific Z order I added the sprite with a EMPTY texture and only set the new texture after the user upload it.

What I'm doing wrong?

[josescxavier]

One way I found to solve it is create a container and only create the sprice when get the texture uploaded:

    this.pixicanvas = new PIXI.Application({width: 600, height: 800});
    this.rx_image = null;
    this.zoom_min = 1;
    this.aim_tmp = 0;
    this.state = {
      pixi_height: 0,
      pixi_width: 0,
    };
    this.handleZoom = this.handleZoom.bind(this);

    this.container_rximage = new PIXI.Container();
    this.container_points = new PIXI.Container();

    this.pixicanvas.stage.addChild(this.container_rximage);
    this.pixicanvas.stage.addChild(this.container_points);

and:

  updateRxSprite(new_img){
    PIXI.loader.reset();
    PIXI.loader.add('resource-key', new_img).load( (loader, resources) => {
      this.rx_image = new PIXI.Sprite(PIXI.Texture.fromImage('resource-key'));

      var scale = 1;
      var scale_screen = this.pixicanvas.screen.width;
      var scale_rx_image = this.rx_image.width;
      var aspect_ratio_sprite = this.rx_image.width/this.rx_image.height;
      var aspect_ratio_screen = this.pixicanvas.screen.width/this.pixicanvas.screen.height;
      
      if(aspect_ratio_sprite<=aspect_ratio_screen){
        scale_screen = this.pixicanvas.screen.height;
        scale_rx_image = this.rx_image.height;
      }

      if(scale_screen > 0 && scale_rx_image > 0){
        scale = scale_screen / scale_rx_image;
      }

      this.rx_image.scale.x = scale;
      this.rx_image.scale.y = scale;

      this.zoom_min = scale;
      
      this.rx_image.x = (this.pixicanvas.screen.width-this.rx_image.width)/2;
      this.rx_image.y = (this.pixicanvas.screen.height-this.rx_image.height)/2;

      this.rx_image.on('pointerdown', this.props.onClick);

      this.container_rximage.addChild(this.rx_image);

      this.d3zoom_element.on(".zoom", null);
      this.d3zoom_behavior = D3ZOOM.zoom().scaleExtent([this.zoom_min, 5]).on("zoom", this.handleZoom);
      this.d3zoom_element.call(this.d3zoom_behavior);
      var new_transform = D3ZOOM.zoomIdentity;
      new_transform.k = this.rx_image.scale.x;
      new_transform.x = this.rx_image.position.x;
      new_transform.y = this.rx_image.position.y;
      this.d3zoom_element.call(D3ZOOM.zoom().transform, new_transform);

    });
  }

 

[ivan.popelyshev]

Your code is correct, its supposed to work.

Temporary Workaround: use addChildAt() to add element when you want it.

Real man solution: post a fiddle that doesnt work like its supposed to do, we'll investigate it.

[ivan.popelyshev]

Actually, now i see that you stumbled acros PIXI.TextureCache problem: loader reset does not empty it. Use "PIXI.utils.clearTextureCache()". 

[ivan.popelyshev]

One more workaround: use "resources["resource-key"].texture" instead of fromImage.

[josescxavier]

I was creating a simple fiddle to replicate my problem but couldn't achieve the same result. After looking on my project again (on a higher resolution monitor) I noticed that there is something on the center of the screen after load the new texture. The problem is that I update the stage to fill the browser window size and during this process I update the size of the sprite to fill it too. I was scaling up a 1x1pixel sprite which result on a high scale value. After load the new texture I didn't reset the scale so the width and height values are scaled up using the past high scale value. Resize the sprite to fill the window will result in a tiny point on the screen.

Example of output ( console.log( this.rx_image.width, this.rx_image.height, this.rx_image.scale.x ); ):

Quote

 

addChild: 1 1 1

Update: 914 914 914

Load new texture: 411300 411300 914

After resize: 1 1 0.0022222222222222222