Using a vector class with sprites

[SarahJ]

Hi,

I'm new to Pixi.js and am wondering if it is possible to implement my own vector class with Pixi sprites, to simplify vector calculations. So far, Pixi.js has seemed really flexible so I thought there may be a built-in way to this.

Thanks!

[ivan.popelyshev]

Do you mean Vector graphics? Or just transform stuff (Transform, Matrix classes) ?

[SarahJ]

I would like to use Vector maths (add, subtract, etc) on the Sprites position. So far I see that the position is an instance of PIXI.ObservablePoint, would it be better to add functions to that or extend it?

[ivan.popelyshev]

you have to add more functions to Point and ObservablePoint prototypes. The thing is , its better not clone Observables because they affect transform cache calculations.

myMixin = {
   add: function() {... return new Point();} // return point everywhere
   subtract: function() { ... }
}

Object.assign(PIXI.Point.prototype, myMixin);
Object.assign(PIXI.ObservablePoint.prototype, myMixin);

sprite.position = point1.add(point2); // be aware that its NOT ASSIGNMENT, its value copy in setter.

 

 

[SarahJ]

Thanks for your reply! Just a question: Would it be possible to directly change the position through functions? Eg.

sprite.position.add(x, y);

[ivan.popelyshev]

if you do mutable methods like these, dont forget that ObservablePoint has to notify transform: https://github.com/pixijs/pixi.js/blob/dev/packages/math/src/ObservablePoint.js#L52 , either you have to call "set" inside, either callback. 

using "set" inside those functions is good idea, because both Point and ObservablePoint implementations will be the same in that case.

Points class in pixi aren't universal. We didnt add those functions exactly because different users want different implementations for their games.

You're blessed for hacks

[SarahJ]

I've got it working now, thanks for your help!