Repeating Texture and Animation

[pdiddles03]

First off, Pixi.js is awesome.  A current dream of mine is to start a small Javascript game company and put games into app stores and all that. Not necessarily to make a living off of it but just to have fun and make a few extra bucks.  Pixi.js is enabling me to make the 2d "retro type" games I have always wanted to make. THANK YOU! 

 

Anyway...New question.

 

Is there is there some kind of function to make an animated repeating texture? Much like a movie clip but have the image repeat?

[xerver]

Not sure I follow, are you looking for the loop property of MovieClip?

[pdiddles03]

Not sure I follow, are you looking for the loop property of MovieClip?

Am I able to use a movie clip as a tiling sprite?

[xerver]

Oh, by repeat you don't mean repeat the animation. You mean tile the texture.

 

No there is no animated TilingSprite, but you can create only pretty easily by changing the texture of the tiling sprite just like movieclip does for a sprite.

[pdiddles03]

Oh, by repeat you don't mean repeat the animation. You mean tile the texture.

 

No there is no animated TilingSprite, but you can create only pretty easily by changing the texture of the tiling sprite just like movieclip does for a sprite.

That is what I figure I'd have to do.  I was just curious if anything was built into pixi for that. 

 

One quick question for you xerver.  How would you switch graphics, would you set an interval using "setInterval" or would you create a counter that switches it once it reaches a certain number?

[xerver]

Either way, depends on your application. setTimeout is fine for most cases, but has implications when you switch tabs. I would use the PIXI.Ticker class just like MovieClip does. It uses requestAnimationFrame and handles it for you.

[d13]

 I was just curious if anything was built into pixi for that. 

Yes, just create a TilingSprite (PIXI.extras.TilingSprite) and then change the `tilePosition.x` and `tilePosition.y` properties inside your game loop.

Something like this:

function gameLoop(){  requestAnimationFrame(gameLoop);  tilingSprite.tilePosition.x += 1;  tilingSprite.tilePosition.x += 1;}

If your tilingSprite is a seamless pattern, you easily create an infinite scrolling background like this.

[pdiddles03]

Yes, just create a TilingSprite (PIXI.extras.TilingSprite) and then change the `tilePosition.x` and `tilePosition.y` properties inside your game loop.

Something like this:

function gameLoop(){  requestAnimationFrame(gameLoop);  tilingSprite.tilePosition.x += 1;  tilingSprite.tilePosition.x += 1;}

If your tilingSprite is a seamless pattern, you easily create an infinite scrolling background like this.

Thanks for your reply but I need to change the entire texture to show animation, not just scroll the image.