Using movie clips and replacing images

[pdiddles03]

I'm working on a space shooter for phones using Pixi.js.  I want to replace enemy ships with an explosion animation using multiple images of course. I am not using json files because I find it easier to declare each image seperately as part of the animation. How can I change these enemies from one texture to another texture based on collision?

 

This is my function where I define a Movie Clip.

 

function animatedObject(images, frameCount, x, y, vx, vy){    this.source = '';    this.textures = [];    this.x = x;    this.y = y;    this.vx = vx;    this.vy = vy;    for(var i =0; i < images.length; i++){        for(var j=0; j < frameCount; j++){            this.textures.push(new PIXI.Texture.fromImage(images[i]));        }    }    this.clip = new PIXI.MovieClip(this.textures);    this.clip.play();    this.clip.position.x = this.x;    this.clip.position.y = this.y;        stage.addChild(this.clip);    }

[achexi]

I'm not quite sure what the question is here, you can use setTexture to change textures though.

[Sawamara]

If I learned anything from the previous thread of mine ( http://www.html5gamedevs.com/topic/12676-need-help-with-spritesheets-and-pixijs/ ), it is the following:

 

Say you use multiple files for the explosion and the ship.

That means that you should be able to do the following:

ship.image1 = new PIXI.BaseTexture(image1) //If the image1 is already an image, otherwise use BaseTexture.fromImage(src)ship.image2 = new PIXI.BaseTextrue(image2)

Then, you declare the frames of animation from image 1, then from image 2:

ship.frames1 = [];ship.frames1.push(new PIXI.Texture(ship.image1,new PIXI.Rectangle(....));ship.frames2 = [];ship.frames2.push(new PIXI.Texture(ship.image2,new PIXI.Rectangle(....));

So when you initialize the ship, you will probably use the frame from your initial image, using something like this:
 

ship.sprite = new PIXI.Sprite(ship.frames1[0]);

And when you will need to use the explosion, you can just setTexture your way through it, like this:

ship.sprite.setTexture(ship.frames2[0]) //..... or whichever number your explosion animation currently stands)

Hope this helps. To clarify whether this approach works or not, I will try it out soon, and get back to you.

[pdiddles03]

My goal is I have either just a single texture or a movie clip, When my ship shoots the enemy, i want to replace them with a movie clip of it exploding.  I think Sawamara might have answered my question. I will have to wait tonight to try it out. This is a app I am going to be packaging into crosswalk project. I originally was doing this with just the 2d canvas then realized using crosswalk it was much to slow. Worked fine in the basic chrome browser but packaging as an app makes it slow. Hopefully doing it in webgl using pixi will speed it up.

[kyptov]

I had a problems with replacing and I made a DOC with ship and with bang. In the beginning ship.visible = true, bang.visible = false. And when I need to bang my ship I change visibility. 

 

Also my bang is a MovieClip and in time I need to bang my ship I call bang.play(). After the playing bang calls onComplete function. onComplete function make all I need after ship was banged (change visibility and other staff)

You can see it here http://xcraft.ru/battle/index.php?battle_id=07ead04acb34bbf0a142ff0510f253e6&autoplay - simple battle

and here http://xcraft.ru/battle/index.php?battle_id=838bf8090fd38e2cf87dcfbb0eb3a76d&autoplay - Mega Battle