constant sprite size Transform independent Sprite size (constant sprite size)

[aquanaft]

Hello. I want to make Sprite size (width, height) transform independent (constant sprite size). What I mean is whenever I change transformation matrix it should apply for coords, but not the size of the sprite.

I've been looking into sources and found 2 ways to do that, but I don't like neither of them.

1) Different containers: Right now I change main container's (stage) matrix and it applies for all children in it, which is great, but not in my case. I can split objects that I want to be scale size independent into another container and only sync translation, which is a bit odd to me, because I still want the transform for this container (for coords).

2) Not sure if it will work: whenever I change main container's matrix, for every object that I want to make scale independent, change worldTransform (a, d) to 1. But I think it will break the coords.

 

Is there a good way to achieve this?

[ivan.popelyshev]

You can make your own sprite class and make hacks for it: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L302

See how renderWebgl calls calculateVertices? You can override this method. Just extend Sprite class (no editing of pixijs needed!!!), and change it. Also chance calculateTrimmedVertices, otherwise it will calculate sprite bounds wrong for masks and filters.

Also i recommend to override width/height properties.

I'll help you more when you try it and get some code for review.

[aquanaft]

28 minutes ago, ivan.popelyshev said:

You can make your own sprite class and make hacks for it: https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L302

See how renderWebgl calls calculateVertices? You can override this method. Just extend Sprite class (no editing of pixijs needed!!!), and change it. Also chance calculateTrimmedVertices, otherwise it will calculate sprite bounds wrong for masks and filters.

Also i recommend to override width/height properties.

I'll help you more when you try it and get some code for review.

Yeah, I found calculateVertices yesterday :D. But at first, I've tried to override width/height, which didn't work.

 

 import * as PIXI from 'pixi.js';

 const oldDescriptors = Object.getOwnPropertyDescriptors(PIXI.Sprite.prototype);

 Object.defineProperties(PIXI.Sprite.prototype, {
  ignoreScale: {
    value: false,
    writable: true,
  },

  width: {
    ...oldDescriptors.width,

    get() {
      let val = this._texture.orig.width;

       if (!this.ignoreScale) {
        val *= Math.abs(this.scale.x);
       }

      return val;
    },
  },

  height: {
    ...oldDescriptors.height,

    get() {
      let val = this._texture.orig.height;

       if (!this.ignoreScale) {
        val *= Math.abs(this.scale.y);
       }

      return val;
    },
  },
 });

(sorry, dunno how to hide that in spoiler)

I'll try calculateVertices, thx

[ivan.popelyshev]

You need to store your own "_width" and "_height" , or may be "size" of type PIXI.Point there.

Also, about calculateVertices - you can use rotation and position of matrix and ignore scale, something like

let s1 = Math.sqrt(m.a*m.a + m.b * m.b), s2 = Math.sqrt(m.c * m.c + m.d * m.d);
let a = m.a / s1, b = m.b / s1, c = m.c / s2, d = m.d / s2;

Again, I'm not supplying you concrete solution, I believe you are smart enough ot fill the holes, and i have no time for it: too many people asking things, im supporting multiple libs and PIXI is kinda my main job too.

I can make custom transforms lib later based on your case if you succeed

Don't be afraid, its very simple case compared to https://github.com/pixijs/pixi-spine/blob/master/src/core/Bone.ts#L89

[aquanaft]

heh, I thought it would be as ez as:

const a = this.ignoreScale ? 1 : wt.a;
const d = this.ignoreScale ? 1 : wt.d;

Thanks for your time.

 

P.S. дальше доделаю, спасибо

[ivan.popelyshev]

That's true in case you dont use rotations or -1 scale (flip). I gave you formulas to ignore only positive scale.

Also I thought you would like to use something like "this._width / orig.width" instead. Or just use _width everywhere instead of orig.width in that method. 

You're the one implementing it, take my words as advice, not as instruction