Jump to content

Movie Clip Help


v_nastey
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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;

}
}

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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