How do you read PIXI's documentation

[evu]

I've just started looking into using PIXI for some image manipulation, however I'm really struggling to get anything to work as the documentation seems very lackluster.

For instance:

offsetPIXI.Point

This point describes the the offset of the twist.

 

However when I try to change that offset via either "filterName.offset.x = 0", "filterName.offset = new PIXI.point(x, y)", "filterName.offset = {x: 0, y:0}", etc. Nothing works. I'm failing to see how this is implemented during the animation function. Even looking at the source doesn't help, the only thing I have to go off are the odd examples I find elsewhere on the web. Even the examples PIXI provides don't help much as they're using the stat bars.

This is just one instance, I've tried the other filters with varying success, some properties work, others don't.

 

Am I missing something or is there something to the documentation that should just click?

 

Thanks.

[ivan.popelyshev]

Which version of pixi is it? It worked in v3, but I didnt test it in v4

[evu]

It's version 3.0.9 that I'm using, though I'm beginning to think it's something fundamentally wrong that I'm doing to be honest, because copying example code doesn't seem to want to work...

Here is the code:
 

    var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.view);
    
    var stage = new PIXI.Container();
    var image = new PIXI.Sprite.fromImage("http://f.cl.ly/items/2V0p0b1S3M2w3q3s1g1m/background.png");
    
    var twist = new PIXI.filters.ShockwaveFilter();
    twist.angle = 2;
    twist.radius = 0.5;
    
    image.filters = [twist]; 

    stage.addChild(image); 

    animate();

var cx = 0;

var reverse = false;

function animate() {
        if (cx >= 1) {
            reverse = true;
        }
        
        if (cx <= 0.1) {
            reverse = false;
        }
        
        if (reverse) {
            cx -= 0.1;
        } else {
            cx += 0.1;
        }
        
        twist.offset.x = cx;
        
        renderer.render(stage);
        // start the timer for the next animation loop
        requestAnimationFrame(animate);
}

 

Basically just an example trying to move the twist around.

 

Cheers.

[zowesiouff]

I'm not completely sure what you want to do, but your example tries to use a ShockwaveFilter instead of a TwistFilter (and `offset` is not a valid property of the ShockwaveFilter)

[evu]

Ah, sorry, that was something else I must of missed whilst trying to clean the code up for that snippet, must of deleted the wrong line. It is set to a twist filter, but I think I've figured out where I'm going wrong - The documentation isn't correct for this version of PIXI (3.0.9), or at least it seems to be to me. I switched to the old versions (1.x.x) and everything I've found works, to a degree.