Sprite - Texture Swap sometimes not working

[ostrichegret]

Hi,

I want to dynamically swap sprite texture ( i want it to be able to get texture from internet ), but i don't know why it sometimes not working, it become blank.

i didn't use the  requestAnimationFrame(animate) loop to minimize resources usage.

and, can i resize sprite using drag? touch pinching ?

Thank You

 

the sample code :

var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

var bol = false;

// create a texture from an image path
var texture = PIXI.Texture.fromImage('_assets/flowerTop.png');

// create a second texture
// var secondTexture = PIXI.Texture.fromImage('_assets/eggHead.png');

// create a new Sprite using the texture
var dude = new PIXI.Sprite(texture);

// center the sprites anchor point
dude.anchor.set(0.5);

// move the sprite to the center of the screen
dude.position.x = renderer.width / 2;
dude.position.y = renderer.height / 2;

stage.addChild(dude);

// make the sprite interactive
dude.interactive = true;

dude.on('click', function ()
{
    bol = !bol;

    if(texture){
        texture.destroy();
    }

    if(bol)
    {      

        texture = PIXI.Texture.fromImage('_assets/flowerTop.png');
        dude.texture = texture;
    }
    else
    {

        texture = PIXI.Texture.fromImage('_assets/eggHead .png');
        dude.texture = texture;
    }

   renderer.render(stage);
});

function animate() {
    requestAnimationFrame(animate);

    // just for fun, let's rotate mr rabbit a little
    dude.rotation += 0.1;

    // render the stage
    renderer.render(stage);
}

renderer.render(stage);

 

 

 

 

[ivan.popelyshev]

texture = PIXI.Texture.fromImage('_assets/eggHead .png');

You have a space there

[ostrichegret]

5 hours ago, ivan.popelyshev said:

texture = PIXI.Texture.fromImage('_assets/eggHead .png');

You have a space there

sorry i forgot the space, but even with space, sometimes the texture swap is failed

https://pixijs.github.io/examples/index.html?s=demos&f=texture-swap.js&title=Texture Swap

var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

var bol = false;

// create a texture from an image path
var texture = PIXI.Texture.fromImage('_assets/flowerTop.png');

// create a second texture
// var secondTexture = PIXI.Texture.fromImage('_assets/eggHead.png');

// create a new Sprite using the texture
var dude = new PIXI.Sprite(texture);

// center the sprites anchor point
dude.anchor.set(0.5);

// move the sprite to the center of the screen
dude.position.x = renderer.width / 2;
dude.position.y = renderer.height / 2;

stage.addChild(dude);

// make the sprite interactive
dude.interactive = true;

dude.on('click', function ()
{
    bol = !bol;

    if(texture){
        //texture.destroy();
    }

    if(bol)
    {      

        texture = PIXI.Texture.fromImage('_assets/flowerTop.png');
        dude.texture = texture;
    }
    else
    {

        texture = PIXI.Texture.fromImage('_assets/eggHead.png');
        dude.texture = texture;
    }

   renderer.render(stage);
});

function animate() {
    requestAnimationFrame(animate);

    // just for fun, let's rotate mr rabbit a little
    dude.rotation += 0.1;

    // render the stage
    renderer.render(stage);
}

renderer.render(stage);

[ivan.popelyshev]

if you uncommend //secondTexture then it will work. The thing is, fromImage of texture that wasnt loaded before happens asynchronously.

[ostrichegret]

6 hours ago, ivan.popelyshev said:

if you uncommend //secondTexture then it will work. The thing is, fromImage of texture that wasnt loaded before happens asynchronously.

I found this :

var img = new Image();img.src = 'my/url/image.png';var base = new PIXI.BaseTexture(img),    texture = new PIXI.Texture(base);// return you the texture

 

Thank you

[ivan.popelyshev]

On 28.07.2016 at 3:47 AM, ostrichegret said:

I found this :

var img = new Image();img.src = 'my/url/image.png';var base = new PIXI.BaseTexture(img),    texture = new PIXI.Texture(base);// return you the texture

 

Thank you

That's the same as fromImage(). You need to use async interface to make sure thae image is pre-loaded .Please look at https://github.com/kittykatattack/learningPixi#displaying-sprites