Jump to content

How do you read PIXI's documentation


Recommended Posts

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:


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?



Link to comment
Share on other sites

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);
    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]; 



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;
        // start the timer for the next animation loop


Basically just an example trying to move the twist around.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...