Pixi.js: TransformStatic , update rotation Reset skew , scale , why ?

[djmisterjon]

hi guy, am trying to make a simple easing loop animation.
I need pass a obj, with propreties.
i pass the TransformStatic

How i can perform correctly and update skew, scale, and rotation.
Rotation seem to always reset my transform!, maybe am not understand correctly how this work.
thank for help

what i need to do it, something like this

this._cx = newValur;
this._cy = newValur;
this._sy = newValur;
this._rotation = newValur; // not work when upd localID!?
this._localID++; // this seem to update all transform but not the rotation
// so 
this.rotation = newValur;
//!!! ho, rotation reset all data transform!! why and how fixe this

[ivanpopelyshev]

Because .. source code: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/TransformStatic.js#L177

When someone changes rotation it automatically calls updateSkew() without any update ids.

[ivanpopelyshev]

There are many ways to implement Transform, I can't provide an explanation why does it work exactly like it works now. It was born by consensus of multiple people when we made pixi-v4 release candidate.

[djmisterjon]

thanks @ivanpopelyshev for you anwser.
i have found an tempory alternative for now, i have modify the update of my EASE TWEEN animation system.
The problem is that I have to point to 2d properties. ( this[props][props2] )
and this not good for performance in the update.

ideally I would like a suggestion to manage everything in TransformStatic.
So for now instead pass TransformStatic, i pass the PIXI.SPRITE, and use props
this.rotation,..
this.x, ...
this.alpha..
this.skew.x ..(2D deep mode for udpate)
this.scale.x ..(2D deep mode for udpate)

this its the update easing, see at // its 2d PIXI DEEP PROPRETY
it use Robert Penner's easing functions;
```javascript
$.prototype.update = function() {
if(!this._running || --this._delay >= 0) {
return true;
}
var complete = (++this._time >= this._duration);
var progress = complete ? 1.0 : parseFloat(this._easing(this._time / this._duration));
for(var prop in this._valuesEnd) {
if(typeof this._valuesEnd[prop]==='number'){
var start = this._valuesStart[prop];
var end = this._valuesEnd[prop];
this._valueSetCallback(this._object, prop, start + (end - start) * progress);
}else{ // its 2d PIXI DEEP PROPRETY
for(var prop2D in this._valuesEnd[prop]) {
var start = this._valuesStart[prop][prop2D];
var end = this._valuesEnd[prop][prop2D];
this._valueSetCallback(this._object[prop], prop2D, start + (end - start) * progress);

                }
            }
        }
        if(this._onUpdateCallback !== undefined) {
            this._onUpdateCallback(this._object,progress);
        }
        if(complete) {
            this._running = false;
            if(this._onCompleteCallback !== undefined) {
                this._onCompleteCallback(this._object);
            }
            this._chainedTweens.forEach(function(tween) {
                tween.start();
            });
        }
        return !complete;
    }

and the _valueSetCallback related to this , change the proprety of pixi object


```javascript
   /*
        * Default callbacks to be used for accessing properties on objects. Can be
        * overridden to alter the default behaviour. For single tweens, the function
        * access(getCallback, setCallback) can be used to provide custom functions.
        */
        defaultCallbacks: { // DEFAULT RMMV
            propertyGet: function(object, property) {
                return object[property] || 0;
            },
            propertySet: function(object, property, value) {
                object[property] = value;
            }
        }   

if anyone has an idea or an alternative ?
thank

[djmisterjon]

that show little bit the issue and hard target all props with animatedSprites
https://youtu.be/N3WDQHXUvwc

[ivanpopelyshev]

I dont get it. The issue is obfuscated, please make a fiddle without RMMV, just vanilla pixi, tweens and one AnimatedSprite.

I would debug your game directly if I had time, but unfortunately I'm too busy with v5.

[ivanpopelyshev]

However, I like issues related to Transform, so if we find some inconsistance, we can probably change it in v5 ;)

You can assume that TransformStatic will be renamed to Transform and that'll be the only transform there.

[djmisterjon]

my full plugin avaible here
https://codeshare.io/aVkDA3

[ivanpopelyshev]

I dont need plugin, I need working example that fails, no extra references. You can also wait, I'm sure i'll have time next weekend. or one after next. Or next month :)

[ivanpopelyshev]

btw art looks good.

[djmisterjon]

in fact an idea comes to me, i think these approaches on AFTER EFFECT that is not the right one.
I'll see if I can try another approach for work in other way, without too many easing scirpt.

I will probably take advice on your work about the 2.5D calculation.
i working on a tool for PIXI SPRITEANIMATION which will makes me very easy integration work in development.
there is just a problem for the 2.5D tool, what you can constrain it on this preview.
https://youtu.be/3Dt-IXhE2fc
I will probably need some advice on the approach of your work when the time will comes.
thank

ps thank for art, am waiting my new pen tabs in 5 day.

[ivanpopelyshev]

Looks good, i can help with it :)

[djmisterjon]

thank
I'll try to finish it in 2 or 3 day the toolz, and make you a demo with a debug console.
if you will can help me with algorithm for the 2.5D tool , it will be very welcome for me.
I'm rewriting cleanest the code right now.
I find you really great with your extension PIXI PROJECTION,
despite the difficulty of setting it up in rmmv
I remember trying to integrate you project.
https://youtu.be/U26U-8hSeSw
but its too hard for me

[themoonrat]

@djmisterjon closing as I think you have a workaround for how transforms work in v4 now? Please re-open if you're still having issues

[lock[bot]]

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.