Jump to content

Sprite - Texture Swap sometimes not working


ostrichegret
 Share

Recommended Posts

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

 

 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...