Jump to content

Using movie clips and replacing images


Recommended Posts

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);    }
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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.

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.


  • Recently Browsing   0 members

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