Pixi.js: Simpler Sprite (instances) creation.

Created on 21 Sep 2016  路  4Comments  路  Source: pixijs/pixi.js

Hi,

More than an issue is a suggestion.

When dealing with a lot of instances, such as sprites, I often have to type this in order to set up each instance:

var mySprite = PIXI.Sprite.fromImage(url);
mySprite.position.x = 100;
mySprite.position.y = 50;
mySprite.scale.x = 0.5;
mySprite.scale.y = 0.5;

So basically I'm typing the var name a lot.

So the suggestion would be for a simpler and cleaner way to create instances, like a constructor with a configuration object, like this:

var mySprite = pixiSpriteClass("url", {positionX:100, positionY:50, scale:0.5});

That returns the PIXI instance.

I created a simple gist that addresses my specific use-case, so is not meant to be bullet proof in every scenario, but is a starting point:

https://gist.github.com/rhernandog/6d1a14e647d8a8083503d1d2274d671a

Best,
Rodrigo.

Most helpful comment

Another alternative approach is to use setTransform:

var mySprite = PIXI.Sprite.fromImage(url);
mySprite.setTransform(100, 50, 0.5, 0.5);

All 4 comments

you can already use a little shorter version right now:

var mySprite = PIXI.Sprite.fromImage(url);
mySprite.position.set(100,50);
mySprite.scale.set(0.5,0.5);    // or just (0.5)  will set both x and y scale :)


Another alternative approach is to use setTransform:

var mySprite = PIXI.Sprite.fromImage(url);
mySprite.setTransform(100, 50, 0.5, 0.5);

Thanks to both of you for the info.

Although I'll keep my little class at hand since setTransform doesn't account for all the properties of the display object being used. I'll use it carefully though.

I consider this closed.
Thanks again.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings