Movie Clip Help

[v_nastey]

Hi everybody,

I'm new to PIXI and what I need to do is display sprites from an array.
What I have is an array of objects, sprites loaded from json with 4 items, 2 by 2 duplicates.

var arrCopy=shuffle([item1,item2,item1,item2]);

So, next I'm displaying the array into a 2x2 grid.

 

for(var i=0;i<2;i++){for(var j=0;j<2;j++){var tile = new PIXI.MovieClip(arrCopy);tile.position.x = 480+i*180;tile.position.y = 180+j*180;stage.addChild(tile);tile.buttonMode=true;tile.interactive = true;tile.isSelected=false;tile.alpha=0.5;}}

But what is shown, is just the first object from that array 4 times.
How can I display all the items on the stage? Is it a MovieClip or MovieClip.fromFrame something?

[bubamara]

What it's showing, is just 1st frame from all frames you have passed as parameter to PIXI.MovieClip().

 

PIXI.MovieClip is in fact PIXI.Sprite with multiple textures, which can be switched one after another to create illusion of animated sprite.

So when you create new PIXI.MovieClip with arrCopy as parameter, PIXI will create new Sprite and set 1st texture for this sprite to frame 0 - that means 1st texture from arrCopy.

 

You have 2 options :

 

- use PIXI.MovieClip (why are you using MovieClip anyway?) and set proper frame for each sprite

 

for(var i=0;i<2;i++)

{

for(var j=0;j<2;j++)

{

var tile = new PIXI.MovieClip(arrCopy);

tile.position.x = 480+i*180;

tile.position.y = 180+j*180;


// tell PIXI.MovieClip, which frame will be shown

tile.gotoAndStop(i + 2 * j);


stage.addChild(tile);

tile.buttonMode=true;

tile.interactive = true;

tile.isSelected=false;

tile.alpha=0.5;


}

}

- or use PIXI.Sprite instead of PIXI.MovieClip

 

for(var i=0;i<2;i++)

{

for(var j=0;j<2;j++)

{

var tile = new PIXI.Sprite(arrCopy[i + 2 * j]);

tile.position.x = 480+i*180;

tile.position.y = 180+j*180;

stage.addChild(tile);

tile.buttonMode=true;

tile.interactive = true;

tile.isSelected=false;

tile.alpha=0.5;


}

}

[v_nastey]

Thanks, this helped. Another question, in this context, how can I create a moveclip with this moveclip inside, plus a texture?
 

for(var i=0;i<2;i++){for(var j=0;j<2;j++){var bckground = PIXI.Texture.fromFrame("BtnAutoSpinOn.png");var tile1 = new PIXI.MovieClip(arrCopy);// tell PIXI.MovieClip, which frame will be showntile1.gotoAndStop(i + 2 * j);

var textures = [bckground, tile1];tile = new PIXI.MovieClip(textures);tile.gotoAndStop(1);tile.position.x = 480+i*180; tile.position.y = 180+j*180; stage.addChild(tile);

This throws an error if i change the frame to the movieclip. How can I fix this?

[bubamara]

It throws an error, because PIXI.MovieClip requires textures to be passed as parameter and you are trying to pass tile1 which is already a MovieClip.

What exactly are you trying to do? If you explain it, will be easier for us all to help you.

[v_nastey]

What I have is an array of images into the movieclip, and i'm shuffiling them. I want to have an image that is over the top on every image, and on click event i want to get back the original image from the movieclip.

[bubamara]

If you are making pair game and you want to have all tile "tops" same and when you click on tile, another texture will be shown, then on second click on the same tile will revert sprite's texture back to default, try this:

 

setup textures :

var defaultTileTexture = PIXI.Texture.fromFrame('tileTop.png');	var item1 = PIXI.Texture.fromFrame('tile01.png');var item2 = PIXI.Texture.fromFrame('tile02.png');

then give each tile unique ID ( myID ), and set tile's texture to defaultTileTexture

for(var i=0;i<2;i++) {	for(var j=0;j<2;j++) {		var tile = new PIXI.Sprite(defaultTileTexture);		tile.position.x = 480+i*180;		tile.position.y = 480+j*180;		stage.addChild(tile);		tile.buttonMode=true;		tile.interactive = true;		tile.isSelected=false;				// set unique ID		tile.myID = i + 2 * j;		tile.alpha=0.5;				// handle click		tile.click = tile.tap = onTileSelected;	}}

function handlig click will check, which texture is shown and will swap textures

function onTileSelected() {	if (this.texture === defaultTileTexture) {		this.setTexture(arrCopy[this.myID]);	} else {		this.setTexture(defaultTileTexture);	}}